Google Maps infoWindow 仅加载标记上的最后一条记录

Question

我正在尝试加载带有动态标记和动态 infoWindows 的谷歌地图以配合它们。基本上我已经让标记工作了。 infoWindows 是可点击和可关闭的，但是它们没有正确的内容。似乎每个 infoWindow 的内容都是在查询循环中找到的最后一条记录。你会看到发生了什么here 这是代码：

<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>

关于为什么会发生这种情况的任何想法？

Answer 1

将content 作为属性添加到标记对象并在事件处理程序中使用this.content：

var marker = new google.maps.Marker(options);
marker.content = '<div>Content goes here....</div>';

var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', function () {
                                infoWindow.setContent(this.content);
                                infoWindow.open(this.getMap(), this);
                            });

Answer 2

在您的代码中，您静态设置加载时的信息窗口内容

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);

 });