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

【问题标题】：Google maps infowindow showing on wrong marker谷歌地图信息窗口显示在错误的标记上
【发布时间】：2011-08-09 20:25:32
【问题描述】：

我有一段 javascript 代码，我在其中创建标记并将 InfoWindows 附加到它们，如下所示：

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

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

【问题讨论】：

标签： javascript jquery google-maps google-maps-markers

【解决方案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);
    });
}

【讨论】：

感谢您的帖子！但是为什么每个新的marker 对象没有存储在第一种情况下？我很困惑为什么当你把循环中的代码放到一个单独的函数中时它会起作用。
你介意看看这个例子吗？它使用与您编写的代码相同的代码，但从 API 调用。信息窗口未打开。 jsfiddle.net/b20n4jbg@Herman Schaaf

【解决方案2】：

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

你应该使用 this 而不是 marker 因为标记将保存最后放置的标记的值。

【讨论】：

谢谢你，你救了我的命 :)

【解决方案3】：

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

【讨论】：

请在您的答案中添加一些上下文，即它如何帮助提问者？ :-)
我在 1 小时前对此进行了投票，但使用其他内容进行测试时会多次打开一个信息窗口，所以它对我没有帮助，抱歉。

【解决方案4】：

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

【讨论】：

【解决方案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);
        });

谢谢

【讨论】：