標記

您可以使用標記吸引使用者注意地圖上的位置。本指南說明如何在 3D 地圖中使用及自訂標記。除了標記的顯示高度，您還可以控管標記的形狀、大小和顏色。以下範例顯示基本標記：

Maps JavaScript 的 3D 地圖提供兩種不同的標記類別，各自針對特定用途進行最佳化。下表列出這兩種可用類別的差異和取捨考量：

功能	MarkerElement	Marker3DElement
自訂	高 (支援自訂 HTML 元素、核心動畫 API 等)	低 (可自訂程度較低)
成效	互動效能較低 (大量標記會導致 FPS 下降)	互動效能更高 (已針對算繪大型資料集進行最佳化)
建議容量	最多約 1,000 個標記的互動效能穩定可靠	建議用於處理超過 1,000 個標記

自訂顏色、縮放和圖示圖片

自訂預設標記的背景、字符、邊框顏色和大小。

將預設標記圖示換成自訂的 SVG 資源。

設定標記高度

您可以擠出標記並設定海拔高度，藉此設定標記海拔高度。

讓標記回應點擊和鍵盤事件

如要讓標記回應點擊和鍵盤事件，請加入 click 事件監聽器。

function initMap() {
  const map = new Map3DElement({
    center: { lat: 37.4690, lng: -122.1074, altitude: 0 },
    tilt: 67.5,
    range: 45000,
    mode: MapMode.HYBRID
  });

  const interactiveMarker = new google.maps.marker.Marker3DInteractiveElement({
    map,
    position: {lat: 37.4239163, lng: -122.0947209},
  });

  interactiveMarker.addEventListener('gmp-click', (event) => {
    // Handle the click event.
    // ...
  });
}

設定標記衝突行為

指定標記與其他標記或地圖標籤衝突時應呈現的行為。

const marker = new Marker3DElement({
    position: {lat, lng},
    collisionBehavior: google.maps.CollisionBehavior.REQUIRED
});

標記效能

自訂 HTML 標記 (MarkerElement) 的效能比標準 3D 標記 (Marker3DElement) 低。如果應用程式有超過 1,000 個標記，強烈建議使用 Marker3dElement 類別，確保效能達到最佳狀態。

下一步

• 新增標記