Map3DElement class
google.maps.maps3d.Map3DElement
class
Map3DElement 是 3D 地圖檢視畫面的 HTML 介面。請注意,必須設定 mode,3D 地圖才會開始算繪。
自訂元素:
<gmp-map-3d center="lat,lng,altitude" default-ui-disabled heading="number" internal-usage-attribution-ids="id1 id2" max-altitude="number" max-heading="number" max-tilt="number" min-altitude="number" min-heading="number" min-tilt="number" mode="hybrid" range="number" roll="number" tilt="number"></gmp-map-3d>
這個類別會擴充 HTMLElement。
這個類別會實作 Map3DElementOptions。
撥打 const {Map3DElement} = await google.maps.importLibrary("maps3d") 即可存取。
請參閱「Maps JavaScript API 中的程式庫」。
| 建構函式 | |
|---|---|
| Map3DElement | Map3DElement([options])參數:   
 | 
| 屬性 | |
|---|---|
| bounds | 類型:   LatLngBounds|LatLngBoundsLiteral optional設定後,相機位置會限制在指定的經緯度範圍內。請注意,範圍外的物件仍會算繪。範圍可以同時限制經緯度,也可以只限制緯度或經度。如要使用僅限緯度的界線,請分別使用  -180和180的西經和東經。如要使用僅限經度的界線,請分別使用90和-90的南北緯度。 | 
| center | 類型:   LatLngAltitude|LatLngAltitudeLiteral optional地圖中心,以 LatLngAltitude 形式提供,其中海拔高度是以高於地面的公尺為單位。請注意,這不一定是攝影機所在位置,因為  range欄位會影響攝影機與地圖中心的距離。如果未設定,則預設值為{lat: 0, lng: 0, altitude: 63170000}。63170000 公尺是允許的最大海拔高度 (地球半徑乘以 10)。HTML 屬性: 
 | 
| defaultUIDisabled | 類型:   boolean optional預設值:  false如果設為  true,所有預設 UI 按鈕都會停用。不會停用鍵盤和手勢控制功能。HTML 屬性: 
 | 
| heading | 類型:   number optional地圖的指南針航向 (以度為單位),正北為零。如果沒有傾斜,任何滾動都會解讀為航向。 HTML 屬性: 
 | 
| internalUsageAttributionIds | 類型:   Iterable<string> optional在初始值設定器中新增使用情況歸因 ID,協助 Google 瞭解哪些程式庫和範例對開發人員有幫助,例如標記叢集程式庫的使用情況。如要選擇不傳送使用情況歸因 ID,可以放心刪除這項屬性。系統只會傳送不重複的值。例項化後,系統可能會忽略對這個值的變更。 HTML 屬性: 
 | 
| maxAltitude | 類型:   number optional地圖上顯示的最高海拔高度 (高於地面)。有效值介於  0和63170000公尺之間 (地球半徑乘以 10)。HTML 屬性: 
 | 
| maxHeading | 類型:   number optional地圖的航向 (旋轉) 最大角度。有效值介於  0到360度之間。minHeading和maxHeading代表允許使用方向手勢的間隔,角度 <=360度。minHeading = 180和maxHeading = 90可讓您在[0, 90]和[180, 360]中設定航向。minHeading = 90和maxHeading = 180可在[90, 180]中顯示標題。HTML 屬性: 
 | 
| maxTilt | 類型:   number optional地圖的最大入射角。有效值介於  0到90度之間。HTML 屬性: 
 | 
| minAltitude | 類型:   number optional地圖上顯示的最低海拔高度。有效值介於  0和63170000公尺之間 (地球半徑乘以 10)。HTML 屬性: 
 | 
| minHeading | 類型:   number optional地圖的最小航向 (旋轉) 角度。有效值介於  0到360度之間。minHeading和maxHeading代表允許使用方向手勢的間隔,角度 <=360度。minHeading = 180和maxHeading = 90可讓您在[0, 90]和[180, 360]中設定航向。minHeading = 90和maxHeading = 180可在[90, 180]中顯示標題。HTML 屬性: 
 | 
| minTilt | 類型:   number optional地圖的入射角下限。有效值介於  0到90度之間。HTML 屬性: 
 | 
| mode | 類型:   MapMode optional指定地圖的算繪模式。如未設定,地圖就不會顯示。 HTML 屬性: 
 | 
| range | 類型:   number optional攝影機與地圖中心的距離 (以公尺為單位)。 HTML 屬性: 
 | 
| roll | 類型:   number optional相機繞著檢視向量的傾斜角度 (以度為單位)。為解決模糊不清的問題,如果沒有傾斜,任何側滾都會解讀為航向。 HTML 屬性: 
 | 
| tilt | 類型:   number optional攝影機視角向量的傾斜度 (以度為單位)。如果視角向量直接向下看地球,傾斜度為零度。指向地球的檢視向量傾斜度為  180度。HTML 屬性: 
 | 
| 方法 | |
|---|---|
| addEventListener | addEventListener(type, listener[, options])參數:   
 傳回值:   void設定函式,每當指定事件傳送至目標時,系統就會呼叫該函式。請參閱 addEventListener。 | 
| flyCameraAround | flyCameraAround(options)參數:   
 傳回值:無 這個方法會讓攝影機在指定時間內繞著指定位置旋轉,並在該時間內旋轉指定次數。 預設為順時針旋轉。如果輪數為負數,攝影機就會改為逆時針旋轉。 由於動畫只能在載入最少量的地圖後啟動,因此這個方法為非同步。動畫開始播放後,這個方法就會傳回。 如果輪數為零,系統不會旋轉,動畫會在開始後立即完成。 | 
