javascript 谷歌地图 - 多个标记 - 1 InfoWindow 问题

Google Maps - Multiple markers - 1 InfoWindow problem

提问by user441365

I can't get my markers to display different infowindows. The markers always display the content of the last "contentString".

我无法让我的标记显示不同的信息窗口。标记始终显示最后一个“contentString”的内容。

I've read a few other posts but none of them seem to help.

我已经阅读了其他一些帖子，但似乎都没有帮助。

This is the code:

这是代码：

    function setMarkers(branches, map) {
        var bounds = new google.maps.LatLngBounds();
        var contentString = null;
        var infowindow = null;
        infowindow = new google.maps.InfoWindow();
        for (var i = 0; i < branches.length; i++) {
            var marker = null;
            branch = branches[i];
            var myLatlngMarker = new google.maps.LatLng(branch[0], branch[1]);
            contentString = '<p>' + branch[3] + '</p>';

            var marker = new google.maps.Marker({
                position: myLatlngMarker,
                map: map,
                title: branch[2]
            });

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

            bounds.extend(myLatlngMarker);
        }

        map.fitBounds(bounds);
    }

Can anyone see what am I doing wrong?

谁能看到我做错了什么？

Thanks

谢谢

回答by user441365

Right,

对，

I found a solution. I added an extra property to the marker called 'info' and then referenced it from the 'addlistener' event 'infowindow.setContent(this.info)'.

我找到了解决办法。我向名为“info”的标记添加了一个额外的属性，然后从“addlistener”事件“infowindow.setContent(this.info)”中引用了它。

Here is the updated code:

这是更新后的代码：

function setMarkers(branches, map) {
    var marker = null;
    var infowindow = new google.maps.InfoWindow();
    var bounds = new google.maps.LatLngBounds();

    for (var i = 0; i < branches.length; i++) {
        branch = branches[i];

        var myLatlngMarker = new google.maps.LatLng(branch[0], branch[1]);

        var marker = new google.maps.Marker({
            position: myLatlngMarker,
            map: map,
            title: branch[2],
            info: branch[3],
            icon: '<%=Icon%>'
        });

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

        bounds.extend(myLatlngMarker);
    }

    map.fitBounds(bounds);
}

回答by puckhead

The reason it always displays the last contentString is because that is what it is set to when the click event fires. It gets overwritten in each iteration of the for loop.

它总是显示最后一个 contentString 的原因是因为它是在点击事件触发时设置的。它在 for 循环的每次迭代中都会被覆盖。

You should assign the event handler using a closure and pass contextString as an argument to the function, returning the real handler.

您应该使用闭包分配事件处理程序并将 contextString 作为参数传递给函数，返回真正的处理程序。

google.maps.event.addListener(marker, 'click', function(content) {
    return function(){
        infowindow.setContent(content);//set the content
        infowindow.open(map,this);
    }
}(contentString));

回答by bjornruysen

Have you tried declaring the infowindow and contentString inside the for-loop, instead of outside the loop?

您是否尝试在 for 循环内而不是在循环外声明 infowindow 和 contentString？

function setMarkers(branches, map) {
        var bounds = new google.maps.LatLngBounds();

        for (var i = 0; i < branches.length; i++) {
            var infowindow = new google.maps.InfoWindow();
            var contentString = "";
            var marker = null;
            branch = branches[i];
            var myLatlngMarker = new google.maps.LatLng(branch[0], branch[1]);
            contentString = '<p>' + branch[3] + '</p>';

            var marker = new google.maps.Marker({
                position: myLatlngMarker,
                map: map,
                title: branch[2]
            });

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

            bounds.extend(myLatlngMarker);
        }

        map.fitBounds(bounds);
    }

回答by DJ Howarth

Im having the same problem. I was able to get the title show up different though using this code:

我有同样的问题。尽管使用此代码，但我能够使标题显示不同：

  setMarkers(map, airports);
 }

 function setMarkers(map, locations) 
   {
     //you only need 1 infoWindow
     var infowindow = new google.maps.InfoWindow({
       content: "holding" //content will be set later
     });

     for (var i = 0; i < locations.length; i++) 
     {
       var airport = locations[i];
       var myLatLng = new google.maps.LatLng(airport[1], airport[2]);
       var marker = new google.maps.Marker({
             position: myLatLng,
             map: map,
            title: airport[0],
            zIndex: airport[3],
             html: airport[4],
      });




       google.maps.event.addListener(marker, 'click', function() {
               infowindow.setContent(this.html);//set the content
               infowindow.open(map,this);
       });
     }
   }

回答by Andrew Forbes

One way you can get seriously dynamic info into an infoWindow, assuming you have php or such like is to set content of infoWindow as an iframe with src that takes info from the position or ID of the marker in question. So in initialize function or wherever.

假设您有 php 或类似工具，您可以将真正的动态信息获取到 infoWindow 中的一种方法是将 infoWindow 的内容设置为带有 src 的 iframe，该 iframe 从相关标记的位置或 ID 获取信息。所以在初始化函数或任何地方。

var pos_info = new google.maps.InfoWindow({pixelOffset: new google.maps.Size(0, -5), maxWidth: 350, position: posit, ID: "pos_i"});

var pos_mark = new google.maps.Marker({map: map, position: posit, clickable: true, draggable: true, ID: "pos_m", icon: therm2});

pos_mark.addListener('mouseup', function () {
var lat = pos_mark.getPosition().lat();
lat = lat.toFixed(4)
var lng = pos_mark.getPosition().lng();
lng = lng.toFixed(4)
var contentString = "<iframe class='info' src='pos_info.php?lat="+lat+"&lng="+lng+"'></iframe>"
pos_info.setContent(contentString);
pos_info.open(map, pos_mark);
})