標記總覽

選取平台： Android iOS JavaScript

您可以使用標記在地圖上顯示單一位置。本指南將說明如何使用進階標記。您可以運用進階標記，建立及自訂效能卓越的標記，並製作可回應 DOM 點擊事件和鍵盤輸入的標記。如果需要進一步自訂，進階標記支援使用自訂 HTML 和 CSS，包括建立完全自訂的標記。您可以在 3D 應用程式中利用進階標記，設定顯示標記的海拔高度。光柵地圖和向量地圖都支援進階標記 (但光柵地圖無法使用部分功能)。使用進階標記時，必須提供地圖 ID (可使用 DEMO_MAP_ID)。

提示： 如果地圖使用舊版標記，建議遷移至進階標記。

開始使用進階標記

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

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

將預設標記圖示換成自訂的 SVG 或 PNG 圖片。

建立自訂 HTML 標記

使用自訂 HTML 和 CSS 建立搶眼的互動式標記，並製作動畫。

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

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

function initMap() {
  const map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 37.4239163, lng: -122.0947209},
    zoom: 17,
    mapId: 'DEMO_MAP_ID',
  });

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

  marker.addListener('click', ({domEvent, latLng}) => {
    const {target} = domEvent;
    // Handle the click event.
    // ...
  });
}

設定標記高度和衝突行為

設定標記的高度，讓標記能與 3D 地圖元素一併正確顯示，並指定標記與其他標記或地圖標籤衝突時應呈現的行為。標記高度僅適用於向量地圖。

後續步驟

• 開始使用進階標記