Advanced Markers

AdvancedMarkerElement 類別

google.maps.marker.AdvancedMarkerElement class

在地圖上顯示位置。請注意,必須設定 positionAdvancedMarkerElement 才會顯示。

注意:以網頁元件形式使用 (例如使用自訂 <gmp-advanced-marker> HTML 元素) 僅適用於 v=beta 版本。

自訂元素:
<gmp-advanced-marker position="lat,lng" title="string"></gmp-advanced-marker>

這個類別會擴充 HTMLElement

這個類別會實作 AdvancedMarkerElementOptions

撥打 const {AdvancedMarkerElement} = await google.maps.importLibrary("marker") 即可存取。
請參閱「Maps JavaScript API 中的程式庫」。

AdvancedMarkerElement
AdvancedMarkerElement([options])
參數: 
使用指定的選項建立 AdvancedMarkerElement。如果指定地圖,系統會在建構時將 AdvancedMarkerElement 新增至地圖。
collisionBehavior
類型:  CollisionBehavior optional
content
類型:  Node optional
詳情請參閱《AdvancedMarkerElementOptions.content》。
element
類型:  HTMLElement
這是唯讀欄位。支援檢視區塊的 DOM 元素。
BetagmpClickable
類型:  boolean optional
gmpDraggable
類型:  boolean optional
map
類型:  Map optional
詳情請參閱《AdvancedMarkerElementOptions.map》。
position
HTML 屬性:
  • <gmp-advanced-marker position="lat,lng"></gmp-advanced-marker>
  • <gmp-advanced-marker position="lat,lng,altitude"></gmp-advanced-marker>
title
類型:  string
詳情請參閱《AdvancedMarkerElementOptions.title》。
HTML 屬性:
  • <gmp-advanced-marker title="string"></gmp-advanced-marker>
zIndex
類型:  number optional
詳情請參閱《AdvancedMarkerElementOptions.zIndex》。
BetaaddEventListener
addEventListener(type, listener[, options])
參數: 
  • typestring代表要監聽的事件類型,且區分大小寫。
  • listenerEventListener|EventListenerObject接收通知的物件。這必須是函式或包含 handleEvent 方法的物件
  • optionsboolean|AddEventListenerOptions optional請參閱選項。自訂事件僅支援 capturepassive
傳回值:  void
設定函式,每當指定事件傳送至目標時,系統就會呼叫該函式。請參閱 addEventListener
addListener
addListener(eventName, handler)
參數: 
  • eventNamestring觀察到的事件。
  • handlerFunction 處理事件的函式。
回傳值:  MapsEventListener產生的事件監聽器。
在 Google 地圖事件系統中,將指定監聽器函式新增至指定事件名稱。
BetaremoveEventListener
removeEventListener(type, listener[, options])
參數: 
傳回值:  void
從目標中移除先前透過 addEventListener 註冊的事件監聽器。請參閱「removeEventListener」。
click
function(event)
引數: 
點選 AdvancedMarkerElement 元素時,系統會觸發此事件。

不適用於 addEventListener() (請改用 gmp-click)。
drag
function(event)
引數: 
使用者拖曳 AdvancedMarkerElement 時,系統會重複觸發這個事件。

無法搭配 addEventListener() 使用。
dragend
function(event)
引數: 
使用者停止拖曳 AdvancedMarkerElement 時,系統會觸發這個事件。

無法搭配 addEventListener() 使用。
dragstart
function(event)
引數: 
使用者開始拖曳 AdvancedMarkerElement 時,系統會觸發這個事件。

無法搭配 addEventListener() 使用。
Betagmp-click
function(event)
引數: 
點選 AdvancedMarkerElement 元素時,系統會觸發這項事件。建議搭配 addEventListener() 使用 (而非 addListener())。

AdvancedMarkerElementOptions 介面

google.maps.marker.AdvancedMarkerElementOptions 介面

建構 AdvancedMarkerElement 的選項。

collisionBehavior optional
類型:  CollisionBehavior optional
列舉,指定 AdvancedMarkerElement 與其他 AdvancedMarkerElement 或向量地圖上的基本地圖標籤衝突時應呈現的行為。

注意AdvancedMarkerElementAdvancedMarkerElement 衝突適用於光柵和向量地圖,但 AdvancedMarkerElement 對基本地圖標籤衝突僅適用於向量地圖。

content optional
類型:  Node optional
預設值: PinElement.element
支援 AdvancedMarkerElement 視覺效果的 DOM 元素。

