Как установить значение массива в качестве параметра функции при итерации

Question

Я использую API Google Maps для отображения маркеров на карте.

Каждый маркер указывает на магазин на карте.

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

Я использую текстовый ввод, чтобы позволить пользователю ввести город, а с помощью jquery я обрабатываю событие click на соседней кнопке отправки.Затем я отправляю запрос на сайт php, возвращаю следующий объект:

d: Object
error: false
lat: "52.3744440000"
lng: "9.7386110000"
shop: Array[2]
0: Object
address: "Addressstreet 12"
lat: "52.3761209000"
lng: "9.7387242000"
name: "Shop 1"
tel: "1234"
__proto__: Object
1: Object
length: 2
etc.

Теперь я использую значения lat и lng, которые являются координатами города, чтобы центрировать карту.Затем я отправляю массив shop в метод paintShops (shops):

function paintShops(shops){
for (var i = 0; i < shops.length; i++){
kl = shops[i];
var ka = parseFloat(kl.lat);
var kb = parseFloat(kl.lng);
tel = kl.tel;
address = kl.address;
var son = new google.maps.Marker({
position: new google.maps.LatLng(ka, kb),
map: map,
title: kl.name,
clickable: true
});
google.maps.event.addListener(son, 'click', function(son, tel, address) {
displayShopTooltip(son, tel, address);
}

Моя проблема в последней строке приведенного выше фрагмента: когда я нажимаю на метку, параметры тел и адрес displayShopTooltipне определены.Я хотел бы знать, что нужно сделать, чтобы не иметь этой проблемы, или альтернативно другой подход.Заранее спасибо.

Answer 1

Вы определили tel и address как параметры вашего обработчика кликов, что не имеет смысла. Вы, вероятно, хотели получить доступ к своим глобальным переменным:

google.maps.event.addListener(son, 'click', function(son) {
    displayShopTooltip(son, tel, address);
}

Тем не менее, таким образом, может быть только один магазин (есть только один глобальный tel и address). Вместо этого используйте локальные переменные и замыкание:

function paintShops(shops) {
    for (var i = 0; i < shops.length; i++) {

        (function() {            
            var kl = shops[i];
            var ka = parseFloat(kl.lat);
            var kb = parseFloat(kl.lng);            
            var tel = kl.tel;
            var address = kl.address;

            var son = new google.maps.Marker({
                position: new google.maps.LatLng(ka, kb),
                map: map,
                title: kl.name,
                clickable: true
            });

            google.maps.event.addListener(son, 'click', function(son) {
                displayShopTooltip(son, tel, address);
            }
        })();
    }
}

Answer 2

Проблема, с которой вы столкнулись, заключается в том, что, объявляя tel и address в слушателе, вы устанавливаете их как неопределенные в обратном вызове обработчика событий (так как нет механизма для передачи произвольных параметров).Решение состоит в том, чтобы убедиться, что обработчик находится в той же области действия, что и (например, внутри функции с) маркер.Я бы порекомендовал прочитать о области видимости в javascript, поскольку были допущены одна или две другие ошибки (например, неправильно объявлены переменные) - область видимости в javascript обрабатывается очень по-разному в других языках программирования и требует некоторого привыкания.*

function paintShops(shops){
  for (var i = 0; i < shops.length; i++){
    makeMarker(shops[i]);
  }

  function makeMarker(kl) {
    var ka = parseFloat(kl.lat);
    var kb = parseFloat(kl.lng);
    var tel = kl.tel;
    var address = kl.address;
    var son = new google.maps.Marker({
       position: new google.maps.LatLng(ka, kb),
       map: map,
       title: kl.name,
       clickable: true
    });
     google.maps.event.addListener(son, 'click', function(son) {
       displayShopTooltip(son, tel, address);
     }
   }

Answer 3

Функция $ .each () отличается от функции $ (селектор) .each (), которая используется исключительно для итерации объекта jQuery.Функция $ .each () может использоваться для перебора любой коллекции, будь то карта (объект JavaScript) или массив.В случае массива обратному вызову каждый раз передается индекс массива и соответствующее значение массива.(К значению также можно получить доступ через ключевое слово this, но Javascript всегда будет переносить это значение как объект, даже если это простая строка или числовое значение.) Метод возвращает свой первый аргумент, объект, который был повторен.