Pull to refresh

Google Maps Javascript API V3 и управление маркерами

Reading time 3 min
Views 29K
Дело было глубокой осенью. Мне поручили разработку раздела, основной задачей которого является указание местоположения объектов фильтрации и поиска на карте. Что стало заметно сразу же — даже при отображении 10 объектов на карте, можно уменьшить зум до такого, при котором они просто сливаются. Если их будет 100 — появятся жутковатые наложения и тени. Не комильфо!

Поиск решения


Решение очевидное, маркеры нужно группировать. В процессе поиска наткнулся на хабростатью, в которой рассмотрены различные способы группировки большого количества маркеров на карте. Нас вполне устраивали «костыли 1-2», то есть группировка маркеров на клиентской стороне, однако… если бы они подошли, не писал бы я сейчас статью ;)



Той же глубокой осенью команда разработчиков Google интенсивно работала над Google Maps JavaScript API V3, и в работе я использовал его. Штатного средства для управления маркерами там не было предусмотрено (о чём было предупреждение в документации к v2), а рекомендуемое «open sourced MarkerManager», конечно же, не адаптирован к третьей версии api.

Вариантов решений два — либо использовать стабильное api v2 (что означает не только откат проделанной работы, но ещё и неудобство генерацию ключей для каждого домена), либо написать свой markermanager, с блэкджеком и путанами.

Подробности реализации


Те, кому интересно посмотреть, что же получилось и как этим пользоваться, могут смело пропускать этот параграф и переходить к примерам. Ничего шокирующе-нового не будет.

Группировка осуществляется по принципу «разбили карту на ячейки; если на видимой области m*n в масштабе карты расположено k маркеров, скрываем эти маркеры, рисуем групповой маркер с указанием количества покрываемых соучастников». В общем-то всё. Координаты расположения группового маркера — геометрический центр ячейки.

Казалось бы — всё, но это не так. Перерисовка, когда же её делать? Самый точный и убийственный вариант — при каждом перемещении по карте. Почему этот вариант убийственен, думаю, объяснять не нужно, но как же тогда быть? Покумекав, я решил, что перерисовывать сетку-маркеры лучше всего «в пределах разумного». Вы наверняка часто слышали это выражение, но, быть может, не видели столь буквального восприятия. «Предел разумного» — прямоугольная область карты, включающая в себя видимую область, и «чуть-чуть за ней». Насколько за ней — на 1.5 карты по каждому измерению, коэффициент изменяется.

Такое решение продиктовано тем соображением, что пользователь, приближаясь к определённой точке, идёт к своей цели, и держать на карте маркеры за пределами видимой области необходимо лишь настолько, чтобы он в процессе брождения не был внезапно ошарашен пропажей всех полимеров.

Как использовать



var markerManagerOptions = {
icon: {
src: "http://maps.google.com/mapfiles/ms/micons/partly_cloudy.png",
shadow: "http://maps.google.com/mapfiles/ms/micons/partly_cloudy.shadow.png"
},
cell: {
width: 48,
height: 96
},
threshold: 12,
sanity: 1.5
};

var markerManager = new GmapsMarkerManager(map, markerManagerOptions);


Для начала о том, что настраивается. В принципе всё довольно прозрачно: параметры иконки для группового маркера, размеры ячейки видимой области, по которым строится сетка, threshold — уровень приближения, при котором снимается группировка (все маркеры отображаются как есть), и «коэффициент разумности», действие которого описано выше. Все параметры являются необязательными, однако, иконку группового маркера лучше всё же настроить;)

Дальше — проще.
var marker = new google.maps.Marker({position: new google.maps.LatLng(-25.363882, 131.044922)}));
markerManager.addMarker(marker);


Вот и всё. Удалять маркеры мне не требовалось, но чтобы такая возможность была, добавил метод удаления по индексу в массиве
markerManager.removeMarkerByNumber(0);

Заключение


До и после
image

Демонстрационный пример тут
Исходный код тут.

Буду рад если эта статья кому-нибудь поможет в решении его задач, жду комментариев.

Заключение Заключение


Статья подготовлена не мной, а хорошим человеком специально для хабра в смиренной надежде на инвайт.
Tags:
Hubs:
+45
Comments 26
Comments Comments 26

Articles