Попытка привязки нескольких InfoWindows к нескольким маркерам на карте Google и сбой

Question

Мой проект использует JSON-канал для сбора информации о землетрясениях в пределах определенной широты и долготы, по существу создавая прямоугольник. Я беру эту информацию и превращаю все результаты в маркеры на карте Google. Мне нужно, чтобы каждый маркер также отображал некоторую дополнительную информацию, поэтому я пытаюсь использовать встроенные объекты InfoWindow, чтобы при нажатии на маркер открывалась подсказка с некоторой информацией, связанной с этим маркером. Однако я обнаружил, что независимо от того, на какой маркер я нажимаю, одно и то же информационное окно всегда появляется над одним и тем же маркером этой группы, и я считаю, что это всегда последнее информационное окно, созданное в моем цикле. Вот код.

$.getJSON(url, function(json) {
                    for(var i = 0; i < json.earthquakes.length; i++)
                    {
                        var pos = new google.maps.LatLng(json.earthquakes[i].lat, json.earthquakes[i].lng);
                        var info = json.earthquakes[i].lat + ", " + json.earthquakes[i].lng;
                        var marker = new google.maps.Marker({
                            map: map, 
                            position: pos,
                            title: json.earthquakes[i].eqid
                        })
                        var tooltip = new google.maps.InfoWindow({
                            content: info
                        })
                        google.maps.event.addListener(marker, 'click', function() {
                            tooltip.open(map, marker);
                        });
                        markers.push(marker);
                        tooltips.push(tooltip);
                    }               
                });

markers - это массив для всех объектов маркеров на карте, а всплывающие подсказки - это еще один массив для хранения объектов infowindows. Они глобальные.

Answer 1

Это очень распространенный вопрос в теге google-maps и простая ошибка, которую можно сделать:).

Что происходит, так это то, что ваше событие click вызывается асинхронно, и оно получает текущее значение в переменной маркера в обратном вызове getJSON (последнем в списке).

Вам нужно обернуть ваш вызов addListener в функцию, чтобы создать замыкание вокруг переменной маркера, которая используется в обратном вызове click:

function listenMarker (marker)
{
    // so marker is associated with the closure created for the listenMarker function call
    google.maps.event.addListener(marker, 'click', function() {
                        tooltip.open(map, marker);
                    });
}

Затем вызовите listenMarker из вашего основного обратного вызова getJSON (где вы сейчас вызываете addListener).

Answer 2

ВЫ также можете сделать это:

// so marker is associated with the closure created for the listenMarker function call
google.maps.event.addListener(marker, 'click', function() {
                    tooltip.open(map, this);
                });

Где «marker» - заменить на «this» в вызове add listener. Таким образом, вы можете разместить код addListerner в той же точке, в которой вы создали маркер, и вам не нужно создавать новую функцию.

http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple-markers-multiple-infowindows/

Ознакомьтесь с полным решением и демонстрацией: D

Answer 3

Помещение вызова addListener в его собственную функцию также решает проблему, когда все информационные окна отображают один и тот же текст.