Статья про то, как кластеризовать адреса на яндекс картах используя json объект. Благодаря расширенному Апи
Для реализации подобной карты нам понядобится:
- api яндекс карты
- jquery
- json
- ровные руки
Для начала подключим все необходимые скрипты:
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.0.1/jquery-migrate.min.js"></script>
Далее остается лишь вывести карту в div контейнер:
<div id="map"></div>
Вид скрипта, который будет все кластеризовать. Пишем функцию инициализации карты. В ней задаем путь к JSON файлу, который будем парсить. Располагаем положение карты в объект map.
Далее функцией $.getJSON которая поставляется jQuery библиотекой мы парсим json файлы и вызываем анонимную функцию в которую передаем весь наш json объект.
Задаем обход по объекту json. Изначально в одной секции у меня указан адрес, lat и lng. Поэтому после передачи каждого элемента цикла в переменную item, мы имеем возможность обращаться к ключам каждого внутреннего элемету объекта. item.addr, item.lat и item.lng
Справедливый для моего кода — код json
[{adr: " Минск, улица Маяковского, 2", lat: "53.86878", lng: "27.568371" },
{adr: " Минск, улица Сергея Есенина, 1", lat: "53.864724", lng: "27.431063" } ... ]
Конечно же lat и lng можно было записать в одно поле, поле координат, для оптимизации кода. Но здесь акцент сфокусирован на другом
$(document).ready(function () {
ymaps.ready(init);
function init() {
var json_path = 'json_path/json_content.json';
var map = new ymaps.Map("map", {
center: [53.902496, 27.561481],
zoom: 12,
controls: ['zoomControl', 'searchControl']
});
$.getJSON(json_path, function (json_arr) {
var myGeoObjects = json_arr.map(item => {
return new ymaps.GeoObject({
geometry: {
type: "Point",
// Переведем строку с координатами в массив
coordinates: [item.lat, item.lng]
},
properties: {
clusterCaption: item.adr,
balloonContentBody: [
'<address style="font-style: normal">',
'<h3>Данные</h3>',
'<b>Адрес: </b> ' + item.adr + '<br>',
'</address>'
].join('')
}
}, {
iconLayout: 'default#image',
iconImageHref: 'images/pin.png',
iconImageSize: [20, 32],
iconImageOffset: [-10, -16]
});
})
var clusterIcons = [
{
href: 'images/m1.png',
size: [50, 50],
// Отступ, чтобы центр картинки совпадал с центром кластера.
offset: [-25, -25]
},
{
href: 'images/m2.png',
size: [55, 55],
offset: [-22.5, -22.5]
},
{
href: 'images/m3.png',
size: [65, 65],
offset: [-32.5, -32.5]
},
{
href: 'images/m4.png',
size: [70, 70],
offset: [-35, -35]
},
{
href: 'images/m5.png',
size: [75, 75],
offset: [-37.5, -37.5]
}
];
clusterNumbers = [5,10,20,50,100];
// Создадим кластеризатор после получения и добавления точек
var clusterer = new ymaps.Clusterer({
preset: 'islands#invertedDarkGreenClusterIcons',
clusterIcons: clusterIcons,
clusterNumbers: clusterNumbers,
clusterDisableClickZoom: true,
clusterBalloonContentLayoutWidth: 800,
clusterBalloonLeftColumnWidth: 160
});
clusterer.add(myGeoObjects);
map.geoObjects.add(clusterer);
map.setBounds(clusterer.getBounds(), {
checkZoomRange: true
});
})
}
});
Также меняем иконки кластеризации в зависимости от количества мест в одной точке (необязательная фича). Задаем параметр clusterIcons и вписываем туда описания иконок.
И напоследок задаем параметры кластеризации в виде списка чисел clusterNumbers в зависимости от чисел будет выводится та или иная иконка. Также каждая иконка будет больше предыдущей, об этом мы уже позаботились.
Все остальные параметры, которые встречаются в моем примере js кода доступны в документации yandex карт
Впрочем на этом все, пишите в комментарии, если что-то для Вас не ясно и возникли определенные вопросы. Мы можем совместными усилиями отрефакторить код или устроить более подробное его описание.
Скачать сопутствующие материалы
[sociallocker id=1274]Yandex maps красивые иконки
Размер: | 43.00 KB |
Скачано (раз): | 2802 |
Версия: |
Файл | Действие |
---|---|
images.zip | Скачать |
Спасибо. А как можно добавлять на карту метки в зависимости от видимой области карты? Чтобы не запрашивать в базе все метки, а только те, которые есть для видимой области.
Большое спасибо за статью! Как раз искал как сделать гео-статистику заказов на сайте. Очень помогло!