控管衝突行為、海拔高度和顯示設定

選取平台： 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

後續步驟

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