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 觀察到的事件。
  • handler:用於處理事件的 Function 函式。
回傳值:  MapsEventListener 產生的事件監聽器。
在 Maps 事件系統中,將指定的事件名稱新增至指定的事件監聽器函式。
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 或向量地圖上的 basemap 標籤衝突時的行為。

注意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 而異。

注意:目前不支援將此元素用於網頁元件 (例如用作 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 介面

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
圖釘的比例。