Вопрос по google-maps, polygon, asp.net-mvc-4, javascript – Карта Google: добавьте прослушиватель кликов к каждому многоугольнику

15

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

проблема

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

Спасибо

использованиеlet скорее, чемvar Amir Sasson
возможный дубликатОткройте InfoWindow для каждого полигона Google Maps V3 geocodezip
Суть этого вопроса в том, чтоp является общим для всехfunction(event) укупорочныеа также блок цикла , Таким образом,p привязан к последнему созданному многоугольнику при выполнении цикла. Я'буду использоватьpolygonArray.forEach отделить переменные. Ross Rogers

Ваш Ответ

2   ответа
0

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

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

ИЛИ ЖЕ

Вы добавляете это в цикл,

p.addListener('click', clickSelection);

и сделай это

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

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

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

Похожие вопросы