向天蓝色地图添加标记

Question

我从 Azure Maps 开始，尝试使用此方法添加我的一个 PNG 文件作为标记：

private addBoatMarker(position: [number, number]): void {
    const boatMarker = new atlas.HtmlMarker({
        htmlContent: '<img src="../js/img/up south west.PNG" style="width: 50px; height: 60px;">',
        position: position,
        text: 'test text',
        anchor: 'center'
    });
    this.map.markers.add(boatMarker);
}

地图上没有显示任何内容，这段代码有问题吗？ 目标是在视图上显示一艘小船的图像，当用户单击其他位置时，图像会移动到下一个位置。 这是最好的方法吗？

谢谢， 克劳德

Answer 1

首先，请务必检查浏览器的控制台是否有错误。我要查找的是与未找到文件相关的错误，这将指示文件路径/url 的问题。除此之外，它应该有效。

确保您的位置按[经度、纬度]排序，否则标记将最终出现在地图上的其他位置，可能超出您正在查看的位置。

尽管如此，HTML 标记功能并不经常使用，主要用于使用 css 类/动画的遗留解决方案，或者当您需要能够用鼠标拖动它时。如果您没有显示很多点，那很好，但是一旦您显示了数百个点，就会生成大量 DOM 元素，并且浏览器中的元素越多，浏览器的速度就越慢。在 Azure Maps 中，您可以使用符号图层来显示点的自定义图标图像，并且具有高性能。这些在 WebGL 中渲染，可以在浏览器中轻松显示 100,000 多个。设置它还需要做一些工作，因为您需要在图层中使用图像之前将图像预加载到地图中。作为奖励，通过这种方法，您可以使用数据驱动的样式，这在一开始可能有点复杂，但是一旦您理解它，它就可以让您创建真正美观、高性能的地图。以下是使用带有符号图层的自定义图像的示例：https://samples.azuremaps.com/?sample=custom-symbol-image-icon