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

【问题标题】：Google map: Add click listener to each polygon谷歌地图：为每个多边形添加点击监听器
【发布时间】：2013-02-18 23:28:49
【问题描述】：

我正在开发一个网络应用程序。我有一个谷歌地图，我从一个数组中添加多边形。我遍历该数组并将多边形添加到地图中。我还需要为多边形单击添加一个事件监听器并提醒多边形的位置

这就是我正在做的事情

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

问题

多边形都绘制正确。但是问题是，当我尝试单击多边形时，它总是显示最后一个索引。就像它只是单击添加的最后一个多边形。我认为当我添加一个新的监听器时，它会覆盖旧的监听器。如何为添加的每个多边形添加一个侦听器以提醒正确的索引？

谢谢

【问题讨论】：

Open InfoWindow for each polygon google maps V3 的可能重复项
这个问题的本质是同一个p被所有function(event)闭包以及循环块共享。因此，p 在循环执行时绑定到最后创建的多边形。我会使用polygonArray.forEach 来分隔变量。
使用let 而不是var

标签： javascript google-maps asp.net-mvc-4 polygon

【解决方案1】：

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

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

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

2) 你也可以使用一些closures:

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

【讨论】：

【解决方案2】：

在for循环内移动代码块。

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

或

你把这个添加到for循环中，

p.addListener('click', clickSelection);

然后这样做

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

【讨论】：