控管衝突行為

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

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