Карты Google: добавить кнопку слушателя для каждого полигона

Я работаю над веб-приложением. У меня есть карта 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);
    });
}

Задача

Полигоны все рисуются правильно. Однако проблема в том, что когда я пытаюсь щелкнуть по полигону, он всегда показывает последний индекс. это похоже на то, что есть только щелчок по последнему добавленному полигону. Я думаю, что когда я добавляю новый слушатель, он заменяет старый. Как я могу добавить прослушиватель для каждого добавленного полигона, чтобы предупредить правильный индекс?

Спасибо

2 14
javascript google-maps asp.net-mvc-4 polygon

2 ответа:

Это нормальное поведение. Есть два решения, которые я могу придумать:

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

Переместите блок кода внутрь цикла for.

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

Или

Вы добавляете это в for-loop, 

p.addListener('click', clickSelection);

И сделай это 

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