谷歌地图 - 多个标记 - 1个信息窗口问题

Question

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

我已经阅读了几篇其他帖子，但它们似乎都没有帮助。

这是代码:

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

有人能看出我哪里做错了吗？

谢谢

- user441365

Answer 1

好的，

我找到了一个解决方案。我给标记添加了一个名为“info”的额外属性，然后在“addlistener”事件中引用它，并使用“infowindow.setContent(this.info)”来设置内容。

这是更新后的代码：

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

- user441365

---

这种方法的问题在于，如果 Google 向 Marker 添加 info 属性，则可能会出现故障。此外，这似乎是错误的，因为 info 真正属于 infoWindow 的属性，而不是 marker 的。 - puckhead

Answer 2

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

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

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

- puckhead

Answer 3

你尝试过在循环内部声明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);
    }

- bjornruysen

---

你可以尝试将 'infowindow.setContent(contentString);' 放在 addListener 之外吗？ - bjornruysen

"this" 里面是什么？infowindow.open(map, this); 你试过用 marker 替换它吗？只是猜测。 - clem

@stratton 'this' 包含标记。我尝试用 'marker' 替换它，但是无论你点击哪个标记，总会有一个信息窗口在同一个标记上打开。 - user441365

你可以尝试在addListener前面添加以下内容：marker.set('location', myLatlngMarker); - bjornruysen

这大概是我能想到的全部了... 也许你可以将代码与此网站上的代码进行比较，找出问题所在？http://www.aaronkjackson.com/2010/06/how-to-show-an-infowindow-for-multiple-markers-using-google-maps-v3/ - bjornruysen

Answer 4

我遇到了同样的问题。不过，我使用了这段代码，成功让标题显示出不同的效果：

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

- DJ Howarth

---

与上述方法相同，这种方法的问题在于如果Google将html属性添加到Marker中，则可能会出现错误。这似乎也是错误的，因为html实际上是infoWindow的属性，而不是标记的属性。 - puckhead

Answer 5

如果您有php或类似的程序，将信息窗口(infoWindow)的内容设置为带有src的iframe，并从所讨论的标记的位置或ID获取信息，就可以将严重动态的信息放入信息窗口中。因此，在initialize函数或其他任何地方。

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

- Andrew Forbes