Maps

Map 類別

google.maps.Map class

這個類別會擴充 MVCObject

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

Map
Map(mapDiv[, opts])
參數: 
  • mapDivHTMLElement 地圖會算繪至此元素,以填滿整個元素。
  • optsMapOptions optional 選項
在指定的 HTML 容器 (通常是指 DIV 元素) 中建立新的地圖。
DEMO_MAP_ID 地圖 ID,可用於需要地圖 ID 的程式碼範例。這個地圖 ID 不適用於實際應用程式,也無法用於需要雲端設定的功能 (例如 Cloud 樣式設定)。
controls
類型:  Array<MVCArray<HTMLElement>>
附加至地圖的其他控制項。如要在地圖中新增控制項,請將控制項的 <div> 新增至對應於應算繪 ControlPositionMVCArray
data
類型:  Data
已繫結至地圖的 Data 例項。將地圖項目新增至此 Data 物件,方便在地圖上顯示。
mapTypes
類型:  MapTypeRegistry
按字串 ID 註冊 MapType 例項。
overlayMapTypes
類型:  MVCArray<MapType optional>
其他疊加地圖類型。疊加層地圖類型會顯示在所附加的基本地圖上方,順序與在 overlayMapTypes 陣列中的顯示順序相同 (索引值較高的疊加層會顯示在索引值較低的疊加層前方)。
fitBounds
fitBounds(bounds[, padding])
參數: 
  • bounds:要顯示的 LatLngBounds|LatLngBoundsLiteral 邊界。
  • paddingnumber|Padding optional 邊框寬度,以像素為單位。邊界會套用至移除邊框後的地圖部分。數值會在所有 4 邊產生相同的邊框間距。在此處提供 0,即可讓 fitBounds 對 getBounds 的結果產生冪等性。
傳回值:
設定檢視區包含指定的界限。
注意:如果地圖設為 display: nonefitBounds 函式會將地圖的大小讀取為 0x0,因此不會執行任何操作。如要在地圖隱藏時變更可視區域,請將地圖設為 visibility: hidden,確保地圖 div 具有實際大小。針對向量地圖,這個方法會將地圖的傾斜和方向設為預設的零值。呼叫此方法時,地圖可能會平移和縮放以符合邊界,進而產生流暢的動畫。這個方法是否會產生動畫,取決於內部啟發法。
getBounds
getBounds()
參數:
傳回值:  LatLngBounds|undefined 目前可視區域的 lat/lng 邊界。
傳回目前檢視區的經、緯界限。如果顯示多個世界地圖,經度的範圍會從 -180 度到 180 度 (含首尾)。如果地圖尚未初始化,或是尚未設定中心和縮放比例,結果就會是 undefined。如果向量地圖的傾斜或方位值不為零,傳回的 lat/lng 範圍代表包含地圖可視區域的可見區域的最小定界框。如要取得地圖可視區域的確切可視區域,請參閱 MapCanvasProjection.getVisibleRegion
getCenter
getCenter()
參數:
傳回值:  LatLng|undefined
傳回顯示在地圖中心的位置。請注意,這個 LatLng 物件並包裝。詳情請參閱 LatLng。如果未設定中心或邊界,則結果為 undefined
getClickableIcons
getClickableIcons()
參數:
傳回值:  boolean|undefined
傳回地圖圖示的可點擊性。地圖圖示代表搜尋點 (又稱為 POI)。如果傳回值為 true,則地圖上的圖示可供點選。
BetagetDatasetFeatureLayer
getDatasetFeatureLayer(datasetId)
參數: 
  • datasetIdstring