| flyCameraTo | flyCameraTo(options)參數:   
 傳回值:無 這個方法會將攝影機從目前位置以拋物線移動至指定結束位置,移動時間為指定時長。 由於動畫只能在載入最少量的地圖後啟動,因此這個方法為非同步。動畫開始播放後,這個方法就會傳回。 | 
| removeEventListener | removeEventListener(type, listener[, options])參數:   
 傳回值:   void從目標中移除先前透過 addEventListener 註冊的事件監聽器。請參閱「removeEventListener」。 | 
| stopCameraAnimation | stopCameraAnimation()參數:無 傳回值:無 這個方法會停止任何可能正在執行的飛行動畫。攝影機會停留在動畫中途的位置,不會傳送到終點。 這個方法是非同步的,因為動畫只能在載入最少量的地圖後啟動或停止。動畫停止後,這個方法就會傳回。 | 
| 事件 | |
|---|---|
| gmp-animationend | function(animationEndEvent)引數:   
 飛行動畫結束時,會觸發這個事件。這個事件會透過 DOM 樹狀結構向上傳播。 | 
| gmp-centerchange | function(centerChangeEvent)引數:   
 當地圖 3D 元素的中心屬性變更時,就會觸發這個事件。 | 
| gmp-click | function(clickEvent)引數:   
 點選  Map3DElement元素時,系統會觸發此事件。 | 
| gmp-error | function(mapInitializationErrorEvent)引數:   
 地圖初始化失敗時,系統會觸發這個事件。 | 
| gmp-headingchange | function(headingChangeEvent)引數:   
 當地圖 3D 元素的 heading 屬性變更時,就會觸發這個事件。 | 
| gmp-rangechange | function(rangeChangeEvent)引數:   
 當 Map3DElement 的範圍屬性變更時,就會觸發這個事件。 | 
| gmp-rollchange | function(rollChangeEvent)引數:   
 當 Map3DElement 的捲動屬性變更時,就會觸發這個事件。 | 
| gmp-steadychange | function(steadyChangeEvent)引數:   
 Map3DElement的穩定狀態變更時,就會觸發這個事件。 | 
| gmp-tiltchange | function(tiltChangeEvent)引數:   
 Map3DElement 的傾斜屬性變更時,就會觸發這個事件。 | 
