你当前正在访问 Microsoft Azure Global Edition 技术文档网站。如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站，请访问 https://docs.azure.cn。

向地图添加 HTML 标记

项目
06/28/2023

本文展示了如何向地图添加自定义 HTML（例如图像文件）作为 HTML 标记。

注意

HTML 标记不连接到数据源。相反，位置信息将被直接添加到标记中，标记将被添加到地图 markers 属性中，即 HtmlMarkerManager。

重要

与 Azure Maps Web 控件中使用 WebGL 进行呈现的大多数层不同，HTML 标记使用传统的 DOM 元素进行呈现。因此，添加到页面的 HTML 标记越多，DOM 元素就越多。添加几百个 HTML 标记后，可能会降低性能。对于较大的数据集，可以考虑对数据进行聚类分析，或者使用符号或气泡层。

添加 HTML 标记

HtmlMarker 类具有默认样式。可以通过设置标记的颜色和文本选项自定义标记。 HTML 标记类的默认样式是具有 {color} 和 {text} 占位符的 SVG 模板。在 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 标记的完整有效示例，请参阅 Azure Maps 示例中的简单 HTML 标记。有关此示例的源代码，请参阅简单 HTML 标记源代码。

显示包含简单 HtmlMarker 的世界地图的屏幕截图。

创建 SVG 模板化的 HTML 标记

Html 标记的默认 htmlContent 是 SVG 模板，其中包含文件夹 {color} 和 {text}。可以创建自定义 SVG 字符串并将这些相同的占位符添加到 SVG 中，以便设置标记的 color 和 text 选项来更新 SVG 中的这些占位符。

有关如何创建自定义 SVG 模板并将其与 HtmlMarker 类一起使用的完整有效示例，请参阅 Azure Maps 示例中的包含自定义 SVG 模板的 HTML 标记。运行此示例时，选择窗口左上方标有“更新标记选项”的按钮可以更改 HtmlMarker 中使用的 SVG 模板中的 color 和 text 选项。有关此示例的源代码，请参阅使用自定义 SVG 模板的 HTML 标记源代码。

显示一幅世界地图的屏幕截图，该地图包含与 HtmlMarker 类一起使用的自定义 SVG 模板。它还包含一个标有“更新标记选项”的按钮，选择该按钮可更改 HtmlMarker 中使用的 SVG 模板中的颜色和文本选项。

提示

Azure Maps Web SDK 提供了多个可与 HTML 标记一起使用的 SVG 图像模板。有关详细信息，请参阅如何使用图像模板文档。

添加 CSS 样式化的 HTML 标记

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]
    }));
});

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 在地图上创建标记的完整有效示例，请参阅 Azure Maps 示例中的 CSS 样式的 HTML 标记。有关此示例的源代码，请参阅 CSS 样式的 HTML 标记源代码。

显示 CSS 样式的 HTML 标记的屏幕截图。