jun_dev
@jun_dev
Frontend-developer

Как использовать шаблон для балуна в Яндекс карте при добавлении множества меток с Json?

Для добавления множества меток я воспользовался оф. документацией.
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>
  • Вопрос задан
  • 86 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы