Элемент массива Javascript не определен в API Карт Google

Question

Я пытаюсь добавить на карту 3 маркера, и при нажатии на маркеры будет отображаться информационное окно. Но каждый элемент массива внутри google.maps.event.addListener становится неопределенным.

В чем проблема?

<div id="map-canvas2" style="width:100%;height:500px"></div> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
<script> 
var num; 
var marker; 
var infoWindow; 
var infoText; 
var lat; 
var lng; 
var map; 

function initialize() { 
    num = 3; 
    marker = []; 
    infoWindow = []; 
    infoText = []; 
    lat = []; 
    lng = []; 

    infoText[0] = "test1"; 
    lat[0] = 22.420845; 
    lng[0] = 114.208705; 
    infoText[1] = "test2"; 
    lat[1] = 22.416026; 
    lng[1] = 114.209321; 
    infoText[2] = "test3"; 
    lat[2] = 22.420841; 
    lng[2] = 114.205188; 
    for (var i = 0; i < num; i++) { 
    marker[i]=new google.maps.Marker({ 
     position:new google.maps.LatLng(lat[i], lng[i]), 
    }); 
    infoWindow[i] = new google.maps.InfoWindow({ 
     content:"<div>"+infoText[i]+"</div>" 
    }); 
    } 
    var mapOptions = { 
    zoom: 17, 
    center: new google.maps.LatLng(22.420458,114.207482) 
    }; 
    map = new google.maps.Map(document.getElementById('map-canvas2'), mapOptions); 

    for (var i = 0; i < num; i++) { 
    marker[i].setMap(map); 
    google.maps.event.addListener(marker[i], 'click', function() { 
     new google.maps.InfoWindow({ 
    content:"<div>"+infoText[i]+"</div>" 
     }).open(map,marker[i]); 
    }); 
    } 
} 

google.maps.event.addDomListener(window, 'load', initialize); 
</script> 

Answer 1

Проблема: Каждый слушатель события ссылается на тот же переменную i который получает приращение на каждый проход для цикла , Таким образом, после завершения цикла значение i равно 3, но ни один из ваших массивов не имеет индекса 3, поэтому вы получаете undefined. Поскольку каждый обработчик событий ссылается на одну и ту же переменную i, все они ссылаются на те же неопределенные значения массива.

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

for (var i = 0; i < num; i++) { 
    marker[i].setMap(map); 
    google.maps.event.addListener(marker[i], 'click', (function(index) { 
     return function() { 
      new google.maps.InfoWindow({ 
       content: "<div>"+infoText[index]+"</div>" 
      }).open(map, marker[index]); 
     } 
    })(i)); 
} 

То, что мы делаем, создавая Immediately-Invoked Function Expression "IIFE". IIFE имеет параметр index, который установлен в значение i. Поскольку переменные имеют область действия, индекс принадлежит только этой функции. Внутри IIFE мы возвращаем функцию, которая будет выполнять фактическую работу при срабатывании события, но будет ссылаться на index не i.

Answer 2

Не отправлять индексированные параметры анонимной функции:

for (var i = 0; i < num; i++) { 
var mrk = marker[i]; 
var iwContent = infoText[i]; 
mrk.setMap(map); 
google.maps.event.addListener(mrk, 'click', function() { 
    new google.maps.InfoWindow({ 
content:"<div>"+iwContent+"</div>" 
    }).open(map,mrk); 
}); 
}