Marker 類別
google.maps.Marker 類別
這個類別會擴充 MVCObject。
呼叫 const {Marker} = await google.maps.importLibrary("marker") 即可存取。請參閱 Maps JavaScript API 中的程式庫。
建構函式 | |
|---|---|
Marker |
Marker([opts])參數：
使用指定的選項建立標記。如果有指定地圖，則標記會在建構時加進地圖。請注意，必須為標記設定要顯示的位置。 |
常數 | |
|---|---|
MAX_ZINDEX |
API 將會指派給標記的最大預設 Z 索引。您可以設定較高的 Z 索引，將標記置於最前方。 |
方法 | |
|---|---|
getAnimation |
getAnimation()參數：無
傳回值：
Animation|null|undefined取得目前正在執行的動畫。 |
getClickable |
getClickable()參數：無
傳回值：
boolean如果標記可點擊，則為 True。取得 Marker 的可點擊狀態。 |
getCursor |
getCursor()參數：無
傳回值：
string|null|undefined懸停時顯示滑鼠遊標類型。 |
getDraggable |
getDraggable()參數：無
傳回值：
boolean如果標記可拖曳，則為 True。取得 Marker 的可拖曳狀態。 |
getIcon |
getIcon()參數：無
取得 Marker 的圖示。查看《MarkerOptions.icon》。 |
getLabel |
getLabel()參數：無
傳回值：
MarkerLabel|string|null|undefined取得 Marker 的標籤。查看《MarkerOptions.label》。 |
getMap |
getMap()參數：無
傳回值：
Map|StreetViewPanorama取得算繪 Marker 的地圖或全景。 |
getOpacity |
getOpacity()參數：無
傳回值：
number|null|undefined 介於 0.0 和 1.0 之間的數字。取得 Marker 的不透明度。 |
getPosition |
getPosition()參數：無
傳回值：
LatLng|null|undefined取得 Marker 的位置。 |
getShape |
getShape()參數：無
傳回值：
MarkerShape|null|undefined |
getTitle |
getTitle()參數：無
傳回值：
string|null|undefined取得 Marker 工具提示的標題。查看《MarkerOptions.title》。 |
getVisible |
getVisible()參數：無
回傳值：
boolean 如果看得見標記，則傳回 True。取得 Marker 的瀏覽權限。 |
getZIndex |
getZIndex()參數：無
傳回值：標記的
number|null|undefined zIndex。取得 Marker 的 zIndex。查看《MarkerOptions.zIndex》。 |
setAnimation |
setAnimation([animation])參數：
傳回值：無
|
setClickable |
setClickable(flag)參數：
傳回值：無
如果 Marker 可點擊，請設定此屬性。 |
setCursor |
setCursor([cursor])參數：
傳回值：無
設定懸停時顯示的滑鼠遊標類型。 |
setDraggable |
setDraggable(flag)參數：
傳回值：無
如果 Marker 可以拖曳，請設定。 |
setIcon |
setIcon([icon])傳回值：無
設定 Marker 的圖示。查看《MarkerOptions.icon》。 |
setLabel |
setLabel([label])參數：
傳回值：無
設定 Marker 的標籤。查看《MarkerOptions.label》。 |
setMap |
setMap(map)參數：
傳回值：無
在指定的地圖或全景上呈現 Marker。如果地圖設為 null，系統就會移除標記。 |
setOpacity |
setOpacity([opacity])參數：
傳回值：無
設定 Marker 的不透明度。 |
setOptions |
setOptions(options)參數：
傳回值：無
設定 Marker 的選項。 |
setPosition |
setPosition([latlng])參數：
傳回值：無
設定 Marker 的排序。 |
setShape |
setShape([shape])參數：
傳回值：無
|
setTitle |
setTitle([title])參數：
傳回值：無
設定 Marker 工具提示的標題。查看《MarkerOptions.title》。 |
setVisible |
setVisible(visible)參數：
傳回值：無
設定是否顯示 Marker。 |
setZIndex |
setZIndex([zIndex])參數：
傳回值：無
設定 Marker 的 zIndex。查看《MarkerOptions.zIndex》。 |
沿用：
addListener、bindTo、get、notify、set、setValues、unbind、unbindAll
| |
活動 | |
|---|---|
animation_changed |
function()引數：無
當 Marker 動畫屬性變更時，會觸發此事件。 |
click |
function(event)引數：
按一下 Marker 圖示時，會觸發此事件。 |
clickable_changed |
function()引數：無
當 Marker 可點擊的屬性變更時，會觸發此事件。 |
contextmenu |
function(event)引數：
在 Marker 引發 DOM 內容選單事件時，會觸發此事件 |
cursor_changed |
function()引數：無
當 Marker 遊標屬性變更時，會觸發此事件。 |
dblclick |
function(event)引數：
按兩下 Marker 圖示時，會觸發此事件。 |
drag |
function(event)引數：
使用者拖曳 Marker 時，會重複觸發此事件。 |
dragend |
function(event)引數：
使用者停止拖曳 Marker 時，會觸發此事件。 |
draggable_changed |
function()引數：無
當 Marker 可拖曳屬性變更時，會觸發此事件。 |
dragstart |
function(event)引數：
使用者開始拖曳 Marker 時，會觸發此事件。 |
flat_changed |
function()引數：無
當 Marker 平面屬性變更時，會觸發這個事件。 |
icon_changed |
function()引數：無
當 Marker 圖示屬性變更時，會觸發此事件。 |
mousedown |
function(event)引數：
在 Marker 上出現 Mousedown 時，系統會觸發此事件。 |
mouseout |
function(event)引數：
滑鼠離開 Marker 圖示的區域時，會觸發此事件。 |
mouseover |
function(event)引數：
滑鼠進入 Marker 圖示的區域時，會引發此事件。 |
mouseup |
function(event)引數：
在 Marker 上出現滑鼠指標時會觸發此事件。 |
position_changed |
function()引數：無
當 Marker 位置屬性變更時，會觸發此事件。 |
shape_changed |
function()引數：無
當 Marker 形狀屬性變更時，會觸發這個事件。 |
title_changed |
function()引數：無
當 Marker 標題屬性變更時，會觸發這個事件。 |
visible_changed |
function()引數：無
當 Marker 可見屬性變更時，會觸發此事件。 |
zindex_changed |
function()引數：無
當 Marker zIndex 屬性變更時，會觸發這個事件。 |
|
function(event)引數：
在 Marker 上按一下滑鼠右鍵時會觸發此事件。 |
MarkerOptions 介面
google.maps.MarkerOptions
介面
MarkerOptions 物件用於定義可以在 Marker 上設定的屬性。
屬性 | |
|---|---|
anchorPoint optional |
類型：
Point optional從標記的位置到資訊視窗是以標記做為錨定開啟的 InfoWindow 尖端的偏移值。 |
animation optional |
類型：
Animation optional預設：
null在地圖中新增標記時所要播放的動畫。 |
clickable optional |
類型：
boolean optional預設：
true如果為 true，標記會接收滑鼠和觸控事件。 |
|
類型：
string|CollisionBehavior optional預設：
null設定向量地圖上的標記衝突行為。 |
crossOnDrag optional |
類型：
boolean optional預設：
true如果為 false，會在拖曳時停用標記下方顯示的交叉符號。 |
cursor optional |
類型：
string optional預設：
pointer懸停時顯示的滑鼠遊標類型。 |
draggable optional |
類型：
boolean optional預設：
false如果為 true，則可拖曳標記。 |
icon optional |
前景的圖示。如果提供字串，系統會將字串視為 Icon，且字串為 url。 |
label optional |
類型：
string|MarkerLabel optional預設：
null為標記新增標籤。標記標籤是顯示在標記內的字母或數字。標籤可以是字串或 MarkerLabel 物件。如果未提供 MarkerOptions.title，且未提供 MarkerOptions.title，則會將無障礙文字 (例如與螢幕閱讀器搭配使用) 加入標記，其中包含提供的標籤文字。請注意，label 目前僅適用於未最佳化標記的無障礙文字。 |
map optional |
類型：
Map|StreetViewPanorama optional要顯示標記的地圖。您必須使用地圖才能顯示標記，如果建構標記時沒有提供，則可與 Marker.setMap 一併提供。 |
opacity optional |
類型：
number optional預設值：1.0
介於 0.0、透明和 1.0 (不透明) 之間的數字。 |
optimized optional |
類型：
boolean optional您可進行最佳化處理來將多個標記算繪為單一靜態元素，藉此提升效能；這個做法在需要使用大量標記時相當實用。進一步瞭解標記最佳化。 |
position optional |
類型：
LatLng|LatLngLiteral optional設定標記位置。標記可以建構，但必須先提供標記的位置才會顯示，例如使用者的動作或選項。如果在建構標記時未提供標記位置，可以利用 Marker.setPosition 提供標記位置。 |
shape optional |
類型：
MarkerShape optional用於拖曳/點擊的圖片地圖區域定義。 |
title optional |
類型：
string optional預設：
undefined滑鼠遊標懸停效果文字。如有提供，系統會透過提供的值在標記中加入無障礙文字 (例如與螢幕閱讀器搭配使用)。請注意， title 目前僅適用於未最佳化標記的無障礙文字。 |
visible optional |
類型：
boolean optional預設：
true如果為 true，則會顯示標記。 |
zIndex optional |
類型：
number optional所有標記都會依其 zIndex 順序顯示，較大的標記值會顯示在值較小的標記值之前。根據預設，標記會依據其在畫面上的垂直位置顯示，而較小的標記將會顯示在畫面上方的標記之前。 |
CollisionBehavior 常數
google.maps.CollisionBehavior 常數
呼叫 const {CollisionBehavior} = await google.maps.importLibrary("marker") 即可存取。請參閱 Maps JavaScript API 中的程式庫。
常數 | |
|---|---|
OPTIONAL_AND_HIDES_LOWER_PRIORITY |
僅在沒有重疊情況的情況下顯示標記。如果這個類型的兩個標記重疊，系統會顯示 zIndex 較高的標記。如果兩者的 zIndex 相同，系統會顯示直向畫面位置較低的 zIndex。 |
REQUIRED |
無論是哪一種衝突，一律顯示標記。此為預設行為。 |
REQUIRED_AND_HIDES_OPTIONAL |
無論是哪一種衝突，一律顯示標記，並隱藏任何與標記重疊的 OPTIONAL_AND_HIDES_LOWER_PRIORITY 標記或標籤。 |
圖示介面
google.maps.Icon
介面
代表標記圖示圖片的結構。
屬性 | |
|---|---|
url |
類型：
string圖片或綜合連續圖片的網址。 |
anchor optional |
類型：
Point optional依據標記在地圖上的位置，固定圖片的位置。錨點的預設位置在圖片下方的中心點。 |
labelOrigin optional |
類型：
Point optional標籤相對於圖示圖片左上角的標籤起點 (如果標記是由標記提供)。根據預設，起點會位於圖片的中心點。 |
origin optional |
類型：
Point optional綜合圖片內圖片的位置 (如果有)。起點的預設位置在圖片 (0, 0) 的左上角。 |
scaledSize optional |
類型：
Size optional縮放之後整個圖片的大小 (如果有)。您可以使用此屬性拉伸/縮短圖片或綜合圖片。 |
size optional |
類型：
Size optional綜合圖片或圖片的顯示大小。使用綜合圖片時，您必須指定綜合圖片的大小。如未提供大小，系統會在載入圖片時加以設定。 |
MarkerLabel 介面
google.maps.MarkerLabel
介面
這些選項可指定標記標籤的外觀。標記標籤是會顯示在標記內的字串 (通常是單一字元)。如果您將標記與自訂標記搭配使用，可以使用 Icon 類別中的 labelOrigin 屬性重新定位。
屬性 | |
|---|---|
text |
類型：
string標籤中顯示的文字。 |
className optional |
類型：
string optional預設：
'' (空白字串)標籤元素的 className 屬性 (相當於元素的類別屬性)。可新增多個以空格分隔的 CSS 類別。字型顏色、大小、粗細和系列只能透過 MarkerLabel 的其他屬性設定。如果同時使用標記衝突管理，也不應使用 CSS 類別變更標籤的位置或方向 (例如使用翻譯和旋轉)。 |
color optional |
類型：
string optional預設：
'black'標籤文字的顏色。 |
fontFamily optional |
類型：
string optional標籤文字的字型系列 (相當於 CSS font-family 屬性)。 |
fontSize optional |
類型：
string optional預設：
'14px'標籤文字的字型大小 (相當於 CSS font-size 屬性)。 |
fontWeight optional |
類型：
string optional標籤文字的字型粗細 (相當於 CSS font-weight 屬性)。 |
MarkerShape 介面
google.maps.MarkerShape
介面
這個物件會定義標記圖片的可點擊區域。形狀包含 type 和 coord 這兩個屬性，用於定義圖片的不透明區域。
屬性 | |
|---|---|
coords |
類型：
Array<number>此屬性的格式取決於 type 的值，並遵循 w3 AREA coords 規格 (請參閱 http://www.w3.org/TR/REC-html40/struct/objects.html#adef-coords)。coords 屬性是整數陣列，指定相對於目標圖片左上角的形狀像素位置。座標取決於 type 的值，如下所示：- circle：座標為 [x1,y1,r]，其中 x1,y2 是圓形中心的座標，r 則是圓形的半徑。- poly：座標為 [x1,y1,x2,y2...xn,yn]，其中每個 x,y 配對都包含多邊形單一端點的座標。- rect：座標為 [x1,y1,x2,y2]，其中 x1,y1 是矩形左上角的座標，而 x2,y2 則是矩形右下角的座標。 |
type |
類型：
string說明形狀的類型，可以是 circle、poly 或 rect。 |
Symbol 介面
google.maps.Symbol
介面
說明符號，包含樣式的向量路徑。符號可以當做標記的圖示，也可以放在折線上。
屬性 | |
|---|---|
path |
類型：
SymbolPath|string符號的路徑 (內建符號路徑)，或是以 SVG 路徑標記法表示的自訂路徑。這是必填欄位。 |
anchor optional |
類型：
Point optional預設：
google.maps.Point(0,0)相對於標記或折線的符號位置。符號的路徑座標會分別根據錨點的 x 和 y 座標轉譯成左方和上方的位置。位置會使用與符號路徑相同的座標系統表示。 |
fillColor optional |
類型：
string optional符號的填滿顏色。系統支援所有 CSS3 色彩 (延伸的具名色彩除外)。至於符號標記，則預設值為「black」。折線上的符號會預設為相應折線的筆劃顏色。 |
fillOpacity optional |
類型：
number optional預設：
0符號的填滿不透明度。 |
labelOrigin optional |
類型：
Point optional預設：
google.maps.Point(0,0)標籤相對於路徑起點的標籤來源 (如果標記提供標籤)。起點會以與符號路徑相同的座標系統表示。折線上的符號未使用這個屬性。 |
rotation optional |
類型：
number optional預設：
0符號的順時針旋轉角度，以度為單位。 IconSequence 中的符號 (其中 fixedRotation 為 false) 會根據其所在邊緣的角度旋轉。 |
scale optional |
類型：
number optional符號的大小縮放比例。對符號標記而言，此值預設為 1；縮放之後，該符號可以是任何大小。至於折線上的符號，這會預設為折線的筆劃粗細；縮放後，該符號必須置於正方形錨點的方形 22 像素內，並以符號錨點為中心。 |
strokeColor optional |
類型：
string optional符號的筆觸顏色。系統支援所有 CSS3 色彩 (延伸的具名色彩除外)。至於符號標記，則預設值為「black」。折線上的符號則預設為折線的筆劃顏色。 |
strokeOpacity optional |
類型：
number optional符號的筆觸不透明度。若是符號標記，則預設為 1。至於折線上的符號，則預設為折線的筆觸不透明度。 |
strokeWeight optional |
類型：
number optional預設：符號的
Symbol.scale。符號的筆觸粗細。 |
SymbolPath 常數
google.maps.SymbolPath 常數
內建符號路徑。
呼叫 const {SymbolPath} = await google.maps.importLibrary("core") 即可存取。請參閱 Maps JavaScript API 中的程式庫。
常數 | |
|---|---|
BACKWARD_CLOSED_ARROW |
向後收尾的箭頭。 |
BACKWARD_OPEN_ARROW |
向後指向的箭頭。 |
CIRCLE |
圓形。 |
FORWARD_CLOSED_ARROW |
向前的封閉箭頭。 |
FORWARD_OPEN_ARROW |
指向前方的開放箭頭。 |
動畫常數
google.maps.Animation 常數
可在標記上播放的動畫。在標記上使用 Marker.setAnimation 方法或 MarkerOptions.animation 選項，即可播放動畫。
呼叫 const {Animation} = await google.maps.importLibrary("marker") 即可存取。請參閱 Maps JavaScript API 中的程式庫。
常數 | |
|---|---|
BOUNCE |
使用 null 呼叫 Marker.setAnimation 後，標記會跳出，直到動畫停止為止。 |
DROP |
標記會從地圖頂端落到最終位置。當標記停止時，動畫會停止，而 Marker.getAnimation 會傳回 null。這種類型的動畫通常會在建立標記時指定。 |