标记

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

使用标记在地图上显示位置。上例展示了一个未应用任何自定义设置的基本单标记。

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

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

自定义标记

将默认标记图标替换为自定义 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
});

下一步