Для добавления множества меток я воспользовался оф. документацией.
https://yandex.ru/dev/maps/jsbox/2.1/object_manager
Всё отлично работает, но мне необходимо стилизовать балун метки.
Для этого я изменил структуру json и получилось нечно ужасное.
Вот такая структура сейчас у моего json файла
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"id": 0,
"geometry": {
"type": "Point",
"coordinates": [ 55.74064738, 37.53815889 ]
},
"properties": {
"balloonContentBody": "<div class='map-popup'> <div class= 'map-popup__block-title'>
<p class='map-popup__block-title__title'>Заголовок</p><p class='map-popup__block-title__subtitle'>
Подзаголовок</p></div> <div class='map-popup__block-contacts'><a class='map-popup__block-contacts__phone'
href='tel:+79009101815'>+7 (900) 9910-18-18</a><p class='map-popup__block-contacts__email'>
mail@mail.ru</p></div><div class='map-popup__block-address'>122365, г. Москва, Московский пр-т, д. 50/50
</div><div class='map-popup__block-icons'><img src='./assets/images/icons/icon-categories/icon-6.svg'
alt='1'> <img src='./assets/images/icons/icon-categories/icon-7.svg' alt='2'>
<img src='./assets/images/icons/icon-categories/icon-8.svg' alt='2'></div>
<div class='map-popup__block-button'><a href='#'>Как проехать</a></div></div>",
"clusterCaption": "<div class='map-another-label'>Описание</div>",
"hintContent": "<div class='map-info'>Описание</div>"
}
},
...
}
]
Я про содержмое «balloonContentBody».
Сейчас мне необходимо применить шаблон к меткам и подружать к нему значения.
Нашел документацию
https://yandex.ru/dev/maps/jsapi/doc/2.1/dg/concep...
Но из за малого опыта не могу разобраться как правильно его применить.
Вот мой скрипт.
<script>
ymaps.ready(init);
function init() {
var myMap = new ymaps.Map('map', {
center: [ 55.76, 37.64 ],
zoom: 10
},
{
searchControlProvider: 'yandex#search'
}),
objectManager = new ymaps.ObjectManager({
clusterize: true,
gridSize: 32,
clusterDisableClickZoom: true,
});
objectManager.objects.options.set('preset', 'islands#greenDotIcon');
objectManager.clusters.options.set('preset', 'islands#greenClusterIcons');
myMap.geoObjects.add(objectManager);
fetch('map-base.json')
.then(response => {
if (response.status >= 400) {
return Promise.reject()
}
return response.json();
})
.then(data => {
/*Тут размещен скрипт для реализации фильтра и вывода меток*/
})
.catch(() => console.log('error'))
}
</script>