Map3DElementOptions interface
google.maps.maps3d.Map3DElementOptions
介面
Map3DElementOptions 物件,用於定義可在 Map3DElement 上設定的屬性。
| 屬性 | |
|---|---|
| bounds optional | 類型:   LatLngBounds|LatLngBoundsLiteral optional詳情請參閱《 Map3DElement.bounds》。 | 
| center optional | 類型:   LatLngAltitude|LatLngAltitudeLiteral optional詳情請參閱《 Map3DElement.center》。 | 
| defaultUIDisabled optional | 類型:   boolean optional詳情請參閱《 Map3DElement.defaultUIDisabled》。 | 
| heading optional | 類型:   number optional詳情請參閱《 Map3DElement.heading》。 | 
| internalUsageAttributionIds optional | 類型:   Iterable<string> optional | 
| maxAltitude optional | 類型:   number optional詳情請參閱《 Map3DElement.maxAltitude》。 | 
| maxHeading optional | 類型:   number optional詳情請參閱《 Map3DElement.maxHeading》。 | 
| maxTilt optional | 類型:   number optional詳情請參閱《 Map3DElement.maxTilt》。 | 
| minAltitude optional | 類型:   number optional詳情請參閱《 Map3DElement.minAltitude》。 | 
| minHeading optional | 類型:   number optional詳情請參閱《 Map3DElement.minHeading》。 | 
| minTilt optional | 類型:   number optional詳情請參閱《 Map3DElement.minTilt》。 | 
| mode optional | 類型:   MapMode optional詳情請參閱《 Map3DElement.mode》。 | 
| range optional | 類型:   number optional詳情請參閱《 Map3DElement.range》。 | 
| roll optional | 類型:   number optional詳情請參閱《 Map3DElement.roll》。 | 
| tilt optional | 類型:   number optional詳情請參閱《 Map3DElement.tilt》。 | 
MapMode 常數
google.maps.maps3d.MapMode
常數
指定地圖的算繪模式。
撥打 const {MapMode} = await google.maps.importLibrary("maps3d") 即可存取。
請參閱「Maps JavaScript API 中的程式庫」。
| 常數 | |
|---|---|
| HYBRID | 這個地圖模式會在衛星或擬真圖像上顯示主要街道的透明圖層。 | 
| SATELLITE | 這個地圖模式會顯示衛星或擬真圖像 (如有)。 | 
FlyAroundAnimationOptions 介面
google.maps.maps3d.FlyAroundAnimationOptions
介面
FlyCameraAround 動畫的自訂選項。
| 屬性 | |
|---|---|
| camera | 類型:   CameraOptions環繞動畫期間,攝影機應對準的中心點。請注意,地圖方向會隨著攝影機繞著中心點旋轉而改變。 | 
| durationMillis optional | 類型:   number optional動畫時間長度 (以毫秒為單位)。這是動畫的總時間長度,而非單一旋轉的長度。 | 
| rounds optional | 類型:   number optional在指定時間內繞著中心旋轉的圈數。這項操作可控制整體旋轉速度。將負數傳遞至 rounds 會導致攝影機逆時針旋轉,而非預設的順時針方向。 | 
FlyToAnimationOptions interface
google.maps.maps3d.FlyToAnimationOptions
介面
FlyCameraTo 動畫的自訂選項。
| 屬性 | |
|---|---|
| endCamera | 類型:   CameraOptions動畫結束時攝影機應指向的位置。 | 
| durationMillis optional | 類型:   number optional動畫時間長度 (以毫秒為單位)。如果時間長度為 0,攝影機就會直接傳送到最終位置。 | 
CameraOptions interface
google.maps.maps3d.CameraOptions
介面
CameraOptions 物件,用於定義可在相機物件上設定的屬性。攝影機物件可以是任何具有攝影機位置的物件,例如目前的地圖狀態,或是未來要求的動畫狀態。
| 屬性 | |
|---|---|
| center optional | 類型:   LatLngAltitude|LatLngAltitudeLiteral optional詳情請參閱《 Map3DElement.center》。 | 
| heading optional | 類型:   number optional詳情請參閱《 Map3DElement.heading》。 | 
| range optional | 類型:   number optional詳情請參閱《 Map3DElement.range》。 | 
| roll optional | 類型:   number optional詳情請參閱《 Map3DElement.roll》。 | 
| tilt optional | 類型:   number optional詳情請參閱《 Map3DElement.tilt》。 | 
SteadyChangeEvent class
google.maps.maps3d.SteadyChangeEvent
class
這項事件是透過監控 Map3DElement 的穩定狀態而建立。這個事件會透過 DOM 樹狀結構向上傳播。
這個類別會擴充 Event。
撥打 const {SteadyChangeEvent} = await google.maps.importLibrary("maps3d") 即可存取。
請參閱「Maps JavaScript API 中的程式庫」。
| 屬性 | |
|---|---|
| isSteady | 類型:   boolean指出 Map3DElement 是否穩定 (即目前場景的所有算繪作業都已完成)。 | 
LocationClickEvent class
google.maps.maps3d.LocationClickEvent
class
這個事件是透過點選 Map3DElement 建立。
這個類別會擴充 Event。
撥打 const {LocationClickEvent} = await google.maps.importLibrary("maps3d") 即可存取。
請參閱「Maps JavaScript API 中的程式庫」。
| 屬性 | |
|---|---|
| position | 類型:   LatLngAltitude optional事件發生時游標下方的緯度/經度/海拔高度。請注意,如果使用較粗略的層級,系統會傳回精確度較低的資料。此外,從較高的相機位置點選水面時,系統可能會傳回海床高度做為海拔高度值。這個事件會透過 DOM 樹狀結構向上傳播。 | 
PlaceClickEvent class
google.maps.maps3d.PlaceClickEvent
class
這項活動是透過點選 Map3DElement 上的地點圖示建立。如要防止顯示預設的快顯視窗,請對這個事件呼叫 preventDefault() 方法,防止 Map3DElement 處理該事件。
這個類別會擴充 LocationClickEvent。
撥打 const {PlaceClickEvent} = await google.maps.importLibrary("maps3d") 即可存取。
請參閱「Maps JavaScript API 中的程式庫」。
| 屬性 | |
|---|---|
| placeId | 類型:   string地圖功能的 Place ID。 | 
| 繼承: position | |
| 方法 | |
|---|---|
| fetchPlace | fetchPlace()參數:無 擷取這個地點 ID 的  Place。在產生的Place物件中,系統會填入 ID 屬性。後續可透過Place.fetchFields()要求其他欄位,但須啟用 Places API 並支付相關費用。如果擷取Place時發生錯誤,系統會拒絕 Promise。 | 
Marker3DElement class
google.maps.maps3d.Marker3DElement
class
在 3D 地圖上顯示位置。請注意,必須設定 position,Marker3DElement 才會顯示。
自訂元素:
<gmp-marker-3d altitude-mode="absolute" collision-behavior="required" draws-when-occluded extruded label="string" position="lat,lng" size-preserved z-index="number"></gmp-marker-3d>
這個類別會擴充 HTMLElement。
這個類別會實作 Marker3DElementOptions。
撥打 const {Marker3DElement} = await google.maps.importLibrary("maps3d") 即可存取。
請參閱「Maps JavaScript API 中的程式庫」。
| 建構函式 | |
|---|---|
| Marker3DElement | Marker3DElement([options])參數:   
 使用指定的選項建立  Marker3DElement。 | 
| 屬性 | |
|---|---|
| altitudeMode | 類型:   AltitudeMode optional指定如何解讀位置的海拔高度元件。 HTML 屬性: 
 | 
| collisionBehavior | 類型:   CollisionBehavior optional列舉,指定 Marker3DElement 與其他 Marker3DElement 或底圖標籤衝突時的行為。 HTML 屬性: 
 | 
| drawsWhenOccluded | 類型:   boolean optional預設值:  false指定這個標記在遮蔽時是否應繪製。標記可能會被地圖幾何圖形 (例如建築物) 遮住。 HTML 屬性: 
 | 
| extruded | 類型:   boolean optional預設值:  false指定是否要將標記連接至地面。如要擠出標記, altitudeMode必須是RELATIVE_TO_GROUND或ABSOLUTE。HTML 屬性: 
 | 
| label | 類型:   string optional這個標記要顯示的文字。 HTML 屬性: 
 | 
| position | 類型:   LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional標記尖端的位置。在特定模式下,系統會忽略海拔高度,因此這是選填欄位。 HTML 屬性: 
 | 
| sizePreserved | 類型:   boolean optional預設值:  false指定這個標記是否應保留大小,無論與攝影機的距離為何。根據預設,標記會根據與攝影機的距離/傾斜角度縮放。 HTML 屬性: 
 | 
| zIndex | 類型:   number optional與其他標記相比的 zIndex。 HTML 屬性: 
 | 
| 運算單元 | |
|---|---|
| default | 直接新增至  Marker3DElement的任何自訂元素都會成為 slot,但只有HTMLImageElement、SVGElement和PinElement類型的元素會用於繪製標記,其他元素則會遭到忽略。、 HTMLImageElement和SVGElement必須先包裝在<template>元素中,才能指派給Marker3DElement的預設插槽。目前系統會先將圖片和 SVG 光柵化,再於 3D 場景中算繪,因此嵌入 SVG 或新增至圖片的 CSS 類別中的自訂 HTML 不會套用,且標記顯示在畫面上時可能不會反映。 | 
| 方法 | |
|---|---|
| addEventListener | addEventListener(type, listener[, options])參數:   
 傳回值:   void設定函式,每當指定事件傳送至目標時,系統就會呼叫該函式。請參閱 addEventListener。 | 
