Advanced Markers

AdvancedMarkerElement 類別

google.maps.marker.AdvancedMarkerElement class
extends HTMLElement
implements AdvancedMarkerElementOptions
library "marker"

在地圖上顯示位置。請注意，必須設定 position，系統才會顯示 AdvancedMarkerElement。

   
<gmp-advanced-marker
  anchor-left="string"
  anchor-top="string"
  gmp-clickable
  position="lat,lng"
  title="string">
</gmp-advanced-marker>

const {AdvancedMarkerElement} = await google.maps.importLibrary("marker");

建構函式
AdvancedMarkerElement	AdvancedMarkerElement([options]) 參數： options：AdvancedMarkerElementOptions optional 使用指定選項建立 AdvancedMarkerElement。如果指定地圖，系統會在建構時將 AdvancedMarkerElement 新增至地圖。

屬性
anchorLeft attr: anchor-left	類型： string optional 預設值：「-50%」 CSS 長度百分比值，用於從標記左上角偏移標記的錨點。如果使用的圖像錨點與預設標記的一般底部中心點不同，這個方法就非常實用。 HTML 屬性： anchor-left="string"
anchorTop attr: anchor-top	類型： string optional 預設值：「-100%」 CSS 長度百分比值，用於從標記左上角偏移標記的錨點。如果使用的圖像錨點與預設標記的一般底部中心點不同，這個方法就非常實用。 HTML 屬性： anchor-top="string"
collisionBehavior	類型： CollisionBehavior optional 詳情請參閱《AdvancedMarkerElementOptions.collisionBehavior》。
gmpClickable attr: gmp-clickable	類型： boolean optional 詳情請參閱《AdvancedMarkerElementOptions.gmpClickable》。 HTML 屬性： gmp-clickable
gmpDraggable	類型： boolean optional 詳情請參閱《AdvancedMarkerElementOptions.gmpDraggable》。
map	類型： Map optional 詳情請參閱《AdvancedMarkerElementOptions.map》。
position attr: position	類型： LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional 詳情請參閱《AdvancedMarkerElementOptions.position》。 HTML 屬性： position="lat,lng" position="lat,lng,altitude"
title attr: title	類型： string 詳情請參閱《AdvancedMarkerElementOptions.title》。 HTML 屬性： title="string"
zIndex	類型： number optional 詳情請參閱《AdvancedMarkerElementOptions.zIndex》。
element readonly	已淘汰：請直接使用 AdvancedMarkerElement。 類型： HTMLElement 這個欄位為唯讀。支援檢視畫面的 DOM 元素。
content	已淘汰：請改用 .children。 類型： Node optional 詳情請參閱《AdvancedMarkerElementOptions.content》。

方法
addListener	addListener(eventName, handler) 參數： eventName：string 觀測到的事件。 handler：Function 處理事件的函式。 傳回值： MapsEventListener 產生的事件監聽器。 將指定的事件監聽器函式，新增至 Maps 事件系統中的指定事件名稱。
繼承： addEventListener、removeEventListener

事件
click	function(event) 引數： event：MapMouseEvent 使用者點選 AdvancedMarkerElement 元素時，系統會觸發這個事件。 不適用於 addEventListener() (請改用 gmp-click)。
drag	function(event) 引數： event：MapMouseEvent 使用者拖曳AdvancedMarkerElement時，系統會重複觸發這個事件。 不適用於addEventListener()。
dragend	function(event) 引數： event：MapMouseEvent 使用者停止拖曳 AdvancedMarkerElement 時，系統會觸發這個事件。 不適用於addEventListener()。
dragstart	function(event) 引數： event：MapMouseEvent 使用者開始拖曳 AdvancedMarkerElement 時，系統會觸發這個事件。 不適用於addEventListener()。
gmp-click	function(event) 引數： event：AdvancedMarkerClickEvent 使用者點選 AdvancedMarkerElement 元素時，系統會觸發這個事件。建議搭配 addEventListener() 使用 (而非 addListener())。

AdvancedMarkerElementOptions 介面

google.maps.marker.AdvancedMarkerElementOptions 介面

建構 AdvancedMarkerElement 的選項。

