Marker 類別
google.maps.Marker
類別
這個類別會擴充 MVCObject
。
呼叫 const {Marker} = await google.maps.importLibrary("marker")
即可存取。請參閱 Maps JavaScript API 中的程式庫。
建構函式 | |
---|---|
Marker |
Marker([opts]) 參數:
使用指定選項建立標記。如果指定了地圖,系統會在建立地圖時將標記加入地圖。請注意,必須為標記設定要顯示的位置。 |
方法 | |
---|---|
getAnimation |
getAnimation() 參數:無
傳回價值:
Animation|null|undefined 取得目前執行的動畫。 |
getClickable |
getClickable() 參數:無
回傳值:如果標記可點擊,則為
boolean 。取得 Marker 的可點擊狀態。 |
getCursor |
getCursor() 參數:無
傳回價值:
string|null|undefined 取得滑鼠遊標懸停時會顯示的滑鼠遊標類型。 |
getDraggable |
getDraggable() 參數:無
傳回值:如果標記可拖曳,則為
boolean 。取得 Marker 的可拖曳狀態。 |
getIcon |
getIcon() 參數:無
取得 Marker 的圖示。查看《MarkerOptions.icon 》。 |
getLabel |
getLabel() 參數:無
傳回價值:
MarkerLabel|null|string|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 。取得 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 |
常數 | |
---|---|
MAX_ZINDEX |
API 將會指派給標記的最大預設 Z 索引。您可以設定較高的 Z 索引,將標記置於最前方。 |
事件 | |
---|---|
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 上觸發滑鼠遊標。 |
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) 物件。
屬性 | |
---|---|
anchorPoint optional |
類型:
Point optional 從標記位置到以資訊視窗做為資訊視窗開啟的資訊視窗視窗的位移。 |
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 ,則無障礙標籤 (例如與螢幕閱讀器搭配使用) 會加到含有指定標籤文字的標記上。請注意,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 相同,系統會顯示直向畫面位置較低的標記。 |
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 字型大小屬性)。 |
fontWeight optional |
類型:
string optional 標籤文字的字型粗細 (相當於 CSS 字型權重屬性)。 |
MarkerShape 介面
google.maps.MarkerShape
介面
這個物件會定義標記圖片的可點擊區域。形狀包含兩個屬性,分別是 type
和 coord
,後者定義了圖片的非透明區域。
屬性 | |
---|---|
coords |
類型:
Array<number> 這個屬性的格式取決於 type 的值,並遵循 http://www.w3.org/TR/REC-html40/struct/objects.html#adef-coords 中的 w3 AREA coords 規格。coords 屬性為整數陣列,指定與目標圖片左上角形狀的像素位置。座標取決於 type 的值,如下所示:- circle :coord 為 [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 色彩 (延伸的具名色彩除外)。標記符號的預設值為「黑色」。折線上的符號則預設為相應折線的線條顏色。 |
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 色彩 (延伸的具名色彩除外)。標記符號的預設值為「黑色」。折線上的符號則預設為折線的線條顏色。 |
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 。這類動畫通常會在建立標記時指定。 |