| removeEventListener | removeEventListener(type, listener[, options])參數:   
 傳回值:   void從目標中移除先前透過 addEventListener 註冊的事件監聽器。請參閱「removeEventListener」。 | 
Marker3DElementOptions interface
google.maps.maps3d.Marker3DElementOptions
介面
Marker3DElementOptions 物件,用於定義可在 Marker3DElement 上設定的屬性。
| 屬性 | |
|---|---|
| altitudeMode optional | 類型:   AltitudeMode optional詳情請參閱《 Marker3DElement.altitudeMode》。 | 
| collisionBehavior optional | 類型:   CollisionBehavior optional | 
| drawsWhenOccluded optional | 類型:   boolean optional | 
| extruded optional | 類型:   boolean optional詳情請參閱《 Marker3DElement.extruded》。 | 
| label optional | 類型:   string optional詳情請參閱《 Marker3DElement.label》。 | 
| position optional | 類型:   LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional詳情請參閱《 Marker3DElement.position》。 | 
| sizePreserved optional | 類型:   boolean optional詳情請參閱《 Marker3DElement.sizePreserved》。 | 
| zIndex optional | 類型:   number optional詳情請參閱《 Marker3DElement.zIndex》。 | 
Marker3DInteractiveElement class
google.maps.maps3d.Marker3DInteractiveElement
class
在 3D 地圖上顯示位置。請注意,必須設定 position,Marker3DInteractiveElement 才會顯示。與 Marker3DElement 不同,Marker3DInteractiveElement 會收到 gmp-click 事件。
自訂元素:
<gmp-marker-3d-interactive gmp-popover-target="popover-id" title="string"></gmp-marker-3d-interactive>
這個類別會擴充 Marker3DElement。
這個類別會實作 Marker3DInteractiveElementOptions。
撥打 const {Marker3DInteractiveElement} = await google.maps.importLibrary("maps3d") 即可存取。
請參閱「Maps JavaScript API 中的程式庫」。
| 建構函式 | |
|---|---|
| Marker3DInteractiveElement | Marker3DInteractiveElement([options])參數:   
 使用指定的選項建立  Marker3DInteractiveElement。 | 
| 屬性 | |
|---|---|
| gmpPopoverTargetElement | 類型:   PopoverElement optional設定後,系統會在點選這個標記時開啟彈出式視窗元素。 HTML 屬性: 
 | 
| title | 類型:   string滑鼠游標懸停效果文字。如果提供無障礙文字 (例如搭配螢幕閱讀器使用),系統會將該值新增至  Marker3DInteractiveElement。HTML 屬性: 
 | 
| 已繼承: altitudeMode、collisionBehavior、drawsWhenOccluded、extruded、label、position、sizePreserved、zIndex | |
| 運算單元 | |
|---|---|
| default | 直接新增至  Marker3DInteractiveElement的任何自訂元素都會插入,但只有PinElement類型的元素會用於繪製標記,其他元素則會遭到忽略。 | 
| 方法 | |
|---|---|
| addEventListener | addEventListener(type, listener[, options])參數:   
 傳回值:   void設定函式,每當指定事件傳送至目標時,系統就會呼叫該函式。請參閱 addEventListener。 | 
| removeEventListener | removeEventListener(type, listener[, options])參數:   
 傳回值:   void從目標中移除先前透過 addEventListener 註冊的事件監聽器。請參閱「removeEventListener」。 | 
| 事件 | |
|---|---|
| gmp-click | function(clickEvent)引數:   
 點選  Marker3DInteractiveElement元素時,系統會觸發此事件。 | 
Marker3DInteractiveElementOptions 介面
google.maps.maps3d.Marker3DInteractiveElementOptions
介面
Marker3DInteractiveElementOptions 物件,用於定義可在 Marker3DInteractiveElement 上設定的屬性。
這個介面會擴充
Marker3DElementOptions。
| 屬性 | |
|---|---|
| gmpPopoverTargetElement optional | 類型:   PopoverElement optional | 
| title optional | 類型:   string optional詳情請參閱《 Marker3DInteractiveElement.title》。 | 
| 已繼承: altitudeMode、collisionBehavior、drawsWhenOccluded、extruded、label、position、sizePreserved、zIndex | |
Model3DElement 類別
google.maps.maps3d.Model3DElement
class
可算繪 gLTF 模型的 3D 模型。請注意,必須設定 position 和 src,Model3DElement 才會顯示。
 應支援 gLTF PBR 的核心屬性。目前不支援擴充功能或擴充功能屬性。
自訂元素:
<gmp-model-3d altitude-mode="absolute" orientation="heading,tilt,roll" position="lat,lng" scale="number" src="url"></gmp-model-3d>
這個類別會擴充 HTMLElement。
這個類別會實作 Model3DElementOptions。
撥打 const {Model3DElement} = await google.maps.importLibrary("maps3d") 即可存取。
請參閱「Maps JavaScript API 中的程式庫」。
| 建構函式 | |
|---|---|
| Model3DElement | Model3DElement([options])參數:   
 使用指定的選項建立  Model3DElement。 | 
| 屬性 | |
|---|---|
| altitudeMode | 類型:   AltitudeMode optional指定如何解讀位置資訊中的海拔高度。 HTML 屬性: 
 | 