注意AdvancedMarkerElement 不會複製傳入的 DOM 元素。將 DOM 元素傳遞至 AdvancedMarkerElement 後,如果將相同 DOM 元素傳遞至另一個 AdvancedMarkerElement,系統會移動 DOM 元素,導致先前的 AdvancedMarkerElement 顯示為空白。

BetagmpClickable optional
類型:  boolean optional
預設值: false
如果是 trueAdvancedMarkerElement 會變成可點擊,並觸發 gmp-click 事件,且會為了無障礙功能而具備互動性 (例如允許透過方向鍵進行鍵盤導覽)。
gmpDraggable optional
類型:  boolean optional
預設值: false
如果為 true,則可拖曳 AdvancedMarkerElement

注意AdvancedMarkerElement 無法拖曳。

map optional
類型:  Map optional
要顯示 AdvancedMarkerElement 的地圖。地圖必須顯示 AdvancedMarkerElement,如果建構時未提供地圖,可以設定 AdvancedMarkerElement.map
position optional
設定 AdvancedMarkerElement 的位置。AdvancedMarkerElement 可能會建構但不含位置,但必須提供位置 (例如透過使用者的動作或選擇) 才會顯示。如果未在建構時提供 AdvancedMarkerElement 的位置,可以透過設定 AdvancedMarkerElement.position 提供。

注意AdvancedMarkerElement 海拔高度僅適用於向量地圖。

title optional
類型:  string optional
滑鼠游標懸停效果文字。如果提供無障礙文字 (例如搭配螢幕閱讀器使用),系統會將該值新增至 AdvancedMarkerElement
zIndex optional
類型:  number optional
所有 AdvancedMarkerElement 皆按照 zIndex 順序顯示在地圖上,值較高的 AdvancedMarkerElement 會比值較低的 AdvancedMarkerElement 優先顯示。根據預設,AdvancedMarkerElement 會根據在畫面上的垂直位置顯示,較低的 AdvancedMarkerElement 會顯示在畫面較上方 AdvancedMarkerElement 的前方。請注意,zIndex 也可用於判斷 CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY 進階標記之間的相對優先順序。zIndex 值越高,表示優先順序越高。

AdvancedMarkerClickEvent 類別

google.maps.marker.AdvancedMarkerClickEvent class

這項事件是點選進階標記後建立的。使用 event.target.position 存取標記的位置。

這個類別會擴充 Event

撥打 const {AdvancedMarkerClickEvent} = await google.maps.importLibrary("marker") 即可存取。
請參閱「Maps JavaScript API 中的程式庫」。

PinElement 類別

google.maps.marker.PinElement class

PinElement 代表由形狀和字形組成的 DOM 元素。形狀的氣球樣式與預設 AdvancedMarkerElement 相同。字形是顯示在氣球形狀中的選用 DOM 元素。PinElement的長寬比可能因PinElement.scale而異。

注意:目前不支援以 Web 元件的形式使用 (例如以 HTMLElement 子類別的形式使用,或透過 HTML 使用)。

這個類別會擴充 HTMLElement

這個類別會實作 PinElementOptions

撥打 const {PinElement} = await google.maps.importLibrary("marker") 即可存取。
請參閱「Maps JavaScript API 中的程式庫」。

PinElement
PinElement([options])
參數: 
background
類型:  string optional
詳情請參閱《PinElementOptions.background》。
borderColor
類型:  string optional
詳情請參閱《PinElementOptions.borderColor》。
element
類型:  HTMLElement
這是唯讀欄位。支援檢視區塊的 DOM 元素。
glyph
類型:  string|Element|URL optional
詳情請參閱《PinElementOptions.glyph》。
glyphColor
類型:  string optional
詳情請參閱《PinElementOptions.glyphColor》。
scale
類型:  number optional
詳情請參閱《PinElementOptions.scale》。
BetaaddEventListener
addEventListener(type, listener[, options])
參數: 
傳回值:  void
這項功能尚未開放使用。
BetaremoveEventListener
removeEventListener(type, listener[, options])
參數: 
傳回值:  void
從目標中移除先前透過 addEventListener 註冊的事件監聽器。請參閱「removeEventListener」。

PinElementOptions interface

google.maps.marker.PinElementOptions 介面

建立 PinElement 的選項。

background optional
類型:  string optional
圖釘形狀的背景顏色。支援任何 CSS 顏色值
borderColor optional
類型:  string optional
圖釘形狀的邊框顏色。支援任何 CSS 顏色值
glyph optional
類型:  string|Element|URL optional
顯示在圖釘中的 DOM 元素。
glyphColor optional
類型:  string optional
字形的顏色。支援任何 CSS 顏色值
scale optional
類型:  number optional
預設值: 1
圖釘的比例。