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

Google Maps infoWindow only loading last record on markers

提问by knawlejj

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 hereHere's the code:

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

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

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

回答by H.M.

Add contentas a property to marker object and use this.contentin the event handler:

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

回答by Galen

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.

这将为每个标记显示相同的内容，您不希望这样。

---

---

你想要做的是只创建一个没有内容的信息窗口（在你的标记循环之前）。然后当点击标记时，将内容附加到信息窗口...然后打开信息窗口。这将节省代码行并导致信息窗口自动关闭。

before creating your markers (with the loop) add this

在创建标记之前（使用循环）添加这个

infowindow = new google.maps.InfoWindow();

in your marker code add the infowindow.setContent call

在您的标记代码中添加 infowindow.setContent 调用

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

 });