控制冲突行为和标记的可见性

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

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

设置标记的冲突行为

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

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

REQUIRED：（默认）无论冲突如何，一律显示标记。
OPTIONAL_AND_HIDES_LOWER_PRIORITY 仅在标记未与其他标记重叠时才显示该标记。如果此类型的两个标记发生重叠，则会显示 zIndex 较高的标记。如果它们具有相同的 zIndex，则会显示垂直屏幕位置较低的位置。
REQUIRED_AND_HIDES_OPTIONAL 始终显示该标记（不考虑冲突之处），并隐藏与该标记重叠的所有 OPTIONAL_AND_HIDES_LOWER_PRIORITY 标记或标签。

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

TypeScript

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

JavaScript

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

设置标记的海拔高度

在矢量地图上，您可以设置标记呈现的海拔高度。为了使标记按照相关 3D 地图内容正确显示，这个功能非常有用。如要为标记设置海拔高度，请将 LatLngAltitude 指定为 MarkerView.position 选项的值：

TypeScript

const pinView = new google.maps.marker.PinView({
    background: '#4b2e83',
    borderColor: '#b7a57a',
    glyphColor: '#b7a57a',
    scale: 2.0,
});

const markerView = new google.maps.marker.AdvancedMarkerView({
    map,
    content: pinView.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 pinView = new google.maps.marker.PinView({
  background: "#4b2e83",
  borderColor: "#b7a57a",
  glyphColor: "#b7a57a",
  scale: 2.0,
});
const markerView = new google.maps.marker.AdvancedMarkerView({
  map,
  content: pinView.element,
  // Set altitude to 20 meters above the ground.
  position: { lat: 47.65170843460547, lng: -122.30754, altitude: 20 },
});index.js

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

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

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

TypeScript

map.addListener('zoom_changed', () => {
    const zoom = map.getZoom();
    if (zoom) {
        // Only show each marker above a certain zoom level.
        markerView01.map = zoom > 14 ? map : null;
        markerView02.map = zoom > 15 ? map : null;
        markerView03.map = zoom > 16 ? map : null;
        markerView04.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.
    markerView01.map = zoom > 14 ? map : null;
    markerView02.map = zoom > 15 ? map : null;
    markerView03.map = zoom > 16 ? map : null;
    markerView04.map = zoom > 17 ? map : null;
  }
});index.js

后续步骤

使标记可点击且可访问