谷歌地图信息窗口显示在错误的标记上

Question

我有一段 JavaScript 代码，其中我创建了标记并将信息窗口附加到它们上面，就像这样：

for (var i = 0; i < 8; i++) {
    var marker = new google.maps.Marker({
       map: map,
       position: new google.maps.LatLng(lat[i], lng[i]),
       icon: '/static/images/iconsets/gmap/iconb' + (i+1) + '.png',
    });
    var infowindow = new google.maps.InfoWindow({
        content: 'test string'
    });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
    });
}

但是当我点击其中一个标记时，信息窗口始终只显示在一个标记上。我做错了什么？

- PeanutButterJelly

Answer 1

你的问题有一个非常简单的解决方案，就是将循环中的代码放入函数中。你的问题在于覆盖了变量marker，因此当在点击事件中访问它时，会使用该变量的最新版本，也就是你添加的最后一个标记。

因此，将其放入函数中，该变量位于单独的命名空间中，因此不会被覆盖。换句话说，这应该可以工作：

for (var i = 0; i < 8; i++) {
    createMarker(i);
}

function createMarker(i) {
    var marker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(lat, lng),
        icon: '/static/images/iconsets/gmap/iconb' + (i+1) + '.png',
    });
    var infowindow = new google.maps.InfoWindow({
        content: 'test string'
    });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
    });
}

- Herman Schaaf

---

谢谢您的帖子！但是为什么每个新的“marker”对象都没有存储在第一个案例中呢？当您将代码放入循环中的单独函数中时，我感到困惑，不知道它为什么能够工作。 - Maximus S

你介意看一下这个例子吗？它使用了与你编写的相同代码，但是调用了一个API。信息窗口没有打开。http://jsfiddle.net/b20n4jbg/ @Herman Schaaf - adin

Answer 2

google.maps.event.addListener(Marker, 'click', function() {
    InfoWindow.open(map, this);
});

你应该使用this而不是marker，因为marker会保留上一个标记的值。

- André Luiz

Answer 3

作为一项7年前不可用的新选项： 所有现代浏览器（即支持ECMAScript 6的所有浏览器）都支持使用let语句定义的块级作用域变量。 let 在给定作用域内初始化变量，例如在循环内部，而var则在全局或函数级别上定义变量。在您的情况下，将var替换为let将确保每个标记都正确地初始化为新变量：

for (var i = 0; i < 8; i++) {
    let marker = new google.maps.Marker({
       map: map,
       position: new google.maps.LatLng(lat[i], lng[i]),
       icon: '/static/images/iconsets/gmap/iconb' + (i+1) + '.png',
    });
    let infowindow = new google.maps.InfoWindow({
        content: 'test string'
    });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
    });
}

- SaschaM78

Answer 4

for (var i = 0; i < 8; i++) {
    var marker = new google.maps.Marker({
       map: map,
       position: new google.maps.LatLng(lat[i], lng[i]),
       icon: '/static/images/iconsets/gmap/iconb' + (i+1) + '.png',
       content: 'test string'
    });
    google.maps.event.addListener(marker, 'click', function() {
        new google.maps.InfoWindow({
            content: this.content
        }).open(map, this);
    });
}

- Mr.Sing

---

可以给你的回答添加一些上下文吗？比如，它如何帮助提问者呢？ :-) - Jonathan

我一个小时前点了赞，但是测试其他内容时发现会多次打开信息窗口，所以实际上它并没有帮到我，很抱歉。 - Miguel Garrido

Answer 5

试试这个：

        // Create a marker for each place.
         marker = new google.maps.Marker({
             map: map,
             icon: icon,
             title: place.name,
             animation: google.maps.Animation.DROP,
             position: place.geometry.location
         });
         var infowindow = new google.maps.InfoWindow({
         content:'<div><strong>' + place.name + '</strong><br>' +
            'Place ID: ' + place.place_id + '<br>' +
            place.formatted_address + '</div>'
            });
        marker.addListener('click', function() {
        infowindow.open(map, this);
        });

谢谢

- Therichpost