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