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 | 可表示相對於地面、建築物和水面最高點的物件。如果位於水面上,則為水面;如果位於地形上,則為建築物表面 (如有) 或地面 (如無建築物)。 |