| orientation | 類型:   Orientation3D|Orientation3DLiteral optional說明如何旋轉 3D 模型的座標系統,以便將模型放置在 3D 地圖上。 系統會依序對模型套用以下旋轉角度:側滾、傾斜和航向。 HTML 屬性: 
 | 
| position | 類型:   LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional設定  Model3DElement的位置。在特定模式下,系統會忽略海拔高度,因此這是選填欄位。HTML 屬性: 
 | 
| scale | 類型:   number|Vector3D|Vector3DLiteral optional預設值:  1在模型座標空間中,沿著 x、y 和 z 軸縮放模型。 HTML 屬性: 
 | 
| src | 類型:   string|URL optional指定 3D 模型的網址。目前僅支援  .glb格式的模型。系統會將所有相對 HTTP 網址解析為對應的絕對網址。 請注意,如果您的 .glb模型檔案託管在與主要應用程式不同的網站或伺服器上,請務必設定正確的 CORS HTTP 標頭。這樣一來,您的應用程式就能安全地存取其他網域的模型檔案。HTML 屬性: 
 | 
| 方法 | |
|---|---|
| addEventListener | addEventListener(type, listener[, options])參數:   
 傳回值:   void設定函式,每當指定事件傳送至目標時,系統就會呼叫該函式。請參閱 addEventListener。 | 
| removeEventListener | removeEventListener(type, listener[, options])參數:   
 傳回值:   void從目標中移除先前透過 addEventListener 註冊的事件監聽器。請參閱「removeEventListener」。 | 
Model3DElementOptions 介面
google.maps.maps3d.Model3DElementOptions
介面
Model3DElementOptions 物件,用於定義可在 Model3DElement 上設定的屬性。
| 屬性 | |
|---|---|
| altitudeMode optional | 類型:   AltitudeMode optional詳情請參閱《 Model3DElement.altitudeMode》。 | 
| orientation optional | 類型:   Orientation3D|Orientation3DLiteral optional詳情請參閱《 Model3DElement.orientation》。 | 
| position optional | 類型:   LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional詳情請參閱《 Model3DElement.position》。 | 
| scale optional | 類型:   number|Vector3D|Vector3DLiteral optional詳情請參閱《 Model3DElement.scale》。 | 
| src optional | 類型:   string|URL optional詳情請參閱《 Model3DElement.src》。 | 
Model3DInteractiveElement class
google.maps.maps3d.Model3DInteractiveElement
class
可算繪 gLTF 模型的 3D 模型。請注意,必須設定 position 和 src,Model3DElement 才會顯示。
 應支援 gLTF PBR 的核心屬性。目前不支援擴充功能或擴充功能屬性。
 與 Model3DElement 不同,Model3DInteractiveElement 會收到 gmp-click 事件。
自訂元素:
<gmp-model-3d-interactive></gmp-model-3d-interactive>
這個類別會擴充 Model3DElement。
這個類別會實作 Model3DInteractiveElementOptions。
撥打 const {Model3DInteractiveElement} = await google.maps.importLibrary("maps3d") 即可存取。
請參閱「Maps JavaScript API 中的程式庫」。
| 建構函式 | |
|---|---|
| Model3DInteractiveElement | Model3DInteractiveElement([options])參數:   
 使用指定的選項建立  Model3DInteractiveElement。 | 
| 屬性 | |
|---|---|
| 已繼承: altitudeMode、orientation、position、scale、src | 
| 方法 | |
|---|---|
| addEventListener | addEventListener(type, listener[, options])參數:   
 傳回值:   void設定函式,每當指定事件傳送至目標時,系統就會呼叫該函式。請參閱 addEventListener。 | 
| removeEventListener | removeEventListener(type, listener[, options])參數:   
 傳回值:   void從目標中移除先前透過 addEventListener 註冊的事件監聽器。請參閱「removeEventListener」。 | 
| 事件 | |
|---|---|
| gmp-click | function(clickEvent)引數:   
 點選  Model3DInteractiveElement元素時,系統會觸發此事件。 | 
Model3DInteractiveElementOptions 介面
google.maps.maps3d.Model3DInteractiveElementOptions
介面
Model3DInteractiveElementOptions 物件,用於定義可在 Model3DInteractiveElement 上設定的屬性。
這個介面會擴充
Model3DElementOptions。
| 屬性 | |
|---|---|
| 已繼承: altitudeMode、orientation、position、scale、src | 
Polyline3DElement class
google.maps.maps3d.Polyline3DElement
class
3D 折線是 3D 地圖上連接線段的線性疊加層。
自訂元素:
<gmp-polyline-3d altitude-mode="absolute" draws-occluded-segments extruded geodesic outer-color="string" outer-width="number" path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..." stroke-color="string" stroke-width="number" z-index="number"></gmp-polyline-3d>
這個類別會擴充 HTMLElement。
這個類別會實作 Polyline3DElementOptions。
撥打 const {Polyline3DElement} = await google.maps.importLibrary("maps3d") 即可存取。
請參閱「Maps JavaScript API 中的程式庫」。
| 建構函式 | |
|---|---|
| Polyline3DElement | Polyline3DElement([options])參數:   
 使用指定的選項建立  Polyline3DElement。 | 
| 屬性 | |
|---|---|
| altitudeMode | 類型:   AltitudeMode optional指定如何解讀座標中的海拔高度元件。 HTML 屬性: 
 | 
| drawsOccludedSegments | 類型:   boolean optional預設值:  false指定是否要繪製可能遭遮蔽的折線部分。折線可能會被地圖幾何圖形 (例如建築物) 遮住。 HTML 屬性: 
 | 
| extruded | 類型:   boolean optional預設值:  false指定是否要將折線連到地面。如要擠出折線, altitudeMode必須是RELATIVE_TO_GROUND或ABSOLUTE。HTML 屬性: 
 | 
