您可以使用标记来吸引用户注意地图上的某个位置。本指南演示了如何在 3D 地图中添加和自定义标记。您可以控制标记的形状、大小和颜色,以及标记显示的海拔高度。以下示例展示了一个基本标记:
Maps JavaScript 中的 3D 地图提供了两个不同的标记类,每个类都针对特定用途进行了优化。下表显示了这两个可用类之间的差异和权衡取舍:
| 能力 | MarkerElement |
Marker3DElement |
|---|---|---|
| 自定义 | 高(支持自定义 HTML 元素、核心动画 API 等) | 低(可自定义程度较低) |
| 性能 | 互动性能较低(标记数量较多时,FPS 会下降) | 互动性能较高(针对渲染大型数据集进行了优化) |
| 建议的容量 | 最多约 1,000 个标记时,互动性能可靠 | 建议处理超过 1,000 个标记 |
自定义颜色、比例和图标图片
自定义默认标记的背景、字形、边框颜色和大小。

将默认标记图标替换为自定义 SVG 资源。

设置标记的海拔高度
您可以通过拉伸标记并设置海拔高度来设置标记的海拔高度。

让标记响应点击事件和键盘事件
通过添加 click 事件监听器,让标记响应点击事件和键盘事件。
const interactiveMarker = new Marker3DInteractiveElement({ position, gmpPopoverTargetElement: popover, });
设置标记冲突行为
指定某个标记与其他标记或地图标签冲突时的行为方式。
const marker = new Marker3DElement({ position: { lat, lng }, // Try setting a different collision behavior here. collisionBehavior: 'REQUIRED', });
标记性能
自定义 HTML 标记 (MarkerElement) 的性能低于
标准 3D 标记 (Marker3DElement)。对于包含 1,000
个以上标记的应用,强烈建议使用 Marker3dElement
类,以
确保最佳性能。