Попытка связать несколько 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 в его собственную функцию также решает проблему с несколькими инфопонами, отображающими один и тот же текст.