Marker class
google.maps.Marker
class
這個類別會擴充 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 contextmenu 事件時,就會觸發這個事件。 | 
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 發生 mouseup 時,系統會觸發這個事件。 | 
position_changed | 
function()引數:無 
當  Marker 位置屬性變更時,系統會觸發這個事件。 | 
shape_changed | 
function()引數:無 
Marker 形狀屬性變更時,就會觸發這個事件。 | 
title_changed | 
function()引數:無 
Marker 標題屬性變更時,就會觸發這個事件。 | 
visible_changed | 
function()引數:無 
當  Marker visible 屬性變更時,系統會觸發這個事件。 | 
zindex_changed | 
function()引數:無 
Marker zIndex 屬性變更時,系統會觸發這個事件。 | 
 | 
function(event)引數:   
 在  Marker 上按一下滑鼠右鍵時,系統會觸發這個事件。 | 
MarkerOptions interface
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,則可拖曳標記。注意:即使 clickable 設為 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 interface
google.maps.MarkerLabel
介面
這些選項會指定標記標籤的外觀。標記標籤是顯示在標記內的字串 (通常是單一字元)。如果搭配自訂標記使用,可以透過 Icon 類別中的 labelOrigin 屬性重新調整位置。
屬性 | |
|---|---|
text | 
類型:   
string要在標籤中顯示的文字。  | 
className optional | 
類型:   
string optional預設值:  
'' (空字串)標籤元素的 className 屬性 (相當於元素的 class 屬性)。您可以新增多個以空格分隔的 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 兩個屬性組成,可定義圖片的不透明區域。
屬性 | |
|---|---|
type | 
類型:   
string說明形狀的類型,可以是  circle、poly 或 rect。 | 
coords optional | 
類型:   
Array<number> optional這項屬性的格式取決於  type 的值,並遵循 w3 AREA coords 規格 (請參閱  http://www.w3.org/TR/REC-html40/struct/objects.html#adef-coords)。coords 屬性是整數陣列,可指定形狀相對於目標圖片左上角的像素位置。座標取決於 type 的值,如下所示:- circle:coords 為 [x1,y1,r],其中 x1、y2 是圓心的座標,r 則是圓的半徑。- poly:coords 為 [x1,y1,x2,y2...xn,yn],其中每個 x、y 配對都包含多邊形一個頂點的座標。- rect:coords 為 [x1,y1,x2,y2],其中 x1、y1 是矩形左上角的座標,x2、y2 則是矩形右下角的座標。 | 
符號 介面
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 的 Marker.setAnimation 方法或 MarkerOptions.animation 選項播放動畫。
撥打 const {Animation} = await google.maps.importLibrary("marker") 即可存取。
請參閱「Maps JavaScript API 中的程式庫」。
常數 | |
|---|---|
BOUNCE | 
標記會彈跳,直到呼叫 Marker.setAnimation 並傳遞 null 來停止動畫為止。 | 
DROP | 
標記從地圖頂端落到最終位置。當標記停止時,動畫會隨之停止,且 Marker.getAnimation 會還原為 null。這類動畫通常是在建立標記時指定。 |