Переменные переопределяются в цикл for

Question

Я пытаюсь добавить маркеры на карты Google, используя V3. У меня есть свои места в объекте JSON (мест):

var num_places = places.length;
for(var i = 0; i < num_places; i++)
{
    place_lat_lng = new google.maps.LatLng(places[i].lat, places[i].lng);
    var infowindow = new google.maps.InfoWindow({
        content: '<h2>' + places[i].name + '</h2><p>' + places[i].body + '</p>'
    });
    var marker = new google.maps.Marker({
        position: place_lat_lng,
        map: mymap,
        title: places[i].name,
        zIndex: i
    });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(mymap, marker);
    });
}

Код вставляет маркеры, но когда я нажимаю на любой из них, информационное окно показывает (и перемещает карту) всегда до последнего маркера в списке.

Я пытался использовать массив для окна информации:

var infoWindow = new Array();
for(var i = 0; i < num_places; i++)
{
    [...]
    var infowindow[i] = new google.maps.InfoWindow({
        content: '<h2>' + places[i].name + '</h2><p>' + places[i].body + '</p>'
    });
    [...]
    google.maps.event.addListener(marker, 'click', function() {
        infowindow[i].open(mymap, marker);
    });
}

Но ничего не меняется.

Где я ошибаюсь?

Answer 1

В JavaScript только функции создают новую область видимости / закрытие. Поэтому у вас есть только одна переменная infowindow, которая записывается во внутреннюю функцию, но в конце будет указывать на последнее окно. Используйте функцию автоматического вызова для установки нового замыкания:

for (var i = 0; ...) {
    (function() {
        var infowindow = ...;
    })();
}

Обратите внимание, что значение i по-прежнему не будет записываться отдельно. В настоящее время вам, похоже, это не нужно, но если вы это сделаете, передайте его функции, чтобы создать ее локальную версию внутри функции:

(function(i) { // this is the new local i with the value passed in from the outside
    // ...accessible here
})(i); // this is the outer i

Answer 2

Изменить это:

google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(mymap, marker);
    });

до:

google.maps.event.addListener(marker, 'click', function(infowindow) {
        function() {
            infowindow.open(mymap, marker);
        });
    }(infowindow);

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