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
查看《AdvancedMarkerElementOptions.collisionBehavior》。
content
類型：  Node optional
查看《AdvancedMarkerElementOptions.content》。
element
類型：  HTMLElement
這是唯讀欄位。支持檢視畫面的 DOM 元素。
BetagmpClickable
類型：  boolean optional
查看《BetaAdvancedMarkerElementOptions.gmpClickable》。
gmpDraggable
類型：  boolean optional
查看《AdvancedMarkerElementOptions.gmpDraggable》。
map
類型：  Map optional
查看《AdvancedMarkerElementOptions.map》。
position
查看《AdvancedMarkerElementOptions.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])
參數： 
  • type：string 字串會區分大小寫，代表要監聽的事件類型。
  • listener：EventListener|EventListenerObject接收通知的物件。這必須是函式或具備 handleEvent 方法的物件
  • options：boolean|AddEventListenerOptions optional查看選項。自訂事件僅支援 capture 和 passive。
傳回值：  void
設定函式，每當指定事件傳送至目標時，就會呼叫這個函式。請參閱 addEventListener
addListener
addListener(eventName, handler)
參數： 
  • eventName：string 觀察到的事件。
  • handler：Function 用於處理事件的函式。
回傳值：  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 或向量地圖上的基本地圖標籤衝突時，應如何行為。

注意：AdvancedMarkerElement 到 AdvancedMarkerElement 的衝突同時適用於光柵地圖和向量地圖，不過，基礎地圖的標籤衝突的 AdvancedMarkerElement 僅適用於向量地圖。
content optional
類型：  Node optional
支持 AdvancedMarkerElement 視覺視覺效果的 DOM 元素。

注意：AdvancedMarkerElement 不會複製傳入的 DOM 元素。將 DOM 元素傳遞至 AdvancedMarkerElement 後，將同一個 DOM 元素傳送給另一個 AdvancedMarkerElement 就會移動 DOM 元素，並導致先前的 AdvancedMarkerElement 看起來為空白。
BetagmpClickable optional
類型：  boolean optional
預設： false
如果設為 true，AdvancedMarkerElement 可供點擊並觸發 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
查看《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
圖釘的縮放比例。