API Карт Google - проблема с массивами и InfoWindows

Извините, если это тривиально, но я новичок в JS и был в этой проблеме в течение нескольких часов безрезультатно.

function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
    zoom: 12,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

var markersArray = [];
var infowindowArray = [];

function addMarker(location) {
    marker = new google.maps.Marker({
    position: location,
    map: map
    });
    markersArray.push(marker);
}

function addInfowindow(string) {
    infowindow = new google.maps.InfoWindow({content: string});
    infowindowArray.push(infowindow);
}

function findvenues(latitudelongitude) {
$.get("venuefinder.php", { latlong:latitudelongitude.Ka+","+latitudelongitude.La }, function(data){
    var myObject = eval('(' + data + ')');
    for(x in myObject.response.venues){
        var latlonglocation = new google.maps.LatLng(myObject.response.venues[x].location.lat,myObject.response.venues[x].location.lng);
        addMarker(latlonglocation);
        addInfowindow(myObject.response.venues[x].name);
        google.maps.event.addListener(markersArray[x], 'click', function() {infowindowArray[x].open(map,markersArray[x]);});
        console.log(markersArray[x],infowindowArray[x]);
    }
});

При вызове findvenues необходимо добавить события с нажатием на инфунд. Когда я нажимаю значки, всегда открывается тот же самый инфоиндумент последнего элемента в массиве infowindows.

Однако, если я вручную введю следующий код, он работает:

google.maps.event.addListener(markersArray[0], 'click', function() {infowindowArray[0].open(map,markersArray[0]);});
google.maps.event.addListener(markersArray[1], 'click', function() {infowindowArray[1].open(map,markersArray[1]);});

Мне нужно, чтобы это было динамично, но... Что я делаю неправильно? Дайте мне знать, если вопрос неясен, и я постараюсь прояснить его.

Ответ 1

Измените этот вызов на "addListener" в цикле:

      google.maps.event.addListener(markersArray[x], 'click', function() {infowindowArray[x].open(map,markersArray[x]);});

      google.maps.event.addListener(markersArray[x], 'click', (function(x) {
        return function() {
          infowindowArray[x].open(map,markersArray[x]);
        }
      })(x));

Введя еще одну такую функцию, вы создаете совершенно новую область. Это "замораживает" значение "x" , которое вы передаете, чтобы возвращаемая функция (фактическая функция обработчика, которая будет передана API Google, другими словами) имеет доступ к ее собственному "x" , отдельно от все остальные обработчики, установленные в этом цикле.

Если вы этого не сделаете, все обработчики разделяют то же самое маленькое "x" , и это явно не будет.

edit — есть и другие способы сделать это. Вы можете написать эту дополнительную функцию как совершенно отдельную вещь:

function makeMapListener(window, map, markers) {
  return function() { window.open(map, markers); };
}

Тогда оператор в вашем цикле будет выглядеть так:

google.maps.event.addListener(markersArray[x], 'click', makeMapListener(inforwindowArray[x], map, markersArray[x]));

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