动态添加图像到Infowindow [英] Dynamically Add Image To Infowindow
问题描述
我使用下面的代码将图像加载到HTML页面，这对于当前'位置'和'用户'ID。
< div id =galleria>
<？php
$ dirlist = getFileList（$ galleryPath，true）;
$ x = 0;
foreach（$ dirlist as $ file）{
if（（preg_match（/ \.jpg $ /，$ file ['name']））或（preg_match（/ \。 jpeg $ /，$ file ['name']））或（preg_match（/ \.png $ /，$ file ['name']））或（preg_match（/ \.bmp $ /） ，$ file ['name']））或（preg_match（/ \.gif $ /，$ file ['name']）））{
echo< img src ='{$ file ['name']}'/>;
$ x = 1;
}
}
if（$ x == 0）{
echo< img src ='images / noimage.jpg'/>;
}
？>
< / div>
这很好，但我在这方面有两个方面的困难。我试图仅显示第一张图片，并将该图片放在Infowindow而不是主页面上。但我必须绝对诚实，并说我甚至不知道从哪里开始。我花了几天的时间才得到这一点。
下面的代码是来自脚本的提取，它创建了标记和Infowindow。
downloadUrl（loadlocationfinds.php？locationid =<？php echo $ lid？>，function （data）{
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName（marker）;
var bounds = new google.maps.LatLngBounds（）;
for（var i = 0; i< markers.length; i ++）{
var findid = markers [i] .getAttribute（findid）;
var locationid = markers [i] .getAttribute（locationid）;
var findosgb36lat = markers [i] .getAttribute（findosgb36lat）;
var findosgb36lon = markers [i] .getAttribute（findosgb36lon）;
var findcategory = markers [i] .getAttribute（findcategory）;
var point = new google.maps.LatLng（
parseFloat（markers [i] .getAttribute（findosgb36lat）），
parseFloat（markers [i] .getAttribute（findosgb36lon）））;
var html =< span class ='h3 orange'>< strong> +'找到物品：'+< / strong>< / span>< br> + finddescription +< br>;
var icon = customIcons [findcategory] || {};
var marker = new google.maps.Marker（{
map：地图，
位置：点，
标题：'点击查看详细信息'，
图标： icon.icon，
阴影：icon.shadow，
formfindosgb36lat：findosgb36lat，
formfindosgb36lon：findosgb36lon，
formfindcategory：findcategory，
}）;
bounds.extend（point）;
map.fitBounds（bounds）;
bindInfoWindow（marker，map，infoWindow，html）;
google.maps.event.addListener（marker，click，function（）{
document.getElementById（'findosgb36lat'）。value = this.formfindosgb36lat;
document.getElementById（' findosgb36lon'）。value = this.formfindosgb36lon;
document.getElementById（'findcategory'）。value = this.formfindcategory;
}）;
}
}）;
函数bindInfoWindow（marker，map，infoWindow，html）{
google.maps.event.addListener（marker，'click'，function（）{
infoWindow.setContent（html）;
infoWindow.open（map，marker，html）;
}）;
}
我只是想知道是否有人可以看看这个提供一些帮助，以便我只能在'Infowindwow'中显示第一张图片。
非常感谢和最诚挚的问候
该图像被添加到infowindow的html中
$ b
........................
var html = < span class ='h3 orange'>< strong> +'找到物品：'+< / strong>< / span>< br> + finddescription +< br>;
html + =< img src = \image.jpg \alt = \My Image \height = \Ypx\width = \Xpx\> ;<峰; br>中;
........................
其中 X 和 Y 是整数
I wonder whether someone may be able to help me please.
I'm using the code below to load images onto a HTML page, which are pertient to the current 'Location' and 'User' id's.
<div id="galleria">
<?php
$dirlist = getFileList($galleryPath, true);
$x = 0;
foreach($dirlist as $file) {
if((preg_match("/\.jpg$/", $file['name'])) or (preg_match("/\.jpeg$/", $file['name'])) or (preg_match("/\.png$/", $file['name'])) or (preg_match("/\.bmp$/", $file['name'])) or (preg_match("/\.gif$/", $file['name']))) {
echo "<img src='{$file['name']}' />";
$x = 1;
}
}
if ($x == 0) {
echo "<img src='images/noimage.jpg' />";
}
?>
</div>
This works fine, but I'm having difficulty with two aspects of this. I'm trying to only show the first image and put that image in the 'Infowindow' rather than on the main page. But I have to be absolutely honest and say I'm not even sure where to begin. It's taken me a few days just to to get to this point.
The code below, is an extract from the script which creates the marker and the Infowindow.
downloadUrl("loadlocationfinds.php?locationid=<?php echo $lid?>", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
var findid = markers[i].getAttribute("findid");
var locationid = markers[i].getAttribute("locationid");
var findosgb36lat = markers[i].getAttribute("findosgb36lat");
var findosgb36lon = markers[i].getAttribute("findosgb36lon");
var findcategory = markers[i].getAttribute("findcategory");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("findosgb36lat")),
parseFloat(markers[i].getAttribute("findosgb36lon")));
var html = "<span class='h3 orange'><strong>" + 'Item Found: ' + "</strong></span><br>" + finddescription + "<br>";
var icon = customIcons[findcategory] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
title: 'Click to view details',
icon: icon.icon,
shadow: icon.shadow,
formfindosgb36lat: findosgb36lat,
formfindosgb36lon: findosgb36lon,
formfindcategory: findcategory,
});
bounds.extend(point);
map.fitBounds(bounds);
bindInfoWindow(marker, map, infoWindow, html);
google.maps.event.addListener(marker, "click", function() {
document.getElementById('findosgb36lat').value = this.formfindosgb36lat;
document.getElementById('findosgb36lon').value = this.formfindosgb36lon;
document.getElementById('findcategory').value = this.formfindcategory;
});
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker, html);
});
}
I just wondered whether someone may be able to take a look at this please and offers a little help so that I'm able to only show the first image within the 'Infowindwow'.
Many thanks and the kindest regards
The image is added to the html of the infowindow
ie
........................
var html = "<span class='h3 orange'><strong>" + 'Item Found: ' + "</strong></span><br>" + finddescription + "<br>";
html+= "<img src=\"image.jpg\" alt=\"My Image\" height=\"Ypx\" width=\"Xpx\"><br>";
........................
Where X and Y are integers
这篇关于动态添加图像到Infowindow的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
