标记

使用标记吸引用户关注地图上的某个位置。本指南介绍了如何在 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
});

下一步