| geodesic | 類型:   boolean optional預設值:  false如果  true,系統會將折線的邊緣解譯為測地線,並沿著地球的曲度繪製。當false時,折線的邊緣會在螢幕空間中轉譯為直線。HTML 屬性: 
 | 
| outerColor | 類型:   string optional外側顏色。系統支援所有 CSS3 顏色。 HTML 屬性: 
 | 
| outerWidth | 類型:   number optional外寬介於  0.0和1.0之間。這是strokeWidth的百分比。HTML 屬性: 
 | 
| path | 類型:   Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optional折線座標的排列順序。在特定模式下,系統會忽略海拔高度,因此這是選填欄位。 HTML 屬性: 
 | 
| strokeColor | 類型:   string optional筆觸色彩。系統支援所有 CSS3 顏色。 HTML 屬性: 
 | 
| strokeWidth | 類型:   number optional筆觸寬度 (以像素為單位)。 HTML 屬性: 
 | 
| zIndex | 類型:   number optional和其他多邊形比較的 zIndex。 HTML 屬性: 
 | 
|  | 類型:   Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optional折線座標的排列順序。在特定模式下,系統會忽略海拔高度,因此這是選填欄位。 | 
| 方法 | |
|---|---|
| addEventListener | addEventListener(type, listener[, options])參數:   
 傳回值:   void設定函式,每當指定事件傳送至目標時,系統就會呼叫該函式。請參閱 addEventListener。 | 
| removeEventListener | removeEventListener(type, listener[, options])參數:   
 傳回值:   void從目標中移除先前透過 addEventListener 註冊的事件監聽器。請參閱「removeEventListener」。 | 
Polyline3DElementOptions 介面
google.maps.maps3d.Polyline3DElementOptions
介面
Polyline3DElementOptions 物件,用於定義可在 Polyline3DElement 上設定的屬性。
| 屬性 | |
|---|---|
| altitudeMode optional | 類型:   AltitudeMode optional詳情請參閱《 Polyline3DElement.altitudeMode》。 | 
| coordinates optional | 類型:   Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optional詳情請參閱《 》。 | 
| drawsOccludedSegments optional | 類型:   boolean optional | 
| extruded optional | 類型:   boolean optional詳情請參閱《 Polyline3DElement.extruded》。 | 
| geodesic optional | 類型:   boolean optional詳情請參閱《 Polyline3DElement.geodesic》。 | 
| outerColor optional | 類型:   string optional詳情請參閱《 Polyline3DElement.outerColor》。 | 
| outerWidth optional | 類型:   number optional詳情請參閱《 Polyline3DElement.outerWidth》。 | 
| strokeColor optional | 類型:   string optional詳情請參閱《 Polyline3DElement.strokeColor》。 | 
| strokeWidth optional | 類型:   number optional詳情請參閱《 Polyline3DElement.strokeWidth》。 | 
| zIndex optional | 類型:   number optional詳情請參閱《 Polyline3DElement.zIndex》。 | 
Polyline3DInteractiveElement class
google.maps.maps3d.Polyline3DInteractiveElement
class
3D 折線是 3D 地圖上連接線段的線性疊加層。與 Polyline3DElement 不同,Polyline3DInteractiveElement 會收到 gmp-click 事件。
自訂元素:
<gmp-polyline-3d-interactive></gmp-polyline-3d-interactive>
這個類別會擴充 Polyline3DElement。
這個類別會實作 Polyline3DInteractiveElementOptions。
撥打 const {Polyline3DInteractiveElement} = await google.maps.importLibrary("maps3d") 即可存取。
請參閱「Maps JavaScript API 中的程式庫」。
| 建構函式 | |
|---|---|
| Polyline3DInteractiveElement | Polyline3DInteractiveElement([options])參數:   
 使用指定的選項建立  Polyline3DInteractiveElement。 | 
| 屬性 | |
|---|---|
| 繼承: altitudeMode、drawsOccludedSegments、extruded、geodesic、outerColor、outerWidth、path、strokeColor、strokeWidth、zIndex、 | 
| 方法 | |
|---|---|
| addEventListener | addEventListener(type, listener[, options])參數:   
 傳回值:   void設定函式,每當指定事件傳送至目標時,系統就會呼叫該函式。請參閱 addEventListener。 | 
| removeEventListener | removeEventListener(type, listener[, options])參數:   
 傳回值:   void從目標中移除先前透過 addEventListener 註冊的事件監聽器。請參閱「removeEventListener」。 | 
| 事件 | |
|---|---|
| gmp-click | function(clickEvent)引數:   
 點選  Polyline3DInteractiveElement元素時,系統會觸發此事件。 | 
Polyline3DInteractiveElementOptions 介面
google.maps.maps3d.Polyline3DInteractiveElementOptions
介面
Polyline3DInteractiveElementOptions 物件,用於定義可在 Polyline3DInteractiveElement 上設定的屬性。
這個介面會擴充
Polyline3DElementOptions。
| 屬性 | |
|---|---|
| 繼承: altitudeMode、coordinates、drawsOccludedSegments、extruded、geodesic、outerColor、outerWidth、strokeColor、strokeWidth、zIndex | 
Polygon3DElement class
google.maps.maps3d.Polygon3DElement
class
3D 多邊形 (如 3D 折線) 會定義一系列依序排列的連續座標。此外,多邊形會形成封閉迴圈,並定義填滿的區域。
自訂元素:
<gmp-polygon-3d altitude-mode="absolute" draws-occluded-segments extruded fill-color="string" geodesic path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..." stroke-color="string" stroke-width="number" z-index="number"></gmp-polygon-3d>
這個類別會擴充 HTMLElement。
這個類別會實作 Polygon3DElementOptions。
撥打 const {Polygon3DElement} = await google.maps.importLibrary("maps3d") 即可存取。
請參閱「Maps JavaScript API 中的程式庫」。
| 建構函式 | |
|---|---|
| Polygon3DElement | Polygon3DElement([options])參數:   
 使用指定的選項建立  Polygon3DElement。 | 
