html文档层标记,将 HTML 标记添加到地图 | Microsoft Docs

您现在访问的是微软AZURE全球版技术文档网站，若需要访问由世纪互联运营的MICROSOFT AZURE中国区技术文档网站，请访问 https://docs.azure.cn.

向地图添加 HTML 标记

07/29/2019

本文内容

本文展示了如何向地图添加自定义 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: '

Hello World

',

pixelOffset: [0, -30]

})

});

map.markers.add(marker);

//Add a click event to toggle the popup.

map.events.add('click',marker, () => {

marker.togglePopup();

});

下面是上述功能的完整运行代码示例。

创建 SVG 模板化的 HTML 标记

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

提示

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

添加 CSS 样式化的 HTML 标记

HTML 标记的优点之一是，可以使用 CSS 来实现许多有用的自定义项。 在此示例中，HtmlMarker 内容由 HTML 和 CSS 组成，它们创建一个动画图钉，使其落在适当的位置并产生脉冲。

可拖动的 HTML 标记

此示例演示如何使 HTML 标记可拖动。 HTML 标记支持 drag、dragstart 和 dragend 事件。

将鼠标事件添加到 HTML 标记

这些示例展示如何将鼠标和拖动事件添加到 HTML 标记中。

后续步骤

详细了解本文中使用的类和方法：

有关可向地图添加的更多代码示例，请参阅以下文章：