傳回值:  FeatureLayer
傳回指定 datasetIdFeatureLayer。您必須在 Google Cloud 控制台中設定資料集 ID。如果資料集 ID 與地圖的地圖樣式沒有關聯,或是無法使用資料導向樣式 (沒有地圖 ID、沒有向量圖塊、沒有在地圖樣式中設定資料導向樣式地圖項目或資料集),系統會記錄錯誤,而產生的 FeatureLayer.isAvailable 會為 false。
getDiv
getDiv()
參數:
傳回值:  HTMLElement地圖的 mapDiv。
getFeatureLayer
getFeatureLayer(featureType)
參數: 
傳回值:  FeatureLayer
傳回特定 FeatureTypeFeatureLayer。您必須在 Google Cloud 控制台中啟用 FeatureLayer。如果這個地圖上沒有指定 FeatureTypeFeatureLayer,或是無法使用資料導向樣式 (沒有地圖 ID、沒有向量圖塊,且地圖樣式未啟用 FeatureLayer),這個函式就會記錄錯誤,產生的 FeatureLayer.isAvailable 會為 false。
getHeading
getHeading()
參數:
傳回值:  number|undefined
傳回地圖的指南針方向。航向值是以度為單位,從正北方順時針測量。如果地圖尚未初始化,結果會是 undefined
getHeadingInteractionEnabled
getHeadingInteractionEnabled()
參數:
傳回值:  boolean|null
傳回是否已啟用標題互動功能。這個選項只會在地圖為向量地圖時生效。如果未在程式碼中設定,系統會使用地圖 ID 的雲端設定 (如有)。
getMapCapabilities
getMapCapabilities()
參數:
傳回值:  MapCapabilities
根據提供的地圖 ID,向呼叫端提供地圖目前可用的功能。
getMapTypeId
getMapTypeId()
參數:
傳回值:  MapTypeId|string|undefined
getProjection
getProjection()
參數:
傳回值:  Projection|undefined
傳回目前的 Projection。如果地圖尚未初始化,結果就是 undefined。監聽 projection_changed 事件並檢查其值,確認該值不是 undefined
getRenderingType
getRenderingType()
參數:
傳回值:  RenderingType
傳回地圖目前的 RenderingType。
getStreetView
getStreetView()
參數:
傳回值:  StreetViewPanorama 與地圖繫結的全景圖。
會傳回已繫結至地圖的預設 StreetViewPanorama,可能是地圖內嵌的預設全景圖,或是使用 setStreetView() 設定的全景圖。地圖的 streetViewControl 變更會反映在這種繫結全景圖的顯示畫面中。
getTilt
getTilt()
參數:
傳回值:  number|undefined
傳回地圖目前的入射角,以從可視區域平面到地圖平面的角度為單位。如果是光柵地圖,直接從上方拍攝的圖像會顯示為 0,而 45° 圖像則會顯示為 45。這個方法不會傳回 setTilt 所設定的值。詳情請參閱 setTilt
getTiltInteractionEnabled
getTiltInteractionEnabled()
參數:
傳回值:  boolean|null
傳回是否已啟用傾斜互動功能。這個選項只會在地圖為向量地圖時生效。如果未在程式碼中設定,系統會使用地圖 ID 的雲端設定 (如有)。
getZoom
getZoom()
參數:
傳回值:  number|undefined
傳回地圖的縮放比例。如果未設定縮放比例,則結果為 undefined
moveCamera
moveCamera(cameraOptions)
參數: 
傳回值:
立即將地圖的相機設為目標攝影機選項,不顯示動畫。
panBy
panBy(x, y)
參數: 
  • xnumber 在 x 方向移動地圖的像素數量。
  • ynumber 在 y 方向移動地圖的像素數量。
傳回值:
根據指定的距離 (像素) 變更地圖的中心點。如果距離同時小於地圖的寬度和高度,移動時會產生平順的動畫感。請注意,地圖座標系統會由西往東遞增 (x 值) 以及由北往南遞增 (y 值)。
panTo
panTo(latLng)
參數: 
傳回值:
將地圖的中心改為指定的 LatLng。如果所進行的變動同時小於地圖的寬度和高度,移動時會產生平順的動畫感。
panToBounds
panToBounds(latLngBounds[, padding])
參數: 
  • latLngBoundsLatLngBounds|LatLngBoundsLiteral 要平移地圖的邊界。
  • paddingnumber|Padding optional 邊框寬度,以像素為單位。數值會在所有 4 邊產生相同的邊框間距。預設值為 0。
傳回值:
將地圖平移至包含指定 LatLngBounds 所需的最低量。系統不會保證地圖範圍會出現在哪裡,但會將地圖平移,盡可能在 {currentMapSizeInPx} - {padding} 內顯示地圖範圍。無論是光柵地圖或向量地圖,地圖的縮放、傾斜和標頭都不會變更。
setCenter
setCenter(latlng)
參數: 
傳回值:
setClickableIcons
setClickableIcons(value)
參數: 
  • valueboolean
傳回值:
控制地圖圖示是否可點選。地圖圖示代表搜尋點 (又稱為 POI)。如要停用地圖圖示的可點擊性,請將 false 值傳遞至這個方法。
setHeading
setHeading(heading)
參數: 
  • headingnumber
傳回值:
設定地圖的羅盤航向,以度為單位,從正北方測量。對於光柵地圖,這個方法僅適用於航空攝影圖像。
setHeadingInteractionEnabled
setHeadingInteractionEnabled(headingInteractionEnabled)
參數: 
  • headingInteractionEnabledboolean