| 屬性 | |
|---|---|
| altitudeMode | 類型:   AltitudeMode optional指定如何解讀座標中的海拔高度元件。 HTML 屬性: 
 | 
| drawsOccludedSegments | 類型:   boolean optional預設值:  false指定是否要繪製可能遭遮蔽的多邊形部分。多邊形可能會遭地圖幾何圖形 (例如建築物) 遮蔽。 HTML 屬性: 
 | 
| extruded | 類型:   boolean optional預設值:  false指定是否要將多邊形連接至地面。如要擠出多邊形, altitudeMode必須是RELATIVE_TO_GROUND或ABSOLUTE。HTML 屬性: 
 | 
| fillColor | 類型:   string optional填色。系統支援所有 CSS3 顏色。 HTML 屬性: 
 | 
| geodesic | 類型:   boolean optional預設值:  false如果  true,系統會將多邊形的邊緣解讀為測地線,並沿著地球的曲度。當false時,多邊形的邊緣會在螢幕空間中轉譯為直線。HTML 屬性: 
 | 
| innerPaths | 類型:   Iterable<Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral>> optional指定閉合迴圈的座標順序。與折線不同,多邊形可能由一或多個路徑組成,在多邊形內建立多個剪裁區域。 | 
| path | 類型:   Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optional指定閉合迴圈的座標順序。在特定模式下,系統會忽略海拔高度,因此這是選填欄位。 HTML 屬性: 
 | 
| strokeColor | 類型:   string optional筆觸色彩。系統支援所有 CSS3 顏色。 HTML 屬性: 
 | 
| strokeWidth | 類型:   number optional筆觸寬度 (以像素為單位)。 HTML 屬性: 
 | 
| zIndex | 類型:   number optional和其他多邊形比較的 zIndex。 HTML 屬性: 
 | 
|  | 類型:   Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optional指定閉合迴圈的座標順序。在特定模式下,系統會忽略海拔高度,因此這是選填欄位。 | 
|  | 類型:   Iterable<Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral>> optional指定閉合迴圈的座標順序。與折線不同,多邊形可能由一或多個路徑組成,在多邊形內建立多個剪裁區域。 | 
| 方法 | |
|---|---|
| addEventListener | addEventListener(type, listener[, options])參數:   
 傳回值:   void設定函式,每當指定事件傳送至目標時,系統就會呼叫該函式。請參閱 addEventListener。 | 
| removeEventListener | removeEventListener(type, listener[, options])參數:   
 傳回值:   void從目標中移除先前透過 addEventListener 註冊的事件監聽器。請參閱「removeEventListener」。 | 
Polygon3DElementOptions 介面
google.maps.maps3d.Polygon3DElementOptions
介面
Polygon3DElementOptions 物件,用於定義可在 Polygon3DElement 上設定的屬性。
| 屬性 | |
|---|---|
| altitudeMode optional | 類型:   AltitudeMode optional詳情請參閱《 Polygon3DElement.altitudeMode》。 | 
| drawsOccludedSegments optional | 類型:   boolean optional | 
| extruded optional | 類型:   boolean optional詳情請參閱《 Polygon3DElement.extruded》。 | 
| fillColor optional | 類型:   string optional詳情請參閱《 Polygon3DElement.fillColor》。 | 
| geodesic optional | 類型:   boolean optional詳情請參閱《 Polygon3DElement.geodesic》。 | 
| innerCoordinates optional | 類型:   Iterable<Iterable<LatLngAltitude|LatLngAltitudeLiteral>|Iterable<LatLngLiteral>> optional | 
| outerCoordinates optional | 類型:   Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optional | 
| strokeColor optional | 類型:   string optional詳情請參閱《 Polygon3DElement.strokeColor》。 | 
| strokeWidth optional | 類型:   number optional詳情請參閱《 Polygon3DElement.strokeWidth》。 | 
| zIndex optional | 類型:   number optional詳情請參閱《 Polygon3DElement.zIndex》。 | 
Polygon3DInteractiveElement class
google.maps.maps3d.Polygon3DInteractiveElement
class
3D 多邊形 (如 3D 折線) 會定義一系列依序排列的連續座標。此外,多邊形會形成封閉迴圈,並定義填滿的區域。與 Polygon3DElement 不同,Polygon3DInteractiveElement 會收到 gmp-click 事件。
自訂元素:
<gmp-polygon-3d-interactive></gmp-polygon-3d-interactive>
這個類別會擴充 Polygon3DElement。
這個類別會實作 Polygon3DInteractiveElementOptions。
撥打 const {Polygon3DInteractiveElement} = await google.maps.importLibrary("maps3d") 即可存取。
請參閱「Maps JavaScript API 中的程式庫」。
| 建構函式 | |
|---|---|
| Polygon3DInteractiveElement | Polygon3DInteractiveElement([options])參數:   
 使用指定的選項建立  Polygon3DInteractiveElement。 | 
| 屬性 | |
|---|---|
| 繼承: altitudeMode、drawsOccludedSegments、extruded、fillColor、geodesic、innerPaths、path、strokeColor、strokeWidth、zIndex、、 | 
| 方法 | |
|---|---|
| addEventListener | addEventListener(type, listener[, options])參數:   
 傳回值:   void設定函式,每當指定事件傳送至目標時,系統就會呼叫該函式。請參閱 addEventListener。 | 
| removeEventListener | removeEventListener(type, listener[, options])參數:   
 傳回值:   void從目標中移除先前透過 addEventListener 註冊的事件監聽器。請參閱「removeEventListener」。 | 
