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

В моем проекте используется канал 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);
                    }               
                });

Маркеры

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

Ответ 1

Это очень распространенный вопрос в теге google-maps и простая ошибка:).

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

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

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).

Ответ 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);
                });

Где "маркер" заменяется на "this" в вызове add listener. Таким образом, вы можете поместить код addListerner в том же месте, в котором вы создаете маркер, и не создавать новую функцию.

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

Посмотрите полное решение и демо: D

Ответ 3

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