标记

您可以使用标记来吸引用户注意地图上的某个位置。本指南演示了如何在 3D 地图中添加和自定义标记。您可以控制标记的形状、大小和颜色，以及标记显示的海拔高度。以下示例展示了一个基本标记：

Maps JavaScript 中的 3D 地图提供了两个不同的标记类，每个类都针对特定用途进行了优化。下表显示了这两个可用类之间的差异和权衡取舍：

能力	MarkerElement	Marker3DElement
自定义	高（支持自定义 HTML 元素、核心动画 API 等）	低（可自定义程度较低）
性能	互动性能较低（标记数量较多时，FPS 会下降）	互动性能较高（针对渲染大型数据集进行了优化）
建议的容量	最多约 1,000 个标记时，互动性能可靠	建议用于处理超过 1,000 个标记的情况

自定义颜色、比例和图标图片

自定义默认标记的背景、字形、边框颜色和大小。

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

设置标记的海拔高度

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

让标记响应点击事件和键盘事件

通过添加 click 事件监听器，让标记响应点击事件和键盘事件。

function initMap() {
  const map = new Map3DElement({
    center: { lat: 37.4690, lng: -122.1074, altitude: 0 },
    tilt: 67.5,
    range: 45000,
    mode: MapMode.HYBRID
  });

  const interactiveMarker = new google.maps.marker.Marker3DInteractiveElement({
    map,
    position: {lat: 37.4239163, lng: -122.0947209},
  });

  interactiveMarker.addEventListener('gmp-click', (event) => {
    // Handle the click event.
    // ...
  });
}

设置标记冲突行为

指定某个标记与其他标记或地图标签冲突时的行为方式。

const marker = new Marker3DElement({
    position: {lat, lng},
    collisionBehavior: google.maps.CollisionBehavior.REQUIRED
});

标记性能

自定义 HTML 标记 (MarkerElement) 的性能低于 标准 3D 标记 (Marker3DElement)。对于包含 1,000 个以上标记的应用，强烈建议使用 Marker3dElement 类，以 确保最佳性能。

下一步

• 添加标记