| 事件 | |
|---|---|
| gmp-click | function(clickEvent)引數:   
 點選  Polygon3DInteractiveElement元素時,系統會觸發此事件。 | 
Polygon3DInteractiveElementOptions 介面
google.maps.maps3d.Polygon3DInteractiveElementOptions
介面
Polygon3DInteractiveElementOptions 物件,用於定義可在 Polygon3DInteractiveElement 上設定的屬性。
這個介面會擴充
Polygon3DElementOptions。
| 屬性 | |
|---|---|
| 繼承: altitudeMode、drawsOccludedSegments、extruded、fillColor、geodesic、innerCoordinates、outerCoordinates、strokeColor、strokeWidth、zIndex | 
PopoverElement 類別
google.maps.maps3d.PopoverElement
class
可顯示快顯視窗的自訂 HTML 元素。外觀像泡泡,通常會連到標記。
自訂元素:
<gmp-popover altitude-mode="absolute" light-dismiss-disabled open position-anchor="lat,lng"></gmp-popover>
這個類別會擴充 HTMLElement。
這個類別會實作 PopoverElementOptions。
撥打 const {PopoverElement} = await google.maps.importLibrary("maps3d") 即可存取。
請參閱「Maps JavaScript API 中的程式庫」。
| 建構函式 | |
|---|---|
| PopoverElement | PopoverElement([options])參數:   
 | 
| 屬性 | |
|---|---|
| altitudeMode | 類型:   AltitudeMode optional指定如何解讀位置的海拔高度元件。 HTML 屬性: 
 | 
| lightDismissDisabled | 類型:   boolean optional預設值:  false指定是否應「輕觸關閉」這個彈出式視窗。「輕觸即可關閉」行為與設定  popover="auto"屬性類似,後者是瀏覽器 Popover API 的一部分。HTML 屬性: 
 | 
| open | 類型:   boolean optional預設值:  false指定這個快顯視窗是否應開啟。 HTML 屬性: 
 | 
| positionAnchor | 類型:   LatLngLiteral|LatLngAltitudeLiteral|Marker3DInteractiveElement|string optional要顯示這個浮動視窗的位置。如果快顯視窗錨定至互動式標記,系統會改用標記的位置。 HTML 屬性: 
 | 
| 運算單元 | |
|---|---|
| default | 將已插入的內容放在彈出式視窗的主要部分。 | 
| header | 將已插入的內容放在彈出式視窗的標題部分。 | 
| CSS 屬性 | |
|---|---|
| --gmp-popover-max-width | 彈出式視窗的最大寬度,無論內容寬度為何。 | 
| --gmp-popover-min-width | 彈出式視窗的最小寬度,無論內容寬度為何。使用這個屬性時,強烈建議將其設為小於地圖寬度 (以像素為單位) 的值。 | 
| --gmp-popover-pixel-offset-x | 從地圖上某個點 (浮動視窗錨定於該點的地理座標) 到浮動視窗尖端的 x 軸偏移量 (以像素為單位)。 | 
| --gmp-popover-pixel-offset-y | 從地圖上某個點 (彈出式視窗的地理座標錨定位置) 到彈出式視窗尖端的 y 軸偏移量 (以像素為單位)。 | 
| color-scheme | 指出這個浮動視窗可使用的色彩配置。詳情請參閱 color-scheme說明文件。如未指定,系統預設會使用使用者的色彩配置偏好設定。 | 
| 方法 | |
|---|---|
| addEventListener | addEventListener(type, listener[, options])參數:   
 傳回值:   void設定函式,每當指定事件傳送至目標時,系統就會呼叫該函式。請參閱 addEventListener。 | 
| removeEventListener | removeEventListener(type, listener[, options])參數:   
 傳回值:   void從目標中移除先前透過 addEventListener 註冊的事件監聽器。請參閱「removeEventListener」。 | 
PopoverElementOptions interface
google.maps.maps3d.PopoverElementOptions
介面
PopoverElementOptions 物件,用於定義可在 PopoverElement 上設定的屬性。
| 屬性 | |
|---|---|
| altitudeMode optional | 類型:   AltitudeMode optional詳情請參閱《 PopoverElement.altitudeMode》。 | 
| lightDismissDisabled optional | 類型:   boolean optional | 
| open optional | 類型:   boolean optional詳情請參閱《 PopoverElement.open》。 | 
| positionAnchor optional | 類型:   LatLngLiteral|LatLngAltitudeLiteral|string|Marker3DInteractiveElement optional詳情請參閱《 PopoverElement.positionAnchor》。 | 
AltitudeMode 常數
google.maps.maps3d.AltitudeMode
常數
指定如何解讀座標中的海拔高度元件。
撥打 const {AltitudeMode} = await google.maps.importLibrary("maps3d") 即可存取。
請參閱「Maps JavaScript API 中的程式庫」。
| 常數 | |
|---|---|
| ABSOLUTE | 可表示相對於平均海平面的物體。這也表示如果物件下方的地形詳細程度有所變更,物件的絕對位置仍會維持不變。 | 
| CLAMP_TO_GROUND | 可表示放置在地上的物件。無論提供的高度為何,這些點都會保持在地面高度。如果物件位於大片水域上方,系統會將物件放置在海平面。 | 
| RELATIVE_TO_GROUND | 可表示相對於地面的物件。如果地形詳細程度有所變更,物體相對於地面的位置仍會保持不變。在水面上時,海拔高度會解讀為高於海平面的公尺值。 | 
| RELATIVE_TO_MESH | 可表示相對於地面、建築物和水面最高點的物件。如果位於水面上,則為水面;如果位於地形上,則為建築物表面 (如有) 或地面 (如無建築物)。 |