Advanced Markers

AdvancedMarkerElement 類別

google.maps.marker.AdvancedMarkerElement 類別

在地圖上顯示位置。請注意,您必須為 AdvancedMarkerElement 設定 position,才能顯示。

注意:可做為網路元件使用 (例如使用自訂 <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
element
類型:  HTMLElement
這是唯讀欄位。支持檢視畫面的 DOM 元素。
BetagmpClickable
類型:  boolean optional
gmpDraggable
類型:  boolean optional
map
類型:  Map optional
position
HTML 屬性:
  • <gmp-advanced-marker position="lat,lng"></gmp-advanced-marker>
  • <gmp-advanced-marker position="lat,lng,altitude"></gmp-advanced-marker>
title
類型:  string
HTML 屬性:
  • <gmp-advanced-marker title="string"></gmp-advanced-marker>
zIndex
類型:  number optional
BetaaddEventListener
addEventListener(type, listener[, options])
參數: 
  • typestring 字串會區分大小寫,代表要監聽的事件類型。
  • listenerEventListener|EventListenerObject接收通知的物件。這必須是函式或具備 handleEvent 方法的物件
  • optionsboolean|AddEventListenerOptions optional查看選項。自訂事件僅支援 capturepassive
傳回值:  void
設定函式,每當指定事件傳送至目標時,就會呼叫這個函式。請參閱 addEventListener
addListener
addListener(eventName, handler)
參數: 
  • eventNamestring 觀察到的事件。
  • handlerFunction 用於處理事件的函式。
回傳值:  MapsEventListener 產生的事件監聽器。
將特定的事件監聽器函式新增至地圖事件系統中的特定事件名稱。
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
支持 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 順序顯示在地圖上,值較高的值會顯示在值較低的 AdvancedMarkerElements 前面。根據預設,AdvancedMarkerElement 會根據螢幕上的垂直位置顯示,而較低的 AdvancedMarkerElement 則出現在螢幕較遠處的 AdvancedMarkerElement 前方。請注意,zIndex 也可用於判斷 CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY 進階標記之間的相對優先順序。zIndex 值越高,表示優先順序越高。

AdvancedMarkerClickEvent 類別

google.maps.marker.AdvancedMarkerClickEvent 類別

此事件會從按一下進階標記開始建立。使用 event.target.position 存取標記位置。

這個類別會擴充 Event

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

PinElement 類別

google.maps.marker.PinElement 類別

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
borderColor
類型:  string optional
element
類型:  HTMLElement
這是唯讀欄位。支持檢視畫面的 DOM 元素。
glyph
類型:  string|Element|URL optional
glyphColor
類型:  string optional
scale
類型:  number optional
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
圖釘的縮放比例。