傳回值:
設定是否啟用標題互動功能。這個選項只會在地圖為向量地圖時生效。如果未在程式碼中設定,系統會使用地圖 ID 的雲端設定 (如有)。
setMapTypeId
setMapTypeId(mapTypeId)
參數: 
傳回值:
setOptions
setOptions(options)
參數: 
傳回值:
setRenderingType
setRenderingType(renderingType)
參數: 
傳回值:
設定地圖目前的 RenderingType。
setStreetView
setStreetView(panorama)
參數: 
傳回值:
StreetViewPanorama 繫結至地圖。這個全景圖會覆寫預設的 StreetViewPanorama,讓地圖可繫結至地圖以外的外部全景圖。將全景圖設為 null 會將預設嵌入的全景圖綁定回地圖。
setTilt
setTilt(tilt)
參數: 
  • tiltnumber
傳回值:
針對向量地圖,設定地圖的入射角。允許的值會受到地圖縮放等級的限制。

針對光柵地圖,控制地圖入射角的自動切換行為。唯一允許的值為 045setTilt(0) 會讓地圖一律使用 0° 俯瞰視圖,無論縮放等級和可視區域為何,皆是如此。setTilt(45) 會在目前縮放等級和可視區域中,讓 45° 圖像可用時自動切換至 45 度,並在 45° 圖像無法使用時切換回 0 (這是預設行為)。45° 圖像僅適用於 satellitehybrid 地圖類型、部分地點和部分縮放等級。注意: getTilt 會傳回目前的傾斜角度,而非 setTilt 所設定的值。由於 getTiltsetTilt 指的是不同項目,因此請勿 bind() tilt 屬性,否則可能會產生無法預測的效果。
setTiltInteractionEnabled
setTiltInteractionEnabled(tiltInteractionEnabled)
參數: 
  • tiltInteractionEnabledboolean
傳回值:
設定是否啟用傾斜互動功能。這個選項只會在地圖為向量地圖時生效。如果未在程式碼中設定,系統會使用地圖 ID 的雲端設定 (如有)。
setZoom
setZoom(zoom)
參數: 
  • zoomnumber縮放值越大,解析度就越高。
傳回值:
設定地圖的縮放比例。
繼承: addListenerbindTogetnotifysetsetValuesunbindunbindAll
bounds_changed
function()
引數:
當檢視區界限變更時,會引發此事件。
center_changed
function()
引數:
當地圖中心的屬性變更時,會引發此事件。
click
function(event)
引數: 
使用者點選地圖時,系統會觸發這項事件。除非點選地點圖示,否則會傳回含有點選位置屬性的 MapMouseEvent,在這種情況下,系統會傳回含有地點 ID 的 IconMouseEvent。IconMouseEvent 和 MapMouseEvent 的差異僅在於 IconMouseEvent 有地點 ID 欄位。如果地點 ID 不重要,系統一律會將事件視為 MapMouseEvent。如果點選標記或資訊視窗,系統不會觸發點擊事件。
contextmenu
function(event)
引數: 
地圖容器引發 DOM contextmenu 事件時,會引發此事件。
dblclick
function(event)
引數: 
當使用者雙擊地圖時,系統會觸發這項事件。請注意,點擊事件有時會在這個事件之前觸發一次,有時會觸發兩次。
drag
function()
引數:
當使用者拖曳地圖時,會重複引發此事件。
dragend
function()
引數:
使用者停止拖曳地圖時,會引發此事件。
dragstart
function()
引數:
使用者開始拖曳地圖時,會引發此事件。
heading_changed
function()
引數:
當地圖方向屬性變更後,會引發此事件。
idle
function()
引數:
當地圖在平移或縮放後閒置時,會引發此事件。
isfractionalzoomenabled_changed
function()
引數:
當 isFractionalZoomEnabled 屬性變更時,系統會觸發此事件。
mapcapabilities_changed
function()
引數:
地圖功能變更時,系統會觸發此事件。
maptypeid_changed
function()
引數:
當 mapTypeId 屬性變更後,會引發此事件。
mousemove
function(event)
引數: 
當使用者的滑鼠移動至地圖容器時,會引發此事件。
mouseout
function(event)
引數: 
當使用者的滑鼠離開地圖容器時,會引發此事件。
mouseover
function(event)
引數: 
當使用者的滑鼠進入地圖容器時,會引發此事件。
projection_changed
function()
引數:
當投影變更後,會引發此事件。
renderingtype_changed
function()
引數:
此事件會在 renderingType 變更時觸發。
tilesloaded
function()
引數:
所有可見的地圖方塊完成載入之後,就會引發這個事件。
tilt_changed
function()
引數:
當地圖斜率屬性變更後,會引發此事件。
zoom_changed
function()
引數:
當地圖縮放等級的屬性變更後,會引發此事件。
rightclick
function(event)
引數: 
當使用者在地圖上按一下滑鼠右鍵時,系統會觸發這項事件。

MapOptions 介面

google.maps.MapOptions 介面

MapOptions 物件用於定義可在 Map 上設定的屬性。

