Информационное окно с менеджером маркеров Google Maps V3 - PullRequest
Новая
       37

Информационное окно с менеджером маркеров Google Maps V3

1 голос
/ 26 сентября 2011

У меня есть много маркеров карты с одинаковыми широтными / длинными шнурами, поэтому, независимо от того, насколько далеко я увеличу масштаб, моя карта все еще показывает кластер маркеров и количество результатов.

Есть ли способ вызвать событие onclick или onhover, чтобы оно отображало информационное поле со всеми маркерами в этом кластере в списке? Затем, щелкнув ссылку в этом информационном окне, откроется это отдельное информационное окно маркера?

Я читал решения по изменению лат, длинных на небольшое количество, чтобы они не были в одном месте. Я думаю, что это очень грязно и не так уж хорошо, если в конечном итоге будет несколько маркеров 10+ в любом месте в одном месте. Я думаю, что пользователю было бы намного проще просто щелкнуть кластер и вызвать информационное окно со всеми этими маркерами со ссылками.

Или, если кто-то знает другой плагин, который делает то, что я ищу, я бы тоже мог с этим поработать. Я просто не нашел много информации об этом.

1 Ответ

1 голос
/ 26 сентября 2011

Там может быть плагин, чтобы делать то, что вы хотите, но также можно обойтись и без него. Я сделал что-то подобное в одном из моих проектов.

  1. Добавить прослушиватель событий для каждого маркера; щелчок открывает окно информации о списке маркеров
  2. Содержимое информационного окна списка маркеров содержит onclick атрибутов, которые откроют информационное окно маркера.

Мой код был спрятан в функции, но в основном это было так: 

//1) while creating marker, create click listener that opens the marker list
google.maps.event.addListener(marker, 'click', function() {
    markerWindow.close();
    markerList.open(map, marker);
});

//2) store the content required by the marker's info windows
var markers = [
    [marker1Reference, "The Stadium"],
    [maerker2Reference, "The Supermarket"]
];

//3) the function that is called each time a marker is chosen from the marker list
function openMarkerInfo(markerIndex) {
    markerList.close();
    markerWindow.setContent(markers[markerIndex][1]);
    markerWindow.open(map, markers[markerIndex][0]);
}

//4) info window for the marker list - the content includes JS onclick events that will open each marker info window
markerList = new google.maps.InfoWindow({
    content: "Choose:<br><br><div href='' class='markerLink' onclick='openMarkerInfo(0)'>The Stadium</div><br><div href='' class='markerLink' onclick='openMarkerInfo(1)'>My House</div>"
});
//5) the marker window that will get set each time a marker is clicked in the list
markerWindow = new google.maps.InfoWindow();

Надеюсь, это поможет!

...