谷歌地图标记加载最后一条记录

Question

我想添加一组标记到谷歌地图每个信息窗口。我使用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 only loading last record on markers

这将工作，但我不能似乎得到了循环使用PHP的foreach工作一个js，我有PHP的foreach外内试了一下的。

我想我需要的是forearch循环来更改变量和contentString的名称，每次它创建一个标记，但我似乎得到这个工作？

任何帮助非常感谢！

Answer 1

会发生什么情况是您循环了所有标记，但在最后一次迭代中，您设置为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); 
    }); 
}