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

選取平台： 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 }),
  collisionBehavior: collisionBehavior,
});
mapElement.appendChild(advancedMarker);
index.ts

JavaScript

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

設定標記的海拔高度

在向量地圖上，您可以設定標記顯示的海拔高度，有助於 3D 地圖正確顯示標記。如要設定標記的海拔高度，請將 LatLngAltitude 指定為 MarkerView.position 選項的值：

TypeScript

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

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

mapElement.append(marker);
index.ts

JavaScript

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

依地圖縮放等級控管標記顯示設定

查看標記的顯示設定變化 (先縮小地圖)：

如要控管進階標記的顯示設定，請建立 zoom_changed 事件監聽器並加入條件函式 (在縮放等級超過指定等級時，將 AdvancedMarkerElement.map 設為 null)，如下例所示：

TypeScript

mapElement.innerMap.addListener('zoom_changed', () => {
  let zoom = mapElement.innerMap.getZoom();
  for (let i = 0; i < markers.length; i++) {
    const { position, minZoom } = markerOptions[i];
    markers[i].position = zoom! > minZoom ? position : null;
  }
});
index.ts

JavaScript

mapElement.innerMap.addListener('zoom_changed', () => {
    let zoom = mapElement.innerMap.getZoom();
    for (let i = 0; i < markers.length; i++) {
        const { position, minZoom } = markerOptions[i];
        markers[i].position = zoom > minZoom ? position : null;
    }
});
index.js

後續步驟

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