backgroundColor optional
類型:  string optional
地圖 div 背景使用的顏色。當使用者拖曳地圖時,如果圖塊尚未載入,就會顯示這個顏色。這個選項需在地圖初始化後才能設定。
center optional
類型:  LatLng|LatLngLiteral optional
初始的地圖中心。
clickableIcons optional
類型:  boolean optional
預設值: true
false 時,地圖圖示無法點選。地圖圖示代表搜尋點 (又稱為 POI)。
controlSize optional
類型:  number optional
地圖上顯示的控制項大小 (以像素為單位)。建立地圖時必須直接提供這個值,日後更新這個值可能會導致控制項進入 undefined 狀態。僅管制 Maps API 本身所做的控制項。不會調整開發人員建立的自訂控制項。
disableDefaultUI optional
類型:  boolean optional
啟用/停用所有預設 UI 按鈕。可個別覆寫。不會停用鍵盤控制項,因為鍵盤控制項由 MapOptions.keyboardShortcuts 選項分別控制。不會停用手勢控制功能,因為該功能由 MapOptions.gestureHandling 選項分別控制。
disableDoubleClickZoom optional
類型:  boolean optional
連按兩下啟用/停用縮放和中心。預設啟用。

注意不建議使用這項屬性。如要停用按兩下縮放功能,您可以使用 gestureHandling 屬性,並將其設為 "none"

draggable optional
類型:  boolean optional
如果為 false,則會防止地圖拖曳。預設會啟用拖曳的功能。
draggableCursor optional
類型:  string optional
滑鼠游標懸停在可拖曳地圖上時,要顯示的游標名稱或網址。這項屬性會使用 CSS cursor 屬性變更圖示。與 CSS 屬性一樣,您必須至少指定一個非網址的備用游標。例如:draggableCursor: 'url(http://www.example.com/icon.png), auto;'
draggingCursor optional
類型:  string optional
在拖曳地圖時顯示的游標名稱或網址。這項屬性會使用 CSS cursor 屬性變更圖示。與 CSS 屬性一樣,您必須至少指定一個非網址的備用游標。例如:draggingCursor: 'url(http://www.example.com/icon.png), auto;'
fullscreenControl optional
類型:  boolean optional
全螢幕控制項的啟用/停用狀態。
fullscreenControlOptions optional
類型:  FullscreenControlOptions optional
全螢幕控制項的顯示選項。
gestureHandling optional
類型:  string optional
這項設定可控管 API 處理地圖上的手勢的方式。允許的值:
  • "cooperative":捲動事件和單指觸控手勢會捲動頁面,但不會縮放或平移地圖。雙指觸控手勢可平移及縮放地圖。按下 Ctrl 鍵或 ⌘ 鍵時的捲動事件可放大地圖。
    在這個模式中,地圖會與頁面合作
  • "greedy":所有觸控手勢和捲動事件都會平移或縮放地圖。
  • "none":使用者無法透過手勢平移或縮放地圖。
  • "auto":(預設值) 手勢處理方式為合作或貪婪,取決於網頁是否可捲動或位於 iframe 中。
heading optional
類型:  number optional
由北方位基點以順時針方向繞某一角度所取得的空照圖像方向。方向會貼齊包含圖像的最近可用角度。
headingInteractionEnabled optional
類型:  boolean optional
預設值: false
地圖是否應允許使用者控制相機方向 (旋轉)。這個選項只會在地圖為向量地圖時生效。如果未在程式碼中設定,系統會使用地圖 ID 的雲端設定 (如有)。
isFractionalZoomEnabled optional
類型:  boolean optional
預設值:向量地圖為 true,光柵地圖為 false
指定地圖是否應允許小數縮放等級。請監聽 isfractionalzoomenabled_changed,瞭解何時已設定預設值。
keyboardShortcuts optional
類型:  boolean optional
如果為 false,則會防止地圖受到鍵盤控制。預設會啟用鍵盤捷徑。
mapId optional
類型:  string optional
地圖的 地圖 ID。地圖例項化後,就無法設定或變更這個參數。Map.DEMO_MAP_ID 可用於試用需要地圖 ID 但不需要啟用雲端的功能。
mapTypeControl optional
類型:  boolean optional
地圖類型控制項的初始啟用/停用狀態。
mapTypeControlOptions optional
類型:  MapTypeControlOptions optional
地圖類型控制項的初始顯示選項。
mapTypeId optional
類型:  MapTypeId|string optional
初始地圖 mapTypeId。預設值為 ROADMAP
maxZoom optional
類型:  number optional
將可在地圖上顯示的最大縮放等級。如果省略或設為 null,系統會改用目前地圖類型的最大縮放等級。有效的縮放值為從零到支援的最大縮放等級之間的數字。
minZoom optional
類型:  number optional
將可在地圖上顯示的最小縮放等級。如果省略或設為 null,系統會改用目前地圖類型的最小縮放等級。有效的縮放值為從零到支援的最大縮放等級之間的數字。
noClear optional
類型:  boolean optional
如果為 true,請勿清除地圖 div 的內容。
panControl optional
類型:  boolean optional
平移控制項的啟用/停用狀態。

