Веб-разработка сайтов и цифровых сервисов

Компонент вывода статической яндекс карты с меткой



Описание

Компонент для вывода яндекс карты со меткой, статический метод, координаты и все данные задаются в js коде

Код вызова компонента

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

        <!-- Создаём контейнер для карты -->
        <div id="map" style="width: 100%; height: 400px"></div>
<script>
ymaps.ready(init);

function init() {
    // Создание карты.
    // https://tech.yandex.ru/maps/doc/jsapi/2.1/dg/concepts/map-docpage/
    var myMap = new ymaps.Map("map", {
        // Координаты центра карты.
        // Порядок по умолчнию: «широта, долгота».
        center: '59.921646, 30.415887',

        // Уровень масштабирования. Допустимые значения:
        // от 0 (весь мир) до 19.
        zoom: "12",
        controls: [
            'zoomControl', // Ползунок масштаба
        ]
    });

    clusterer = new ymaps.Clusterer({
        /**
         * Ставим true, если хотим кластеризовать только точки с одинаковыми координатами.
         */
        groupByCoordinates: false,
        clusterDisableClickZoom: true,
        clusterHideIconOnBalloonOpen: false,
        geoObjectHideIconOnBalloonOpen: false
    }),
        myMap.behaviors.disable('scrollZoom');

    var myPlacemark_1 = new ymaps.Placemark([59.921646, 30.415887], {
            // Хинт показывается при наведении мышкой на иконку метки.
            iconContent: 'DemoCorp',
            hintContent: 'DemoCorp',
            balloonContentHeader: 'DemoCorp',
            // Балун откроется при клике по метке.
            balloonContentBody: '<a href="/">Подробнее</a>',
        }
        , {
            preset: 'islands#darkBlueStretchyIcon'
        }
    );

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

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

    myMap.setBounds(myMap.geoObjects.getBounds(), {checkZoomRange: true}).then(function () {
        if (myMap.getZoom() > 12) myMap.setZoom(12); // Если значение zoom превышает 15, то устанавливаем 15.
    });
}
</script>

Информация

Опубликовано
20.08.2022
Обновлено
29.08.2022
Установок
Более 100
Версия
v1.1.3