Google地图infoWindow仅加载标记上的最后一条记录 [英] Google Maps infoWindow only loading last record on markers

问题描述

我正在尝试加载带有动态标记和动态信息窗口的Google地图，以便与他们一起使用。基本上我有标记工作。 infoWindows是可点击和可关闭的，但它们没有正确的内容。看来每个infoWindow的内容是在查询循环中找到的最后一条记录。您将看到发生了什么这里代码如下：

 < script type =text / javascript> 
 
 
 //使用选项加载Google Map // 
 function initialize（）{
 var myLatlng = new google.maps.LatLng（42.48019996901214，-90.670166015625） ; 
 var myOptions = {
 zoom：6，
 center：myLatlng，
 mapTypeId：google.maps.MapTypeId.ROADMAP 
} 
 var map = new google.maps.Map（document.getElementById（map_canvas），myOptions）; 
 
 //开始查询循环以设置标记和infoWindow内容// 
 
< cfoutput query =GetCoord> 
 var LatLng = new google.maps.LatLng（＃Client_Lat＃，＃Client_Lng＃）; 
 
 var marker = new google.maps.Marker（{
 position：LatLng，
 map：map，
 title：＃Client_Company＃
 }）; 
 
 var contentString ='< p>< b>＃Client_Company＃< / b>< br>'+ 
'＃Client_Address＃< br>'+ 
'#Client_City＃，& nbsp; ＃Client_State＃& nbsp; ＃Client_Zip＃< br>'+ 
'< a href =member_detail.cfm？ID =＃Client_ID＃>查看详情< / a>'; 
 
 var infowindow = new google.maps.InfoWindow（{
 content：contentString 
}）; 
 
 google.maps.event.addListener（marker，'click'，function（）{
 infowindow.open（map，this）; 
 
}）; 
< / cfoutput> 
 //结束查询循环
} 
 
< / script>关于为什么会发生这种情况的任何想法？
 
 
 
 < h2_lin>解决方案
在您的代码中，您静态设置信息窗口内容加载
  var infowindow = new google.maps.InfoWindow（{
 content：contentString 
}）; 
  
然后当您的标记被点击时，您只需打开该信息窗口
  google.maps.event.addListener（marker，'click'，function（）{
 infowindow.open（map，marker）; 
 }）; 
  
这将为每个标记显示相同的内容，你不想要这样。 
 
 
你想做的只是创建一个没有内容的信息窗口（在标记循环之前）。那么当单击标记时，将内容附加到信息窗口...然后打开信息窗口。这将保存代码行，并使信息窗口自动关闭。
 
 
 
在创建标记之前添加此
  infowindow = new google.maps.InfoWindow（）; 
  
在您的标记代码中添加infowindow.setContent调用
  google.maps.event.addListener（marker，'click'，function（）{
 infowindow.setContent（contentString）; 
 infowindow.open map，marker）; 
 
}）; 
  
 
I'm trying to load a google map with dynamic markers and dynamic infoWindows to go with them. Basically I've got the markers working. The infoWindows are clickable and closable, however they do not have the correct content. It seems that the content for every infoWindow is the last record that is found in the query loop. You will see whats happening here Here's the code:
<script type="text/javascript"> 


//Load the Google Map with Options//
  function initialize() {
    var myLatlng = new google.maps.LatLng(42.48019996901214, -90.670166015625);
    var myOptions = {
      zoom: 6,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    //Begin query loop to set the markers and infoWindow content//

    <cfoutput query="GetCoord">
    var LatLng = new google.maps.LatLng(#Client_Lat#, #Client_Lng#);

    var marker = new google.maps.Marker({
        position: LatLng,
        map: map,
        title: "#Client_Company#"
    });   

    var contentString = '<p><b>#Client_Company#</b><br>'+
                        '#Client_Address#<br>'+
                        '#Client_City#,&nbsp; #Client_State# &nbsp; #Client_Zip#<br>'+
                        '<a href="member_detail.cfm?ID=#Client_ID#">View Details</a>';

    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,this);

     });
    </cfoutput>
    //End query loop
    }

</script>
Any ideas on why this is happening?
解决方案
In your code you statically set the infowindow content on load with
var infowindow = new google.maps.InfoWindow({
    content: contentString
});
Then when your markers are clicked you are just opening that infowindow
google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
 });
this will display the same content for every marker, you do not want this.

what you want to do is create only one infowindow with no content (before your marker loop). then when a marker is clicked attach the content to the info window... then open the infowindow. This will save lines of code and cause the infowindow to close automatically.


before creating your markers (with the loop) add this
infowindow = new google.maps.InfoWindow();
in your marker code add the infowindow.setContent call
google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(contentString);
    infowindow.open(map,marker);

 });


                        
这篇关于Google地图infoWindow仅加载标记上的最后一条记录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！