Map3DElement 類別
google.maps.maps3d.Map3DElement
class
Map3DElement 是 3D 地圖檢視畫面的 HTML 介面。
自訂元素：
<gmp-map-3d center="lat,lng,altitude" default-labels-disabled heading="number" max-altitude="number" max-heading="number" max-tilt="number" min-altitude="number" min-heading="number" min-tilt="number" 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 屬性：
|
defaultLabelsDisabled |
類型：
boolean optional預設值：
false當
true 時，系統不會算繪預設地圖標籤。HTML 屬性：
|
heading |
類型：
number optional地圖的指南針航向，以度為單位，正北為零。在沒有傾斜的情況下，系統會將任何傾斜動作解讀為方向。
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 屬性：
|
range |
類型：
number optional攝影機與地圖中心的距離，以公尺為單位。
HTML 屬性：
|
roll |
類型：
number optional相機環繞檢視向量旋轉的角度。為避免產生歧義，在沒有傾斜的情況下，系統會將任何傾斜解讀為方向。
HTML 屬性：
|
tilt |
類型：
number optional相機視角向量傾斜的角度，以度為單位。直接向下看地球的視圖向量會傾斜零度。指向地球外部的檢視向量會傾斜
180 度。HTML 屬性：
|
方法 | |
|---|---|
|
addEventListener(type, listener[, options])參數：
傳回值：
void設定函式，在指定事件傳送至目標時呼叫。請參閱 addEventListener |
|
removeEventListener(type, listener[, options])參數：
傳回值：
void從目標中移除先前使用 addEventListener 註冊的事件監聽器。請參閱 removeEventListener |
活動 | |
|---|---|
gmp-centerchange |
function(centerChangeEvent)引數：
當 Map3DElement 的 center 屬性變更時，系統會觸發此事件。 |
gmp-click |
function(clickEvent)引數：
點選 Map3DElement 元素時，系統會觸發此事件。 |
gmp-headingchange |
function(headingChangeEvent)引數：
當 Map3DElement 的標頭屬性變更時，系統會觸發此事件。 |
gmp-rangechange |
function(rangeChangeEvent)引數：
當 Map3DElement 的 range 屬性變更時，系統會觸發此事件。 |
gmp-rollchange |
function(rollChangeEvent)引數：
當 Map3DElement 的 roll 屬性變更時，系統會觸發此事件。 |
gmp-steadychange |
function(steadyChangeEvent)引數：
當 Map3DElement 的穩態發生變化時，系統會觸發此事件。 |
gmp-tiltchange |
function(tiltChangeEvent)引數：
當 Map3DElement 的傾斜屬性變更時，系統會觸發此事件。 |
Map3DElementOptions 介面
google.maps.maps3d.Map3DElementOptions
介面
Map3DElementOptions 物件用於定義可在 Map3DElement 上設定的屬性。
屬性 | |
|---|---|
bounds optional |
類型：
LatLngBounds|LatLngBoundsLiteral optional詳情請參閱《 Map3DElement.bounds》。 |
center optional |
類型：
LatLngAltitude|LatLngAltitudeLiteral optional詳情請參閱《 Map3DElement.center》。 |
defaultLabelsDisabled optional |
類型：
boolean optional |
heading optional |
類型：
number optional詳情請參閱《 Map3DElement.heading》。 |
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》。 |
range optional |
類型：
number optional詳情請參閱《 Map3DElement.range》。 |
roll optional |
類型：
number optional詳情請參閱《 Map3DElement.roll》。 |
tilt optional |
類型：
number optional詳情請參閱《 Map3DElement.tilt》。 |
SteadyChangeEvent 類別
google.maps.maps3d.SteadyChangeEvent
class
這項事件是透過監控 Map3DElement 的穩定狀態建立。這個事件會透過 DOM 樹狀結構向上傳遞。
這個類別會擴充 Event。
請呼叫 const {SteadyChangeEvent} = await google.maps.importLibrary("maps3d") 存取。請參閱「Maps JavaScript API 中的程式庫」。
屬性 | |
|---|---|
isSteady |
類型：
boolean指出 Map3DElement 是否穩定 (即目前場景的所有算繪作業都已完成)。 |
ClickEvent 類別
google.maps.maps3d.ClickEvent
class
這項事件是透過點選 Map3DElement 建立。
這個類別會擴充 Event。
請呼叫 const {ClickEvent} = await google.maps.importLibrary("maps3d") 存取。請參閱「Maps JavaScript API 中的程式庫」。
屬性 | |
|---|---|
position |
類型：
LatLngAltitude optional事件發生時，游標下方的緯度/經度/高度。請注意，在較粗略的層級，系統會傳回精確度較低的資料。此外，如果從較高的位置點選水面，系統可能會傳回海底高度值做為海拔高度值。這個事件會透過 DOM 樹狀結構向上傳遞。 |
CenterChangeEvent 類別
google.maps.maps3d.CenterChangeEvent
class
此事件是根據 Map3DElement 的監控中心變更建立。這個事件會透過 DOM 樹狀結構向上傳遞。
這個類別會擴充 Event。
請呼叫 const {CenterChangeEvent} = await google.maps.importLibrary("maps3d") 存取。請參閱「Maps JavaScript API 中的程式庫」。
HeadingChangeEvent class
google.maps.maps3d.HeadingChangeEvent
class
這項事件是根據 Map3DElement 上的監控標題變更建立。這個事件會透過 DOM 樹狀結構向上傳遞。
這個類別會擴充 Event。
請呼叫 const {HeadingChangeEvent} = await google.maps.importLibrary("maps3d") 存取。請參閱「Maps JavaScript API 中的程式庫」。
RangeChangeEvent 類別
google.maps.maps3d.RangeChangeEvent
class
此事件是因 Map3DElement 的監控範圍變更而建立。這個事件會透過 DOM 樹狀結構向上傳遞。
這個類別會擴充 Event。
請呼叫 const {RangeChangeEvent} = await google.maps.importLibrary("maps3d") 存取。請參閱「Maps JavaScript API 中的程式庫」。
RollChangeEvent 類別
google.maps.maps3d.RollChangeEvent
class
這項事件是根據 Map3DElement 的監控輪替變更建立。這個事件會透過 DOM 樹狀結構向上傳遞。
這個類別會擴充 Event。
請呼叫 const {RollChangeEvent} = await google.maps.importLibrary("maps3d") 存取。請參閱「Maps JavaScript API 中的程式庫」。
TiltChangeEvent 類別
google.maps.maps3d.TiltChangeEvent
class
這項事件是透過監控 Map3DElement 的傾斜度變更而建立。這個事件會透過 DOM 樹狀結構向上傳遞。
這個類別會擴充 Event。
請呼叫 const {TiltChangeEvent} = await google.maps.importLibrary("maps3d") 存取。請參閱「Maps JavaScript API 中的程式庫」。
Polyline3DElement 類別
google.maps.maps3d.Polyline3DElement
class
3D 折線是 3D 地圖上連接線段的線性疊加層。
自訂元素：
<gmp-polyline-3d altitude-mode="absolute" draws-occluded-segments extruded geodesic outer-color="string" outer-opacity="number" outer-width="number" stroke-color="string" stroke-opacity="number" stroke-width="number" z-index="number"></gmp-polyline-3d>
這個類別會擴充 HTMLElement。
這個類別會實作 Polyline3DElementOptions。
請呼叫 const {Polyline3DElement} = await google.maps.importLibrary("maps3d") 存取。請參閱「Maps JavaScript API 中的程式庫」。
建構函式 | |
|---|---|
Polyline3DElement |
Polyline3DElement([options])參數：
|
屬性 | |
|---|---|
altitudeMode |
類型：
AltitudeMode optional指定如何解讀座標中的高度元件。
HTML 屬性：
|
coordinates |
類型：
Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optional折線座標的排列順序。在某些模式中，系統會忽略高度，因此高度為選用值。 |
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 屬性：
|
outerOpacity |
類型：
number optional0.0 和 1.0 之間的外部透明度。HTML 屬性：
|
outerWidth |
類型：
number optional外部寬度介於
0.0 和 1.0 之間。這是 strokeWidth 的百分比。HTML 屬性：
|
strokeColor |
類型：
string optional筆觸色彩。系統支援所有 CSS3 顏色。
HTML 屬性：
|
strokeOpacity |
類型：
number optional筆劃不透明度，範圍介於
0.0 和 1.0 之間。HTML 屬性：
|
strokeWidth |
類型：
number optional筆觸寬度 (以像素為單位)。
HTML 屬性：
|
zIndex |
類型：
number optional和其他多邊形比較的 zIndex。
HTML 屬性：
|
方法 | |
|---|---|
|
addEventListener(type, listener[, options])參數：
傳回值：
void設定函式，在指定事件傳送至目標時呼叫。請參閱 addEventListener |
|
removeEventListener(type, listener[, options])參數：
傳回值：
void從目標中移除先前使用 addEventListener 註冊的事件監聽器。請參閱 removeEventListener |
Polyline3DElementOptions 介面
google.maps.maps3d.Polyline3DElementOptions
介面
Polyline3DElementOptions 物件用於定義可在 Polyline3DElement 上設定的屬性。
Polygon3DElement 類別
google.maps.maps3d.Polygon3DElement
class
3D 多邊形 (例如 3D 折線) 會以有序序列定義一系列連接的座標。此外，多邊形會形成封閉迴圈，並定義填滿的區域。
自訂元素：
<gmp-polygon-3d altitude-mode="absolute" draws-occluded-segments extruded fill-color="string" fill-opacity="number" geodesic stroke-color="string" stroke-opacity="number" stroke-width="number" z-index="number"></gmp-polygon-3d>
這個類別會擴充 HTMLElement。
這個類別會實作 Polygon3DElementOptions。
請呼叫 const {Polygon3DElement} = await google.maps.importLibrary("maps3d") 存取。請參閱「Maps JavaScript API 中的程式庫」。
建構函式 | |
|---|---|
Polygon3DElement |
Polygon3DElement([options])參數：
|
屬性 | |
|---|---|
altitudeMode |
類型：
AltitudeMode optional指定如何解讀座標中的高度元件。
HTML 屬性：
|
drawsOccludedSegments |
類型：
boolean optional預設值：
false指定是否要繪製可能會遮蔽的多邊形部分。多邊形可能會遭到地圖幾何圖形 (例如建築物) 遮蔽。
HTML 屬性：
|
extruded |
類型：
boolean optional預設值：
false指定是否要將多邊形連線至地面。如要擠出多邊形，
altitudeMode 必須為 RELATIVE_TO_GROUND 或 ABSOLUTE。HTML 屬性：
|
fillColor |
類型：
string optional填色。系統支援所有 CSS3 顏色。
HTML 屬性：
|
fillOpacity |
類型：
number optional填滿透明度介於 0.0 和 1.0 之間。
HTML 屬性：
|
geodesic |
類型：
boolean optional預設值：
false當
true 為真時，多邊形的邊會解讀為測地線，並遵循地球的曲率。當 false 時，多邊形的邊緣會在螢幕空間中以直線方式算繪。HTML 屬性：
|
innerCoordinates |
類型：
Iterable<Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral>> optional指定閉合迴圈的座標順序。與多邊形不同，多邊形可能包含一或多個路徑，這些路徑會在多邊形內建立多個切口。 |
outerCoordinates |
類型：
Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optional指定閉合迴圈的座標順序。在某些模式中，系統會忽略高度，因此高度為選用值。 |
strokeColor |
類型：
string optional筆觸色彩。系統支援所有 CSS3 顏色。
HTML 屬性：
|
strokeOpacity |
類型：
number optional筆劃不透明度，範圍介於
0.0 和 1.0 之間。HTML 屬性：
|
strokeWidth |
類型：
number optional筆觸寬度 (以像素為單位)。
HTML 屬性：
|
zIndex |
類型：
number optional和其他多邊形比較的 zIndex。
HTML 屬性：
|
方法 | |
|---|---|
|
addEventListener(type, listener[, options])參數：
傳回值：
void設定函式，在指定事件傳送至目標時呼叫。請參閱 addEventListener |
|
removeEventListener(type, listener[, options])參數：
傳回值：
void從目標中移除先前使用 addEventListener 註冊的事件監聽器。請參閱 removeEventListener |
Polygon3DElementOptions 介面
google.maps.maps3d.Polygon3DElementOptions
介面
Polygon3DElementOptions 物件用於定義可在 Polygon3DElement 上設定的屬性。
屬性 | |
|---|---|
altitudeMode optional |
類型：
AltitudeMode optional詳情請參閱《 Polygon3DElement.altitudeMode》。 |
drawsOccludedSegments optional |
類型：
boolean optional預設值：
false |
extruded optional |
類型：
boolean optional預設值：
false詳情請參閱《 Polygon3DElement.extruded》。 |
fillColor optional |
類型：
string optional詳情請參閱《 Polygon3DElement.fillColor》。 |
fillOpacity optional |
類型：
number optional詳情請參閱《 Polygon3DElement.fillOpacity》。 |
geodesic optional |
類型：
boolean optional預設值：
false詳情請參閱《 Polygon3DElement.geodesic》。 |
innerCoordinates optional |
類型：
Iterable<Iterable<LatLngAltitude|LatLngAltitudeLiteral>|Iterable<LatLngLiteral>> optional |
outerCoordinates optional |
類型：
Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optional |
strokeColor optional |
類型：
string optional詳情請參閱《 Polygon3DElement.strokeColor》。 |
strokeOpacity optional |
類型：
number optional詳情請參閱《 Polygon3DElement.strokeOpacity》。 |
strokeWidth optional |
類型：
number optional詳情請參閱《 Polygon3DElement.strokeWidth》。 |
zIndex optional |
類型：
number optional詳情請參閱《 Polygon3DElement.zIndex》。 |
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 |
可讓您根據地面、建築物和水面最高點來表示物件。在水上飛行時，這會是水面；在陸地上飛行時，這會是建築物表面 (如有) 或地面 (如沒有建築物)。 |