Javascript: цикл по массиву для создания слушателей, проблемы с вызовом по ссылке и значению?

Question

for (var i=0; i<layerCount; i++){
    for (var j=0; j<layerData[i].data.length; j++){
        var text = layerData[i].data[j].text;
        var latlng = new google.maps.LatLng(layerData[i].data[j].lat, layerData[i].data[j].lng);
        var marker = new google.maps.Marker({map: map, position: latlng});
        var infowindow = new google.maps.InfoWindow({content: text});
        google.maps.event.addListener(marker, 'click', function() {infowindow.open(map,marker);});
    }
}

Проблема в приведенном выше коде, скорее всего, заключается в строке, начинающейся с google.maps.event.addListener.Какой бы маркер я ни щелкнул, у меня открывается информационное окно для последнего элемента в поле данных layerdata[i].data[j].Похоже, что я звоню по ссылке, а не по значению, поэтому infowindow и marker для всех слушателей являются последними элементами в массивах.

Но как я могу решить эту проблему?большое спасибо!

Answer 1

Вы должны создать замыкание :

for (var i=0; i<layerCount; i++){
    for (var j=0; j<layerData[i].data.length; j++){
        var text = layerData[i].data[j].text;
        var latlng = new google.maps.LatLng(layerData[i].data[j].lat, layerData[i].data[j].lng);
        var marker = new google.maps.Marker({map: map, position: latlng});
        var infowindow = new google.maps.InfoWindow({content: text});

        bindOpenWindow(infowindow, map, marker);
    }
}

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

Посмотрите, поможет ли это;)

Answer 2

JavaScript не имеет понятия области блока, только функция и глобальная область.Вы можете использовать замыкание, чтобы обойти это:

for (var i = 0; i < layerCount; i++){
    for (var j = 0; j < layerData[i].data.length; j++){
        var text = layerData[i].data[j].text;
        var latlng = new google.maps.LatLng(layerData[i].data[j].lat, layerData[i].data[j].lng);
        var marker = new google.maps.Marker({map: map, position: latlng});
        var infowindow = new google.maps.InfoWindow({content: text});
        google.maps.event.addListener(marker, 'click', (function(infowindow, marker) {
            return function() {infowindow.open(map, marker);};
        })(infowindow, marker));
    }
}