Добавление маркеров HTML на карту

Статья
06/28/2023

В этой статье показано, как добавить на карту настраиваемый элемент HTML, например файл изображения, в качестве маркера HTML.

Примечание

Маркеры HTML не подключаются к источникам данных. Вместо этого сведения о положении добавляются непосредственно к маркеру, который добавляется в свойство карт markers — HtmlMarkerManager.

Важно!

В отличие от большинства слоев в веб-элементе управления Azure Maps, использующих WebGL для отрисовки, маркеры HTML используют традиционные элементы модели DOM для отрисовки. Таким образом, чем больше дополнительных маркеров HTML добавлено на страницу, тем больше элементов модели DOM. Производительность может снизиться после добавления нескольких сотен маркеров HTML. Для более крупных наборов данных рекомендуется кластеризация данных или использование слоя символа или пузырьков.

Добавление маркера HTML

Класс HtmlMarker имеет стиль по умолчанию. Маркер можно настроить, задав параметры цвета и текста маркера. Стиль по умолчанию класса маркера HTML — это шаблон SVG с заполнителем {color} и {text}. Задайте свойства цвета и текста в параметрах маркера HTML для быстрой настройки.

Следующий код создает маркер HTML и задает свойству color значение DodgerBlue , а свойству text — значение 10. К маркеру прикрепляется всплывающее окно, а для переключения видимости всплывающего окна используется событие click.

//Create an HTML marker and add it to the map.
var marker = new atlas.HtmlMarker({
    color: 'DodgerBlue',
    text: '10',
    position: [0, 0],
    popup: new atlas.Popup({
        content: '<div style="padding:10px">Hello World</div>',
        pixelOffset: [0, -30]
    })
});

map.markers.add(marker);

//Add a click event to toggle the popup.
map.events.add('click',marker, () => {
    marker.togglePopup();
});

Полный рабочий пример добавления маркера HTML см. в разделе Простой маркер HTML в Azure Maps Примеры. Исходный код для этого примера см. в разделе Простой исходный код маркера HTML.

Снимок экрана: карта мира с простым HtmlMarker.

Создание маркера HTML шаблона SVG

Значение по умолчанию htmlContent маркера HTML — это шаблон SVG с папками места {color} и {text}. Вы можете создавать настраиваемые строки SVG и добавлять эти примеры заполнителей в свои SVG, чтобы при настройке параметров color и text маркера заполнители обновлялись в SVG.

Полный рабочий пример создания пользовательского шаблона SVG и его использования с классом HtmlMarker см. в разделе Html Marker with Custom SVG Template статьи Примеры Azure Maps. При запуске этого примера нажмите кнопку в левой верхней части окна с меткой Параметры маркера обновления , чтобы изменить color параметры и text из шаблона SVG, используемого в HtmlMarker. Исходный код для этого примера см. в разделе Html Marker with Custom SVG Template source code.

Снимок экрана: карта мира с пользовательским шаблоном SVG, используемым с классом HtmlMarker. Он содержит кнопку с меткой параметры маркера обновления, которая при выборе изменяет цвет и текстовые параметры из шаблона SVG, используемого в HtmlMarker.

Совет

Веб-пакет SDK Azure Maps предоставляет несколько шаблонов изображений SVG, которые можно использовать с маркерами HTML. Дополнительные сведения см. в статье Использование шаблонов изображений.

Добавление маркера HTML стиля CSS

Одно из преимуществ HTML заключается в том, что имеется множество отличных настроек, которые можно сделать с помощью CSS. В следующем примере содержимое HtmlMarker состоит из HTML и CSS, которые создают анимированную булавку, которая падает на место и импульсы.

//Wait until the map resources are ready.
map.events.add('ready', function () {
    //Create a HTML marker and add it to the map.
    map.markers.add(new atlas.HtmlMarker({
        htmlContent: "<div><div class='pin bounce'></div><div class='pulse'></div></div>",
        position: [-0.1406, 51.5018],
        pixelOffset: [5, -18]
    }));
});

The CSS:

    <style>
        .pin {
            width: 30px;
            height: 30px;
            border-radius: 50% 50% 50% 0;
            background: #00cae9;
            position: absolute;
            transform: rotate(-45deg);
            left: 50%;
            top: 50%;
            margin: -20px 0 0 -20px;
        }

            .pin:after {
                content: "";
                width: 14px;
                height: 14px;
                margin: 8px 0 0 8px;
                background: #e6e6e6;
                position: absolute;
                border-radius: 50%;
            }

        .bounce {
            animation-name: bounce;
            animation-fill-mode: both;
            animation-duration: 1s;
        }

        .pulse {
            background: #d6d4d4;
            border-radius: 50%;
            height: 14px;
            width: 14px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: 11px 0px 0px -12px;
            transform: rotateX(55deg);
            z-index: -2;
        }

            .pulse:after {
                content: "";
                border-radius: 50%;
                height: 40px;
                width: 40px;
                position: absolute;
                margin: -13px 0 0 -13px;
                animation: pulsate 1s ease-out;
                animation-iteration-count: infinite;
                opacity: 0;
                box-shadow: 0 0 1px 2px #00cae9;
                animation-delay: 1.1s;
            }

        @keyframes pulsate {
            0% {
                transform: scale(0.1, 0.1);
                opacity: 0;
            }

            50% {
                opacity: 1;
            }

            100% {
                transform: scale(1.2, 1.2);
                opacity: 0;
            }
        }

        @keyframes bounce {
            0% {
                opacity: 0;
                transform: translateY(-2000px) rotate(-45deg);
            }

            60% {
                opacity: 1;
                transform: translateY(30px) rotate(-45deg);
            }

            80% {
                transform: translateY(-10px) rotate(-45deg);
            }

            100% {
                transform: translateY(0) rotate(-45deg);
            }
        }
    </style>

Полный рабочий пример использования CSS и HTML для создания маркера на карте см. в статье Css Styled HTML Marker в Azure Maps Samples. Исходный код для этого примера см. в разделе Исходный код маркера HTML в стиле CSS.

Снимок экрана: html-маркер в стиле CSS.

Перетаскиваемые маркеры HTML

В этом примере показано, как сделать перетаскиваемый маркер HTML. Маркеры HTML поддерживают события drag, dragstart и dragend.

Полный рабочий пример использования CSS и HTML для создания маркера на карте см. в разделе Draggable HTML Marker in the Azure Maps Samples. Исходный код для этого примера см. в разделе Исходный код перетаскиваемого маркера HTML.

Снимок экрана: карта США с желтым пальцем, перетаскиваемым для демонстрации перетаскиваемого html-маркера.

Добавление событий мыши к маркерам HTML

Полный рабочий пример добавления событий мыши и перетаскивания в маркер HTML см. в разделе События маркера HTML в Azure Maps Samples. Исходный код для этого примера см. в разделе Исходный код событий маркера HTML.

Снимок экрана: карта мира с HtmlMarker и списком событий HtmlMarker, которые выделяются зеленым цветом при возникновении этого события.