panControlOptions optional
類型:  PanControlOptions optional
平移控制項的顯示選項。

renderingType optional
類型:  RenderingType optional
地圖應為光柵地圖或向量地圖。地圖例項化後,就無法設定或變更這個參數。如果未設定,則地圖 ID 的雲端設定會決定算繪類型 (如有)。請注意,向量地圖可能不適用於所有裝置和瀏覽器,且地圖會視需要改用光柵地圖。
restriction optional
類型:  MapRestriction optional
定義邊界,限制使用者可存取的地圖區域。設定後,使用者只能在攝影機畫面停留在邊界範圍內時平移和縮放。
rotateControl optional
類型:  boolean optional
旋轉控制項的啟用/停用狀態。
rotateControlOptions optional
類型:  RotateControlOptions optional
旋轉控制項的顯示選項。
scaleControl optional
類型:  boolean optional
比例控制項的初始啟用/停用狀態。
scaleControlOptions optional
類型:  ScaleControlOptions optional
比例控制項的初始顯示選項。
scrollwheel optional
類型:  boolean optional
如果為 false,則會停用使用滑鼠滾輪縮放地圖的功能。捲動輪預設為啟用。

注意不建議使用這項屬性。如要停用使用捲動輪的縮放功能,您可以使用 gestureHandling 屬性,並將其設為 "cooperative""none"

streetView optional
類型:  StreetViewPanorama optional
當街景服務衣夾人放到地圖上時,要顯示的 StreetViewPanorama。如果未指定全景圖,當 pegman 放置時,地圖的 div 會顯示預設的 StreetViewPanorama
streetViewControl optional
類型:  boolean optional
街景服務衣夾人控制項的初始啟用/停用狀態。這個控制項是預設 UI 的一部分,如果要顯示不應顯示街景服務道路覆蓋圖的地圖類型 (例如非地球地圖類型),應將其設為 false
streetViewControlOptions optional
類型:  StreetViewControlOptions optional
街景服務衣夾人控制項的初始顯示選項。
styles optional
類型:  Array<MapTypeStyle> optional
套用至每個預設地圖類型的樣式。請注意,對於 satellite/hybridterrain 模式,這些樣式只會套用至標籤和幾何圖形。使用地圖 ID 或向量地圖時,無法使用這項功能 (請改用雲端式地圖樣式設定)。
tilt optional
類型:  number optional
針對向量地圖,設定地圖的入射角。允許的值會受到地圖縮放等級的限制。針對光柵地圖,控制地圖入射角的自動切換行為。唯一允許的值為 045。值 0 會讓地圖一律使用 0° 俯瞰視圖,無論縮放等級和可視區域為何。當目前的縮放等級和檢視區可使用 45° 圖像時,值 45 會讓傾斜角度自動切換為 45°,當無法使用 45° 圖像時,則會切換回 0 (這是預設行為)。45° 圖像僅適用於 satellitehybrid 地圖類型、部分地點和部分縮放等級。注意: getTilt 會傳回目前的傾斜角度,而非這個選項指定的值。由於 getTilt 和這個選項指的是不同項目,因此請勿 bind() tilt 屬性,否則可能會產生無法預測的效果。
tiltInteractionEnabled optional
類型:  boolean optional
預設值: false
地圖是否應允許使用者控制攝影機傾斜角度。這個選項只會在地圖為向量地圖時生效。如果未在程式碼中設定,系統會使用地圖 ID 的雲端設定 (如有)。
zoom optional
類型:  number optional
地圖的初始縮放等級。有效的縮放值是從零到支援的最大縮放等級的數字。縮放值越大,解析度就越高。
zoomControl optional
類型:  boolean optional
縮放控制項的啟用/停用狀態。
zoomControlOptions optional
類型:  ZoomControlOptions optional
縮放控制項的顯示選項。

MapElement 類別

google.maps.MapElement class

MapElement 是用於算繪地圖的 HTMLElement 子類別。載入 maps 程式庫後,即可在 HTML 中建立地圖。例如:

<gmp-map center="37.4220656,-122.0840897" zoom="10" map-id="DEMO_MAP_ID">
  <button slot="control-block-start-inline-end">Custom Control</button>
</gmp-map>

在內部使用 Map,可透過 innerMap 屬性存取。

自訂元素:
<gmp-map center="lat,lng" heading-interaction-disabled map-id="string" rendering-type="vector" tilt-interaction-disabled zoom="number"></gmp-map>

這個類別會擴充 HTMLElement

這個類別會實作 MapElementOptions

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

