Как добавить несколько адресов на яндекс карте на сайте — кластеризация



Как добавить несколько адресов на яндекс карте на сайте - кластеризация

В предыдущей статье я описал способ создания яндекс карты на сайте с помощью api. Сегодня другая задача - поставить несколько меток на одну карту с индивидуальным наполнением информации о метках. Это полезно, когда фирма имеет несколько филиалов и не хочется под каждый отдельный филиал создавать отдельную метку.

Подключаем скрипт api карт яндекса

Для начала, как и в прошлой статье, подключаем скрипт api карт яндекса в хедере, там это подробно описано.

<script src="//api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>

Создаем контейнер карты

Далее вставляем в любом месте страницы, где нужно отобразить карту следующий код:

<div id="map"></div>

Вставляем готовый код с кластеризацией

Для примера я указал код для 3 разных точек

<script type="text/javascript">
ymaps.ready(function () {
var myMap = new ymaps.Map('map', {
center: [55.751574, 37.573856],
zoom: 8,
behaviors: ['default', 'scrollZoom']
}),

clusterer = new ymaps.Clusterer({
preset: 'islands#invertedDarkBlueClusterIcons',
groupByCoordinates: false,
clusterDisableClickZoom: true,
clusterHideIconOnBalloonOpen: false,
geoObjectHideIconOnBalloonOpen: false
}),

getPointData = [
{balloonContentBody: "<div class='ballon-point'>Адрес: Московская обл., г. Троицк, Академическая пл., д. 4<br> Ближайшее метро: м. Бунинская аллея<br>08:00 — 23:00 без выходных", clusterCaption: "<br>08:00 — 23:00 без выходных"},
{balloonContentBody: "<div class='ballon-point'>Адрес: Московская обл., г. Наро-Фоминск, ул. Московская, 26а<br> Ближайшее метро: Нет<br>08:00 — 23:00 без выходных", clusterCaption: "<br>08:00 — 23:00 без выходных"},
{balloonContentBody: "<div class='ballon-point'>Адрес: г. Москва, ул. Южнобутовская, д. 2<br> Ближайшее метро: м. Бульвар Адмирала Ушакова<br>8:00 — 23:00 без выходных", clusterCaption: "<br>8:00 — 23:00 без выходных"},
],

getPointOptions = function () {
return {
preset: 'islands#redDotIcon'
};
},

points = [
[55.485654,37.308209],[55.377407,36.759633],[55.545278,37.544288],],
geoObjects = [];

for(var i = 0, len = points.length; i < len; i++) {
geoObjects[i] = new ymaps.Placemark(points[i], getPointData[i], getPointOptions());
}

clusterer.options.set({
gridSize: 80,
clusterDisableClickZoom: true
});

clusterer.add(geoObjects);
myMap.geoObjects.add(clusterer);

myMap.setBounds(clusterer.getBounds(), {
checkZoomRange: true
});
myMap.behaviors.disable('scrollZoom');
});
</script>

Разберем важные параметры нашей карты

center: - Указываем координаты центра карты
zoom: - масштаб приближения карты
getPointData = - создаем наполнения блоков меток карты, которые появляются по клику
clusterCaption: - Краткое описание метки, когда они собраны в кластер, то внутри блока у кластера показывается сразу несколько меток
points = - Перечисляем координаты всех нужных нам точек, их количество должно равняться getPointDat
myMap.behaviors.disable('scrollZoom'); - отключаем скроллинг мышью по области карты

Данный код можно выгодно автоматизировать. Создать новый тип записей, например "филиалы" и заполнить в дополнительных полях координаты и адреса, описания. Потом с помощью php кода получить список всех точек и перебором вывести их все на одну карту. Если интересно могу скинуть готовый код для wordpress.


Также рекомендую к ознакомлению


avatar
  Подписаться  
Уведомление о
Влад Чайка
Участник
Влад Чайка

Статья супер. А можно скрипт на вп?

prormefolti
Гость
prormefolti

Хорошая статья!

Последние комментарии