Итератор Javascript не будет работать, но жестко закодированное число

Question

Я пытаюсь создать динамические маркеры, используя API карт Google, и у меня возникают проблемы при повторном использовании переменной tat.

Я опустил код для генерации маркеров и карты, потому что он, кажется, работает нормально. Это код для генерации информационного окна.

Этот код выдает ошибку 'this_marker_info [$ n]' [undefined] не является объектом

for(var $n = 0; $n < business.length; $n++){
   google.maps.event.addListener(this_marker[$n], 'click', function() {
       this_marker_info[$n].open(map, this_marker[$n]);
   });      
}

Этот код работает

for(var $n = 0; $n < business.length; $n++){
   google.maps.event.addListener(this_marker[$n], 'click', function() {
       this_marker_info[0].open(map, this_marker[0]);
   });      
}

Все, что я сделал, это поменял местами $ n с номером 0 во втором примере строки: «this_marker_info [$ n] .open (map, this_marker [$ n]);»

Любая помощь будет оценена

Answer 1

Это типичная проблема закрытия. Ко времени выполнения this_marker_info[$n].open(map, this_marker[$n]); вы закончили цикл, и значение $n равно business.length.

Решение состоит в том, чтобы написать закрытие:

for(var $n = 0; $n < business.length; $n++){
    (function ($the_actual_n) {
        google.maps.event.addListener(this_marker[$the_actual_n], 'click', function() {
            this_marker_info[$the_actual_n].open(map, this_marker[$the_actual_n]);
        });
    }($n)); // <-- call this 'anonymous' function with $n
}

Answer 2

Использование Array.forEach() - хороший способ исправить это:

business.forEach(function(item, $n) {
   google.maps.event.addListener(this_marker[$n], 'click', function() {
       this_marker_info[$n].open(map, this_marker[$n]);
   });      
}

Таким образом, содержащая функция никогда не увеличивает $n, поэтому она надежно сохранит свое первоначальное значение.

Чтобы использовать Array.forEach() в старых браузерах, см. .