MapElement
MapElement([options])
參數: 
center
類型:  LatLng|LatLngLiteral optional
地圖中心的經緯度座標。
HTML 屬性:
  • <gmp-map center="lat,lng"></gmp-map>
headingInteractionDisabled
類型:  boolean optional
預設值: false
地圖是否應允許使用者控制相機方向 (旋轉)。這個選項只會在地圖為向量地圖時生效。如果未在程式碼中設定,系統會使用地圖 ID 的雲端設定 (如有)。
HTML 屬性:
  • <gmp-map heading-interaction-disabled></gmp-map>
innerMap
類型:  Map
參照 MapElement 在內部使用的 Map
mapId
類型:  string optional
地圖的 地圖 ID。地圖例項化後,就無法設定或變更這個參數。Map.DEMO_MAP_ID 可用於試用需要地圖 ID 但不需要啟用雲端的功能。
HTML 屬性:
  • <gmp-map map-id="string"></gmp-map>
renderingType
類型:  RenderingType optional
地圖應為光柵地圖或向量地圖。地圖例項化後,就無法設定或變更這個參數。如果未設定,則地圖 ID 的雲端設定會決定算繪類型 (如有)。請注意,向量地圖可能不適用於所有裝置和瀏覽器,且地圖會視需要改用光柵地圖。
HTML 屬性:
  • <gmp-map rendering-type="vector"></gmp-map>
  • <gmp-map rendering-type="raster"></gmp-map>
tiltInteractionDisabled
類型:  boolean optional
預設值: false
地圖是否應允許使用者控制攝影機傾斜角度。這個選項只會在地圖為向量地圖時生效。如果未在程式碼中設定,系統會使用地圖 ID 的雲端設定 (如有)。
HTML 屬性:
  • <gmp-map tilt-interaction-disabled></gmp-map>
zoom
類型:  number optional
地圖的縮放等級。有效的縮放值是從零到支援的最大縮放等級的數字。縮放值越大,解析度就越高。
HTML 屬性:
  • <gmp-map zoom="number"></gmp-map>
control-block-end-inline-center
將插槽元素放入 ControlPosition.BLOCK_END_INLINE_CENTER 位置。
control-block-end-inline-end
將插槽元素放入 ControlPosition.BLOCK_END_INLINE_END 位置。
control-block-end-inline-start
將插槽元素放入 ControlPosition.BLOCK_END_INLINE_START 位置。
control-block-start-inline-center
將插槽元素放入 ControlPosition.BLOCK_START_INLINE_CENTER 位置。
control-block-start-inline-end
將插槽元素放入 ControlPosition.BLOCK_START_INLINE_END 位置。
control-block-start-inline-start
將插槽元素放入 ControlPosition.BLOCK_START_INLINE_START 位置。
control-inline-end-block-center
將插槽元素放入 ControlPosition.INLINE_END_BLOCK_CENTER 位置。
control-inline-end-block-end
將插槽元素放入 ControlPosition.INLINE_END_BLOCK_END 位置。
control-inline-end-block-start
將插槽元素放入 ControlPosition.INLINE_END_BLOCK_START 位置。
control-inline-start-block-center
將插槽元素放入 ControlPosition.INLINE_START_BLOCK_CENTER 位置。
control-inline-start-block-end
將插槽元素放入 ControlPosition.INLINE_START_BLOCK_END 位置。
control-inline-start-block-start
將插槽元素放入 ControlPosition.INLINE_START_BLOCK_START 位置。
default
您可以使用自訂元素,圍繞 AdvancedMarkerElement 等 Maps JavaScript 網頁元件建立可重複使用的元件。根據預設,任何直接新增至 MapElement 的自訂元素,都會在 MapPanes.overlayMouseTarget 中插入及顯示。不過,Maps JavaScript API 網頁元件可能會重新排到 MapElement 的內部位置。
BetaaddEventListener
addEventListener(type, listener[, options])
參數: 
  • typestring 代表要監聽的事件類型,區分大小寫。
  • listenerEventListener|EventListenerObject 接收通知的物件。此項目必須是函式或含有 handleEvent 方法的物件
  • optionsboolean|AddEventListenerOptions optional 請參閱「選項」。自訂事件只支援 capturepassive
傳回值:  void
設定函式,在指定事件傳送至目標時呼叫。請參閱 addEventListener
BetaremoveEventListener
removeEventListener(type, listener[, options])
參數: 
傳回值:  void
從目標中移除先前使用 addEventListener 註冊的事件監聽器。請參閱 removeEventListener
gmp-zoomchange
function(event)
引數: 
當地圖縮放等級的屬性變更後,會引發此事件。

MapElementOptions 介面

google.maps.MapElementOptions 介面

MapElementOptions 物件用於定義可在 MapElement 上設定的屬性。

