控管衝突行為和標記顯示設定

本頁說明如何控管進階標記的下列設定：

設定標記的衝突行為
設定標記高度
依地圖縮放等級控管標記顯示設定

設定標記的衝突行為

衝突行為會控管標記與其他標記衝突 (重疊) 時的顯示方式，且僅適用於向量地圖。

如要設定衝突行為，請將 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

後續步驟

將標記設計為可點選且符合無障礙功能