控管衝突行為

本頁說明如何設定標記的衝突行為。衝突行為會控管不同標記之間衝突 (重疊) 時的顯示方式，

如要設定衝突行為，請將 collisionBehavior 設為下列其中一種狀態：

• REQUIRED：無論是哪種衝突，一律顯示標記
• REQUIRED_AND_HIDES_OPTIONAL：無論是哪種衝突，一律顯示標記，並隱藏與標記重疊的任何 OPTIONAL_AND_HIDES_LOWER_PRIORITY 標記或標籤。
• OPTIONAL_AND_HIDES_LOWER_PRIORITY：標記只會在沒有重疊情況時顯示。如果這個類型的兩個標記重疊，系統會顯示 zIndex 較高的標記。如果兩者的 zIndex 相同，系統會顯示直向畫面位置較低的標記。

下例說明如何設定標記的衝突行為：

const marker = new Marker3DElement({
    position: { lat, lng },
    // Try setting a different collision behavior here.
    collisionBehavior: 'REQUIRED',
});
index.js

控管標籤的衝突行為

您可以分別控管標記圖釘和標籤文字的衝突行為。在某些情況下，隱藏標籤但保留畫面上的標記別針，可能有助於保留背景資訊。如要這麼做，請新增 <gmp-label-3d> 元素做為 <gmp-marker-3d> 的同層級，並使用 for 屬性連結兩者。

下列程式碼範例說明如何為標籤設定衝突行為，與標記分開：

const markerWithIndependentLabel = new Marker3DElement({
    position: { lat: 37.423, lng: -122.015 },
});
markerWithIndependentLabel.id = 'marker-1';
const label = new Label3DElement({
    collisionBehavior: CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY,
    for: 'marker-1',
});
label.append('Independent label example');
map.append(markerWithIndependentLabel);
map.append(label);
index.js