center optional
類型:  LatLng|LatLngLiteral optional
詳情請參閱《MapElement.center》。
headingInteractionDisabled optional
類型:  boolean optional
mapId optional
類型:  string optional
詳情請參閱《MapElement.mapId》。
renderingType optional
類型:  RenderingType optional
詳情請參閱《MapElement.renderingType》。
tiltInteractionDisabled optional
類型:  boolean optional
詳情請參閱《MapElement.tiltInteractionDisabled》。
zoom optional
類型:  number optional
詳情請參閱《MapElement.zoom》。

ZoomChangeEvent 類別

google.maps.ZoomChangeEvent class

這項事件是根據監控的縮放變更建立。

這個類別會擴充 Event

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

MapTypeStyle 介面

google.maps.MapTypeStyle 介面

MapTypeStyle 是選取器和樣式設定器的集合,用於定義地圖的樣式。選取器會指定應受影響的地圖地圖項目和/或元素,而樣式函數則會指定應如何修改這些地圖項目和元素。詳情請參閱樣式參考資料

stylers
類型:  Array<Object>
要套用至所選地圖項目和元素的樣式規則。系統會依照您在這個陣列中指定的順序套用規則。如需使用方式和允許值的規範,請參閱樣式參考資料
elementType optional
類型:  string optional
應套用樣式器的元素。元素是指地圖上地圖項目的視覺元素。例如:標籤、圖示、套用至幾何圖形的筆劃或填充等。選用設定。如未指定 elementType,系統會假設值為 'all'。如需使用方式和允許值的詳細資料,請參閱樣式參考資料
featureType optional
類型:  string optional
應套用樣式函數的地圖項目或地圖項目群組。選用設定。如未指定 featureType,系統會假設值為 'all'。如需使用方式和允許值的詳細資料,請參閱樣式參考資料

MapMouseEvent 介面

google.maps.MapMouseEvent 介面

這個物件是從地圖以及疊加層上的各種 mouse 事件傳回的,而且包含以下顯示的所有欄位。

domEvent
對應的原生 DOM 事件。開發人員不應依賴 targetcurrentTargetrelatedTargetpath 屬性已定義且一致。開發人員也不應仰賴 Maps API 內部實作的 DOM 結構。由於內部事件對應,domEvent 的語意可能與 MapMouseEvent 不同 (例如 MapMouseEvent「點擊」可能有 KeyboardEvent 類型的 domEvent)。
latLng optional
類型:  LatLng optional
當事件發生時,游標底下的經、緯度。
stop
stop()
參數:
傳回值:  void
防止這項事件進一步傳播。

IconMouseEvent 介面

google.maps.IconMouseEvent 介面

當使用者點選地圖上的圖示時,系統會在事件中傳送這個物件。這個地點的 ID 會儲存在 placeId 成員中。如要避免預設資訊視窗顯示,請在這個事件上呼叫 stop() 方法,以免資訊視窗傳播。如要進一步瞭解 Place ID,請參閱 Places API 開發人員指南。

這個介面會擴充 MapMouseEvent

placeId optional
類型:  string optional
點按的地點 ID。您可以使用這個地點 ID 查詢更多資訊,瞭解點選的功能。

如要進一步瞭解 Place ID,請參閱 Places API 開發人員指南。

繼承: domEventlatLng
繼承: stop

MapTypeId 常數

google.maps.MapTypeId 常數

常見 MapType 的 ID。您可以使用值或常數名稱來指定這些值。例如 'satellite'google.maps.MapTypeId.SATELLITE

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

HYBRID 這個地圖類型會在衛星圖片上顯示主要街道的透明層。
ROADMAP 這個地圖類型會顯示一般街道地圖。
SATELLITE 這個地圖類型會顯示衛星圖片。
TERRAIN 這個地圖類型會以實際圖徵 (例如地形和植被) 顯示地圖。

MapTypeRegistry 類別

google.maps.MapTypeRegistry class

以 MapType ID 做為索引的 MapType 例項登錄。

這個類別會擴充 MVCObject

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

MapTypeRegistry
MapTypeRegistry()
參數:
MapTypeRegistry 會保留可供地圖使用的自訂地圖類型集合。舉例來說,API 會在提供控制項中可用的地圖類型清單時,參照此登錄。
set
set(id, mapType)
參數: 
  • idstring 要新增至註冊表的 MapType ID。
  • mapType:要新增至註冊表的 MapType|* MapType 物件。
傳回值:
設定登錄檔,以建立傳送的字串識別項與傳送的 MapType 關聯。
繼承: addListenerbindTogetnotifysetValuesunbindunbindAll

MapRestriction 介面

google.maps.MapRestriction 介面

可套用至地圖的限制。地圖的可視區域不會超出這些限制。

