谷歌地图：为每个多边形添加点击监听器

Question

我正在开发一个网络应用程序。 我有一个Google地图，在其中从一个数组中添加多边形。我循环遍历该数组并将多边形添加到地图上。我还需要为多边形单击添加事件侦听器并警报多边形的位置。

这是我正在做的事情。

map = new google.maps.Map(document.getElementById('map_canvas'),
    mapOptions);
//Loop on the polygonArray
for (var i = 0; i < polygonArray.length; i++) {
    //Add the polygon
    var p = new google.maps.Polygon({
        paths: polygonArray[i],
        strokeWeight: 0,
        fillColor: '#FF0000',
        fillOpacity: 0.6,
        indexID: i
    });
    p.setMap(map);

    //Add the click listener
    google.maps.event.addListener(p, 'click', function (event) {
        //alert the index of the polygon
        alert(p.indexID);
    });
}

问题

多边形都能正确地绘制。然而问题在于，当我尝试点击一个多边形时，它总是显示最后一个索引。就像只点击了添加的最后一个多边形。我认为当我添加新的监听器时，它会覆盖旧的监听器。如何为每个添加的多边形添加一个监听器，以便警报正确的索引？

谢谢

- Y2theZ

---

可能是重复的问题：在Google Maps V3中为每个多边形打开InfoWindow - geocodezip

这个问题的本质是所有 function(event) 闭包以及循环块都共享同一个 p。因此，当循环执行时，p 绑定到最后创建的多边形。我会使用 polygonArray.forEach 来分离变量。 - Ross Rogers

使用let而不是var。 - Amir Sasson

Answer 1

这是正常的行为。 我能想到两个解决方案：

1）我相信你可以从上下文中找回多边形（我没有测试过）：

google.maps.event.addListener(polygon, 'click', function (event) {
  alert(this.indexID);
});  

2) 您还可以使用一些闭包：

var addListenersOnPolygon = function(polygon) {
  google.maps.event.addListener(polygon, 'click', function (event) {
    alert(polygon.indexID);
  });  
}

map = new google.maps.Map(document.getElementById('map_canvas'),
    mapOptions);
//Loop on the polygonArray
for (var i = 0; i < polygonArray.length; i++) {
    //Add the polygon
    var p = new google.maps.Polygon({
        paths: polygonArray[i],
        strokeWeight: 0,
        fillColor: '#FF0000',
        fillOpacity: 0.6,
        indexID: i
    });
    p.setMap(map);
    addListenersOnPolygon(p);
}

- SuperSkunk

Answer 2

将代码块移动到for循环内部。

//Add the click listener
    google.maps.event.addListener(p, 'click', function (event) {
        //alert the index of the polygon
        alert(p.indexID);
    });

您可以将此代码添加到for循环中：

OR

p.addListener('click', clickSelection);

并执行此操作

function clickSelection(){
alert("Clicked");
}

- Abhi