Сломанный цикл JS с Google Maps

Question

Мой код приведен ниже, и у меня была проблема с почти таким же кодом, и она была исправлена ​​здесь, в StackOverflow, но, опять же, он не работает Я не изменил рабочий код, но обернул его в цикл for...in, который вы увидите ниже. Проблема в том, что независимо от того, на каком маркере я щелкаю, он всегда запускает последний маркер / информационное окно, которое было помещено.

$(function(){
    var latlng = new google.maps.LatLng(45.522015,-122.683811);
    var settings = {
        zoom: 10,
        center: latlng,
        disableDefaultUI:true,
        mapTypeId: google.maps.MapTypeId.SATELLITE
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
    $.getJSON('api',function(json){
        for (var property in json) {
            if (json.hasOwnProperty(property)) {
                var json_data = json[property];
                var the_marker = new google.maps.Marker({
                    title:json_data.item.headline,
                    map:map,
                    clickable:true,
                    position:new google.maps.LatLng(
                        parseFloat(json_data.item.geoarray[0].latitude),
                        parseFloat(json_data.item.geoarray[0].longitude)
                    )
                });
                var infowindow = new google.maps.InfoWindow({
                    content: '<div><h1>'+json_data.item.headline+'</h1><p>'+json_data.item.full_content+'</p></div>'
                });
                new google.maps.event.addListener(the_marker, 'click', function() {
                    infowindow.open(map,the_marker);
                });
            }
        }
    });
});

Спасибо за то, кто это выяснит!

Answer 1

Что происходит, когда вы создаете каждое из своих обработчиков событий (функций):

new google.maps.event.addListener(the_marker, 'click', function() {
    infowindow.open(map,the_marker);
});

... каждый из них получает постоянную ссылку на переменную the_marker, , а не ее значение в момент создания замыкания. Поэтому все копии этой функции замыкания используют одно и то же значение (последнее значение, назначенное ему в цикле). Замыкания не сложны ( больше здесь ), но давайте просто скажем, что вы не первый человек, который совершил эту ошибку. :-) Это очень легко сделать.

Итак, вы хотите захватить значение из the_marker на этой итерации цикла, что легко сделать:

new google.maps.event.addListener(
    the_marker,
    'click',
    buildHandler(map, the_marker));

function buildHandler(map, marker) {
    return function() {
        infowindow.open(map, marker);
    };
}

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

Этот ответ на другой вопрос о SO может помочь вам визуализировать, как замыкания получают доступ к переменным.