在循环中声明谷歌地图标记

Question

我对谷歌地图标记上的事件监听器有一个奇怪的问题。基本上我想在一个循环中声明一堆标记，并让每个标记都有一个关联的信息窗口。相关代码为：

var markers=[];
var contents = [];
var infowindows = [];


for (i = 0; i < 10; i++) { 

    markers[i] = new google.maps.Marker({
      position: new google.maps.LatLng(40+Math.random()*5, 4+Math.random()*5),
      map: map,
      title: 'samplemarker'
    });

    contents[i] = '<div class="popup_container">' +
    '</div>';


    infowindows[i] = new google.maps.InfoWindow({
    content: contents[i],
    maxWidth: 300
    });

    google.maps.event.addListener(markers[i], 'click', function() {
            infowindows[i].open(map,markers[i]);
            map.panTo(markers[i].getPosition());
    });  
}

标记是正确创建的，信息窗口也是如此，因为如果我手动执行infowindows[i].open(map,markers[i]);，它们会正确打开。但是监听器不起作用。

更奇怪的是：我在 for 循环之外声明了另一个标记“marker_1”，方式完全相同。如果我写：

google.maps.event.addListener(marker_1, 'click', function() {
        infowindows[0].open(map,markers[0]);
        map.panTo(markers[0].getPosition());
});

信息窗口 0 被打开，当点击 marker_1 时地图被平移到标记 0。但是，当在完全相同的位置写入时，除了将 marker_1 替换为 marker[0] 之外的相同行，单击标记 0 完全没有效果。

感谢您的帮助，如果这是愚蠢的事情，我们深表歉意！

Answer 1

在您的 onclick 处理程序中，您还没有 i 值，在您的情况下，它总是在循环结束后取最后一个值 i，即 10，而标记 [10] 没有t 存在，因为您只有 10 个标记。

为了让它工作，你可以例如向数组中的标记添加其他属性，这将存储标记索引并在您的 onlick 处理程序中使用它

var markers=[];
var contents = [];
var infowindows = [];


for (i = 0; i < 10; i++) { 

    markers[i] = new google.maps.Marker({
        position: new google.maps.LatLng(40+Math.random()*5, 4+Math.random()*5),
        map: map,
        title: 'samplemarker'
    });

    markers[i].index = i; //add index property
    contents[i] = '<div class="popup_container"></div>';


    infowindows[i] = new google.maps.InfoWindow({
        content: contents[i],
        maxWidth: 300
    });

    google.maps.event.addListener(markers[i], 'click', function() {
        console.log(this.index); // this will give correct index
        console.log(i); //this will always give 10 for you
        infowindows[this.index].open(map,markers[this.index]);
        map.panTo(markers[this.index].getPosition());
    });  
}

see corrected example