屬性
anchorLeft 選填	類型： string optional 預設值：「-50%」 CSS 長度百分比值，用於從標記左上角偏移標記的錨點。如果使用的圖像錨點與預設標記的一般底部中心點不同，這個方法就非常實用。
anchorTop 選填	類型： string optional 預設值：「-100%」 CSS 長度百分比值，用於從標記左上角偏移標記的錨點。如果使用的圖像錨點與預設標記的一般底部中心點不同，這個方法就非常實用。
collisionBehavior 選填	類型： CollisionBehavior optional 這個列舉會指定 AdvancedMarkerElement 與其他 AdvancedMarkerElement 或向量地圖上的基本地圖標籤衝突時，應呈現的行為。 注意：AdvancedMarkerElement 與 AdvancedMarkerElement 衝突適用於光柵和向量地圖，但 AdvancedMarkerElement 與基本地圖標籤衝突僅適用於向量地圖。
content 選填	類型： Node optional 預設值： PinElement 支援 AdvancedMarkerElement 視覺效果的 DOM 元素。 注意：AdvancedMarkerElement 不會複製傳入的 DOM 元素，DOM 元素傳遞至 AdvancedMarkerElement 後，如果將同一個 DOM 元素傳遞至另一個 AdvancedMarkerElement，DOM 元素會移動，導致先前的 AdvancedMarkerElement 看起來是空的。
gmpClickable 選填	類型： boolean optional 預設值： false 如果 true，AdvancedMarkerElement 將可點擊並觸發 gmp-click 事件，且可互動以提供無障礙功能 (例如允許透過方向鍵進行鍵盤導覽)。
gmpDraggable 選填	類型： boolean optional 預設值： false 如果為 true，則可拖曳 AdvancedMarkerElement。 注意：含有高度的 AdvancedMarkerElement 無法拖曳。
map 選填	類型： Map optional 要顯示AdvancedMarkerElement的地圖。地圖必須顯示 AdvancedMarkerElement，如果建構時未提供，可以透過設定 AdvancedMarkerElement.map 提供。
position 選填	類型： LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional 設定 AdvancedMarkerElement 的位置。AdvancedMarkerElement 可以在沒有位置的情況下建構，但必須提供位置 (例如透過使用者的動作或選擇) 才會顯示。如果建構時未提供 AdvancedMarkerElement 的位置，可以設定 AdvancedMarkerElement.position 來提供。 注意：只有向量地圖支援含高度的 AdvancedMarkerElement。
title 選填	類型： string optional 滑鼠游標懸停效果文字。如果提供無障礙文字 (例如用於螢幕閱讀器)，系統會將該文字新增至 AdvancedMarkerElement，並使用提供的值。
zIndex 選填	類型： number optional 所有AdvancedMarkerElement都會按照 zIndex 順序顯示在地圖上，值較高的會比值較低的AdvancedMarkerElement優先顯示。根據預設，AdvancedMarkerElement 會依據在畫面上的垂直位置顯示，位置較低的 AdvancedMarkerElement 會顯示在位置較高的 AdvancedMarkerElement 前方。如果同時使用明確設定 zIndex 的標記和未設定的標記，可能會導致非預期的視覺效果。為確保行為可預測，建議您為所有標記設定 zIndex，或不設定。請注意，zIndex 也可用來判斷 CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY 進階標記之間的相對優先順序。zIndex 值越高，表示優先順序越高。

AdvancedMarkerClickEvent 類別

google.maps.marker.AdvancedMarkerClickEvent class
extends Event
library "marker"

點選進階標記時，系統會建立這個事件。使用 event.target.position 存取標記的位置。

const {AdvancedMarkerClickEvent} = await google.maps.importLibrary("marker");

PinElement 類別

google.maps.marker.PinElement class
extends HTMLElement
implements PinElementOptions
library "marker"

PinElement 代表由形狀和字符組成的 DOM 元素。形狀的對話框樣式與預設 AdvancedMarkerElement 或 Marker3DElement 相同。字元是選用的 DOM 元素，會顯示在氣球形狀中。PinElement 的顯示比例可能會因PinElement.scale而異。

const {PinElement} = await google.maps.importLibrary("marker");

建構函式
PinElement	PinElement([options]) 參數： options：PinElementOptions optional

屬性
background	類型： string optional 圖釘形狀的背景顏色。詳情請參閱《PinElementOptions.background》。
borderColor	類型： string optional 圖釘形狀的邊框顏色。詳情請參閱《PinElementOptions.borderColor》。
glyphColor	類型： string optional 圖釘字符的顏色。詳情請參閱《PinElementOptions.glyphColor》。
glyphSrc	類型： URL|string optional 圖釘中顯示的字符圖片來源。詳情請參閱《PinElementOptions.glyphSrc》。
glyphText	類型： string optional 圖釘中顯示的文字，詳情請參閱《PinElementOptions.glyphText》。
scale	類型： number optional 詳情請參閱《PinElementOptions.scale》。
element readonly	已淘汰：請直接使用 PinElement。 類型： HTMLElement 這個欄位為唯讀。支援檢視畫面的 DOM 元素。
glyph	已淘汰：請改用 PinElementOptions.glyphText 或 PinElementOptions.glyphSrc。 類型： string|Element|URL optional 詳情請參閱《PinElementOptions.glyph》。

方法
繼承： addEventListener、removeEventListener

PinElementOptions 介面

google.maps.marker.PinElementOptions 介面

建立PinElement的選項。

屬性
background 選填	類型： string optional 圖釘形狀的背景顏色。支援任何 CSS 顏色值。
borderColor 選填	類型： string optional 圖釘形狀的邊框顏色。支援任何 CSS 顏色值。
glyph 選填	已淘汰：請改用 PinElementOptions.glyphText 或 PinElementOptions.glyphSrc。 類型： string|Element|URL optional 圖釘中顯示的 DOM 元素。
glyphColor 選填	類型： string optional 字符的顏色。支援任何 CSS 顏色值。
glyphSrc 選填	類型： URL|string optional 圖釘中顯示的字符圖片來源。
glyphText 選填	類型： string optional 圖釘中顯示的文字。
scale 選填	類型： number optional 預設值： 1 圖釘的比例。