latLngBounds
設定後,使用者只能在指定邊界內拖曳及縮放。邊界可以限制經度和緯度,也可以只限制緯度。如果是僅限緯度的邊界,請分別使用 -180 和 180 的西經和東經,例如 latLngBounds: {north: northLat, south: southLat, west: -180, east: 180}
strictBounds optional
類型:  boolean optional
您可以將 strictBounds 標記設為 true,進一步限制邊界。這麼做可減少使用者可縮小的範圍,確保限制範圍以外的所有內容都保持隱藏狀態。預設值為 false,表示使用者可以縮小至整個邊界區域,甚至包括邊界區域外的區域。

TrafficLayer 類別

google.maps.TrafficLayer class

路況圖層。

這個類別會擴充 MVCObject

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

TrafficLayer
TrafficLayer([opts])
參數: 
顯示目前路況的圖層。
getMap
getMap()
參數:
傳回值:  Map
傳回顯示這個圖層的地圖。
setMap
setMap(map)
參數: 
傳回值:
在指定的地圖上呈現圖層。如果地圖設為 null,系統會移除圖層。
setOptions
setOptions(options)
參數: 
傳回值:
繼承: addListenerbindTogetnotifysetsetValuesunbindunbindAll

TrafficLayerOptions 介面

google.maps.TrafficLayerOptions 介面

TrafficLayerOptions 物件用於定義可在 TrafficLayer 上設定的屬性。

autoRefresh optional
類型:  boolean optional
預設值: true
流量圖層是否會自動更新最新資訊。
map optional
類型:  Map optional
要顯示路況圖層的地圖。

TransitLayer 類別

google.maps.TransitLayer class

大眾運輸圖層。

這個類別會擴充 MVCObject

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

TransitLayer
TransitLayer()
參數:
顯示大眾運輸路線的圖層。
getMap
getMap()
參數:
傳回值:  Map
傳回顯示這個圖層的地圖。
setMap
setMap(map)
參數: 
傳回值:
在指定的地圖上呈現圖層。如果地圖設為 null,系統會移除圖層。
繼承: addListenerbindTogetnotifysetsetValuesunbindunbindAll

BicyclingLayer 類別

google.maps.BicyclingLayer class

顯示單車道的疊加層。

這個類別會擴充 MVCObject

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

BicyclingLayer
BicyclingLayer()
參數:
顯示單車道並降低大道路等級的圖層。
getMap
getMap()
參數:
傳回值:  Map
傳回顯示這個圖層的地圖。
setMap
setMap(map)
參數: 
傳回值:
在指定的地圖上呈現圖層。如果地圖設為 null,系統會移除圖層。
繼承: addListenerbindTogetnotifysetsetValuesunbindunbindAll

CameraOptions 介面

google.maps.CameraOptions 介面

用於設定地圖的相機選項。

center optional
類型:  LatLngLiteral|LatLng optional
heading optional
類型:  number optional
tilt optional
類型:  number optional
zoom optional
類型:  number optional

VisibleRegion 介面

google.maps.VisibleRegion 介面

包含四個定義四邊形的點,該四邊形即為地圖的可見區域。在向量地圖上,如果向量地圖有傾斜,這個多邊形可以是梯形,而非矩形。

farLeft
類型:  LatLng
farRight
類型:  LatLng
latLngBounds
類型:  LatLngBounds
包含可見區域的最小定界框。
nearLeft
類型:  LatLng
nearRight
類型:  LatLng

RenderingType 常數

google.maps.RenderingType 常數

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

RASTER 指明地圖為光柵地圖。
UNINITIALIZED 表示地圖尚未完成初始化,因此無法得知地圖是向量地圖還是光柵地圖。
VECTOR 表示地圖是向量地圖。

MapCapabilities 介面

google.maps.MapCapabilities 介面

包含地圖目前可用功能快照的物件。請注意,這並不一定表示相關模組已載入或初始化,而是表示目前地圖具有使用這些 API 的權限。如需可能功能的清單,請參閱屬性。

isAdvancedMarkersAvailable optional
類型:  boolean optional
如果為 true,表示地圖已正確設定,可使用進階標記。請注意,您仍必須匯入 marker 程式庫,才能使用進階標記。詳情請參閱 https://goo.gle/gmp-isAdvancedMarkersAvailable
isDataDrivenStylingAvailable optional
類型:  boolean optional
如果為 true,則表示這個地圖已正確設定,可讓至少一個 FeatureLayer 使用資料導向樣式。詳情請參閱 https://goo.gle/gmp-data-driven-stylinghttps://goo.gle/gmp-FeatureLayerIsAvailable
isWebGLOverlayViewAvailable optional
類型:  boolean optional
如果為 true,則表示這份對應表已正確設定,可使用 WebGLOverlayView