標記總覽

選取平台： Android iOS JavaScript

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

開始使用進階標記

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

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

這張螢幕截圖顯示一些自訂標記。

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

這張螢幕截圖顯示自訂 SVG 標記。

建立自訂 HTML 標記

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

這張螢幕截圖顯示自訂 HTML 標記。

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

如要讓標記回應點擊和鍵盤事件，請加入 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 地圖元素一併正確顯示，並指定標記與其他標記或地圖標籤衝突時應呈現的行為。標記高度僅適用於向量地圖。

這張螢幕截圖顯示調整過高度的標記。

後續步驟