概览

您可以使用高级标记创建高性能标记并对其进行自定义,还可使用新的标记功能。使用高级标记,您可以自定义默认标记的背景、边框和字形颜色,调整标记大小,并将默认标记图标替换为自定义图形图片。您可以制作可访问的标记,以响应 DOM 点击事件和键盘输入。要进行更深入的自定义,高级标记支持使用自定义 HTML 和 CSS,包括创建完全自定义的标记。对于 3D 应用,您可以控制标记所呈现的海拔高度。光栅地图和矢量地图均支持高级标记(必须提供地图 ID)。

高级标记使用入门

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

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

显示某些自定义标记的屏幕截图。

将默认标记图标替换为自定义 SVG 或 PNG 图片。

显示自定义的 SVG 标记的屏幕截图。

创建自定义 HTML 标记

使用自定义 HTML 和 CSS 来创建具有视觉吸引力的交互式标记,并创建动画。

显示自定义 HTML 标记的屏幕截图。

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

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

function initMap() {
  const map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 37.4239163, lng: -122.0947209},
    zoom: 17,
    mapId: 'DEMO_MAP_ID',
  });

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

  markerView.addListener('click', ({domEvent, latLng}) => {
    const {target} = domEvent;
    // Handle the click event.
    // ...
  });
}

设置标记海拔高度和冲突行为

为标记设置海拔高度,使其正确地与 3D 地图元素一同显示,同时指定标记与其他标记或地图标签冲突时的行为方式。只有矢量地图支持标记海拔高度。

显示海拔高度调整标记的屏幕截图。

后续步骤