В этом тексте, я покажу как создать карту Yandex на сайт, с использованием ObjectManager, кластеризацией меток и модуля PieChart
Стремиться будем к этому:
В архиве все что потребуется.
Что содержит архив, не вникая в подробности:
| Фаил | Описание |
| Index.html | Сама страница где будет карта |
| data.json | Описание меток (важный фаил, тут сами метки) |
| object_manager.js | Модуль ObjectManager (в нем и будем работать) |
| pie-chart-clusterer.min.js | Модуль PieChart для кластера (в него влезать не будем) |
А теперь окунёмся в подробности:
Index.html
На что стоит обратить внимание.
<script src="//api-maps.yandex.ru
Разберем это на составные части:
api-maps.yandex.ru/2.1
Это версия API карты. Т.е подключаться будет последняя версия. На момент написания этого текста последняя версия была 2.1.22. Номер полностью можно не писать т.к по умолчанию, подключается последняя версия. Если надо конкретную версию – пишите номер полностью.
?lang=ru-RU
Локаль языка. Т.е язык самой карты.
Существуют такие параметры:
lang=ru_RU, lang=en_US, lang=ru_UA, lang=uk_UA, lang=tr_TR
Первый параметр двузначный код языка, Второй параметр двузначный код страны
&coordorder=
Это порядок задания координат.
latlong - [широта, долгота] -используется по умолчанию;
longlat - [долгота, широта].
По умолчанию, если просто не писать это (&coordorder=longlat) координаты задаются как [широта, долгота]
Честно скажу, что оставив longlat, Вы немного усложняете себе жизнь, т.к геокодер от Яндекса выдаёт точки как [широта, долгота], а с этим параметром Вам придется помнить что координаты надо вводить как [долгота, широта].
Я в примере оставлю longlat, только для того, чтобы Вы имели представление, что такое тоже возможно, и не пугались, кода у Вас точка Воронежа вылезет в пустыню.
<div id="map"></div>
“map” - это имя самой карты, связано с именем в object_manager.js
data.json
В этом фале мы и будем описывать все метки. Т.е. это основной файл из которого будут браться точки на карту. Вот структура меток:
{"type": "Feature", "id": 1, "geometry": {"type": "Point", "coordinates": [X, Y]}, "properties": {"balloonContentHeader": " НАЗВАНИЕ БАЛУНА ", "balloonContentBody": " описание балуна ", "balloonContentFooter": " подвал балуна ", "hintContent": "хинт метки"},options: {preset: 'islands#greenIcon'}},
{"type": "Feature", "id": 2, "geometry": {"type": "Point", "coordinates": [X, Y]}, "properties": {"balloonContentHeader": "НАЗВАНИЕ БАЛУНА", "balloonContentBody": "описание балуна", "balloonContentFooter": "подвал балуна", "hintContent": "хинт метки"},options: {preset: 'islands#orangeIcon'}}
Разберем его:
| Параметр | Описание |
| id | Номер метки (должен быть уникальным) |
| coordinates X,Y | Координаты метки (надеюсь помните про &coordorder) |
| balloonContentHeader | Название балуна |
| balloonContentBody | Описание балуна |
| balloonContentFooter | Подвал балуна |
| hintContent | Хинт метки |
| options | Это опции самой метки. Именно тут можно задать ей свою картинку. Мы это делать не будем, а оставим метки по пресету от яндекса, но они будут разного цвета. |
Обратите внимание, после последней метки запятая не ставится.
Балун - это то что откроется, когда на метку пользователь нажмет. Работать с ним можно как с обычным HTML документом.
Хинт - это текст который появится при наведении мышки на метку.
В примере который Вы скачали есть только 6 меток (Москва, Мурманск, Бийск, Хатанга, Курильск и Лос-Анджелес), каждая метка имеет свой цвет.
С описанием разобрались приступаем к реализации:
object_manager.js
var myMap = new ymaps.Map('map', {
center: [6.9970974589843702, 55.69765387145125],
zoom: 2
})
«map» - имя карты (должно совпадать с именем в Index.html)
«center» - координаты центра карты, не какой либо метки, а именно центр самой карты. И еще раз напоминаю про &coordorder
«zoom» - как карта будет показано относительно center, т.е с каким масштабом. Принимает значения от 1 до 10 (если мне не изменяет память). Дробные числа я не пробовал, и как будет работать на них я не знаю.
var objectManager = new ymaps.ObjectManager({
clusterize: true,
gridSize: 32,
clusterHasHint: true,
clusterHintContentLayout: ClusterHintLayout,
clusterIconLayout: PieChartClustererLayout
})
«clusterize: true» - чтобы метки начали кластеризоваться.
«gridSize» - с каким шагом происходит кластеризация. Чтобы было понятно, представьте себе рыболовную сеть, которая наложена на карту. Так вот, все что попадет в одну ячейку этой сетки и будет кластеризоваться. А размер этой ячейки и задается параметром gridSize. То есть чем больше размер ячейки, тем больше попадет в нее меток.
Так с основным разобрались, теперь второстепенное - если нужно чтобы на самом кластере выводился хинт то делаем это:
«clusterHasHint: true» - эта опция включает показ хинта на кластере
«clusterHintContentLayout: ClusterHintLayout» - что показать на кластере в виде хинта. Сам текст задается отдельно в
var ClusterHintLayout = ymaps.templateLayoutFactory.createClass(
'тут текс который надо показывать'
)
$.ajax({
url: "data.json"
}).done(function(data) {
objectManager.add(data);
})
«url: "data.json"» -полный путь до файла json. Разумеется Вы можете его обозвать как хотите, хоть vasia_pupkin – главное, что внутри.
А теперь PieChart:
«clusterIconLayout: PieChartClustererLayout» - ну в принципе из названия понятно что это такое. Но влезать в него, как я и писал, мы не будем.
Простыми словами - он берет из файла json «preset» и по нему строит внешний вид кластера.
Надеюсь разработчик не сильно на меня обидится, и не нашлет на меня кару небесную за столь краткое описание его труда.
Ну вот в принципе и все!
Вам осталось добавить метки в фаил json, и присвоить им нужный цвет.