控制冲突行为、海拔高度和可见性

请选择平台： Android iOS JavaScript

本页面介绍了如何控制高级标记的以下几个方面：

  • 设置标记的冲突行为
  • 设置标记的海拔高度
  • 按地图的缩放级别控制标记的可见性

设置标记的冲突行为

冲突行为用于控制标记与其他标记冲突（重叠）时的显示方式。只有矢量地图支持冲突行为。

如需设置冲突行为，请将 AdvancedMarkerElement.collisionBehavior 设置为以下其中一项：

  • REQUIRED：（默认）无论是否冲突，一律显示标记。
  • OPTIONAL_AND_HIDES_LOWER_PRIORITY 标记仅在未与其他标记重叠时才显示。如果两个同属于这种类型的标记发生重叠，则会显示 zIndex 较高的那个标记。如果二者的 zIndex 也相同，则会显示在屏幕上纵向位置较低的那个标记。
  • REQUIRED_AND_HIDES_OPTIONAL 无论是否冲突，始终显示该标记，并隐藏与该标记重叠的所有 OPTIONAL_AND_HIDES_LOWER_PRIORITY 标记或标签。

以下示例显示了如何为标记设置冲突行为：

TypeScript

const advancedMarker = new AdvancedMarkerElement({
  position: new google.maps.LatLng({ lat, lng }),
  map,
  collisionBehavior: collisionBehavior,
});
index.ts

JavaScript

const advancedMarker = new AdvancedMarkerElement({
  position: new google.maps.LatLng({ lat, lng }),
  map,
  collisionBehavior: collisionBehavior,
});

index.js

设置标记的海拔高度

在矢量地图上，您可以设置标记以什么样的海拔高度显示。这样做有助于在 3D 地图内容中正确显示标记。如要为标记设置海拔高度，请指定 LatLngAltitude 作为 MarkerView.position 选项的值：

TypeScript

const pin = new PinElement({
    background: '#4b2e83',
    borderColor: '#b7a57a',
    glyphColor: '#b7a57a',
    scale: 2.0,
});

const markerView = new AdvancedMarkerElement({
    map,
    content: pin.element,
    // Set altitude to 20 meters above the ground.
    position: { lat: 47.65170843460547, lng: -122.30754, altitude: 20 } as google.maps.LatLngAltitudeLiteral,
});
index.ts

JavaScript

const pin = new PinElement({
  background: "#4b2e83",
  borderColor: "#b7a57a",
  glyphColor: "#b7a57a",
  scale: 2.0,
});
const markerView = new AdvancedMarkerElement({
  map,
  content: pin.element,
  // Set altitude to 20 meters above the ground.
  position: { lat: 47.65170843460547, lng: -122.30754, altitude: 20 },
});
index.js

按地图的缩放级别控制标记的可见性

查看标记可见性的变化（先缩小地图）：

如需控制高级标记的可见性，请创建一个 zoom_changed 监听器，并添加一个条件函数，指定在缩放等级超过指定级别时将 AdvancedMarkerElement.map 设置为 null，如下例所示：

TypeScript

map.addListener('zoom_changed', () => {
    const zoom = map.getZoom();
    if (zoom) {
        // Only show each marker above a certain zoom level.
        marker01.map = zoom > 14 ? map : null;
        marker02.map = zoom > 15 ? map : null;
        marker03.map = zoom > 16 ? map : null;
        marker04.map = zoom > 17 ? map : null;
    }
});
index.ts

JavaScript

map.addListener("zoom_changed", () => {
  const zoom = map.getZoom();

  if (zoom) {
    // Only show each marker above a certain zoom level.
    marker01.map = zoom > 14 ? map : null;
    marker02.map = zoom > 15 ? map : null;
    marker03.map = zoom > 16 ? map : null;
    marker04.map = zoom > 17 ? map : null;
  }
});
index.js

后续步骤

使标记可点击并符合无障碍功能要求