我试图添加一组标记到谷歌地图每个信息窗口。我使用php和javascript的混合来做到这一点,php从数据库中获取所有记录,然后javascript将所有标记添加到地图上,并从数据库中获取坐标。
到目前为止我写的是:
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(<?=$lat?>, <?=$long?>);
var settings = {
zoom: 12,
center: latlng,
mapTypeControl: false,
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP};
var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
var postcodeLogo = new google.maps.MarkerImage('/images/postcode_marker.png',
new google.maps.Size(32,37),
new google.maps.Point(0,0),
new google.maps.Point(15,34)
);
var propertyLogo = new google.maps.MarkerImage('/images/property_marker.png',
new google.maps.Size(32,37),
new google.maps.Point(0,0),
new google.maps.Point(15,34)
);
var infowindow = new google.maps.InfoWindow();
<?
foreach ($results as $grid_refs)
{
?>
var propPos = new google.maps.LatLng(<?=$grid_refs['grid_ref']?>);
propMarker = new google.maps.Marker({
position: propPos,
map: map,
icon: propertyLogo,
title:"<?=$grid_refs['sd_name']?>",
zIndex: 3});
var contentString = '<div style="font-weight:bold;"><?=$grid_refs['sd_name']?></div><div><img src="www.imagelink.com/<?=$grid_refs['image_filename']?>"></div><div><a href="http://www.pagelink-<?=$grid_refs['property_id'];?>/" target="-blank">See full details</a></div>';
google.maps.event.addListener(propMarker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,this);
});
<?
}
?>
var positionPos = new google.maps.LatLng(<?=$lat?>, <?=$long?>);
var positionMarker = new google.maps.Marker({
position: positionPos,
map: map,
icon: postcodeLogo,
title:"<?=$_GET['searchpostcode']?>",
zIndex: 3});
}
</script>
positionMarker是用户输入他们想要搜索的邮政编码的地方。propMarker标记地图上的所有位置,然后显示。
在代码中显示所有信息,但是在地图上每个信息窗口打开与最后检索的记录-我希望它加载与该标记相关的信息。
我看过这个问题:
Google Maps infoWindow只在标记上加载最后一条记录
这将工作,但我似乎不能得到一个js循环与php foreach工作,我已经尝试过它在php foreach和外部。
我想我需要的是forearch循环改变变量和contentString的名称每次它创建一个标记,但我似乎可以得到这个工作?
任何帮助都非常感谢!
你会循环遍历所有的标记,但在最后一次迭代中,你设置到contentString中的内容变成了所有点击事件所使用的内容
相反,将此委托给另一个函数(或使用闭包),例如
<?
foreach ($results as $grid_refs)
{
?>
var propPos = new google.maps.LatLng(<?=$grid_refs['grid_ref']?>);
propMarker = new google.maps.Marker({
position: propPos,
map: map,
icon: propertyLogo,
title:"<?=$grid_refs['sd_name']?>",
zIndex: 3});
var contentString = '<div style="font-weight:bold;"><?=$grid_refs['sd_name']?></div><div><img src="www.imagelink.com/<?=$grid_refs['image_filename']?>"></div><div><a href="http://www.pagelink-<?=$grid_refs['property_id'];?>/" target="-blank">See full details</a></div>';
// add an event listener for this marker
bindInfoWindow(propMarker, map, infowindow, contentString);
<?
}
?>
然后添加一个新函数:
function bindInfoWindow(marker, map, infowindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(html);
infowindow.open(map, marker);
});
}