Слушатели событий Google Карт не работают должным образом в цикле Javascript «для»

Question

Я пытаюсь настроить экземпляр карты Google, где некоторый контент динамически генерируется для набора точек.

Сейчас я использую цикл for для обхода любого числа широты изначения долготы и маркеры создания - это те точки на карте.

Я пытаюсь добавить информационные окна, которые соответствуют каждому из этих маркеров, и чтобы они появлялись при нажатии на маркеры.

Тем не менее, у меня есть небольшие проблемы.Похоже, мой цикл for, который создает практически все, работает без сбоев, кроме раздела eventListener:

function drawMap(points) {
    popUps = new Array();
    infoWindows = new Array();
    positions = new Array();

    contents = '<div id = "content">' +
        '<div id="siteNotice">' +
        '</div>' +
        '<p id="firstHeading" class="firstHeading">Position</h1>' +
        '</div>';

    infowindow = new google.maps.InfoWindow({
        content: contents
    });

    for( i = 0; i < points.length; i++ ){
        positions[i] = new google.maps.Marker({ position: 
        latlng[i], 
        map:map, 
        title:"Position"});

        popUps[i] = '<div id = "content">' +
            '<div id="siteNotice">' +
            '</div>' +
            '<p id="firstHeading" class="firstHeading">Position</h1>' +
            '</div>';

        infoWindows[i] = new google.maps.InfoWindow({
            content: popUps[i]
        });

    // everything up to this point works fine, I can reference it all manually
    // and get back the expected value.

        google.maps.event.addListener(positions[i], 'click', function(){
            infoWindows[i].open(map, positions[i]);                 
        });

    // if I change each instance of "i" to "0" here, I'll get a popup on the
    // expected marker containing content that I defined in this for loop. Same for
    //  "1" and "2." But "i" doesn't work.
    }
}

, где «map» - это экземпляр google.maps.Map, и каждый экземпляр всплывающих окон будет отличатьсяв конечном продукте.

Я вызываю эту функцию при загрузке страницы, которая добавляет позиции и маркеры на мою карту:

drawMap([[13.283 , 162.232], [18.232 , 112.223], [17.233, 80.293]]);

Кто-нибудь знает, почему я не могу создать EventListener динамически?Любая помощь будет принята с благодарностью!

Заранее спасибо.:)

Редактировать:

Оказывается, требования здесь только, чтобы div всплывала при загрузке страницы.Мне даже не понадобился прослушиватель событий ...

Однако оба ответа были хорошими и помогли мне понять, как заставить работать оригинальный код, так что спасибо.: D

Answer 1

Создайте функцию для добавления прослушивателя карт после объявления infowindow.Функция создаст замыкание и зафиксирует переданное в него значение i.

...
infowindow = new google.maps.InfoWindow({
        content: contents
    });

var addListener = function (i) {

google.maps.event.addListener(positions[i], 'click', function(){
        infoWindows[i].open(map, positions[i]);                 
    });
   ...

}

Затем вызовите его в цикле for:

addListener(i);

Answer 2

Внутренняя функция закрывается по переменной i.В конце цикла for все i s будут point.length.Это очень распространенный JavaScript-код:

Закрытие JavaScript внутри циклов - простой практический пример