Прочитать на английском

Поделиться через


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

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

Примечание

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

Важно!

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

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

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

Следующий код создает маркер HTML и задает для DodgerBlue свойства цвета значение и текстовое свойство 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-маркер с пользовательским шаблоном SVG в примерах Azure Maps. При запуске этого примера нажмите кнопку в левой верхней части окна с меткой "Параметры маркера обновления", чтобы изменить color параметры и text параметры из шаблона SVG, используемого в HtmlMarker. Исходный код для этого примера см. в разделе "Маркер HTML" с пользовательским исходным кодом шаблона SVG.

Снимок экрана: карта мира с пользовательским шаблоном 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. Исходный код для этого примера см . в исходном коде маркера HTML в стиле CSS.

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

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

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

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

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

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

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

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

Следующие шаги

Дополнительные сведения о классах и методах, которые используются в этой статье:

Дополнительные примеры кода для добавления в карты см. в следующих статьях: