Map3DElement 類別
google.maps.maps3d.Map3DElement 類別
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以經緯度提供的地圖中心，其中的高度是以公尺為單位的公尺。請注意，這不一定是攝影機的位置，因為
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 的 heading 屬性變更時，會引發此事件。 |
gmp-rangechange |
function(rangeChangeEvent)引數：
當 Map3DElement 的範圍屬性變更時，會引發此事件。 |
gmp-rollchange |
function(rollChangeEvent)引數：
當 Map3DElement 的滾動屬性變更時，會引發此事件。 |
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 |
maxHeading optional |
類型：
number optional |
maxTilt optional |
類型：
number optional查看《 Map3DElement.maxTilt》。 |
minAltitude optional |
類型：
number optional |
minHeading optional |
類型：
number optional |
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 類別
此事件是透過監控 Map3DElement 的穩定狀態建立而建立。
這個類別會擴充 Event。
呼叫 const {SteadyChangeEvent} = await google.maps.importLibrary("maps3d") 即可存取。請參閱 Maps JavaScript API 中的程式庫。
屬性 | |
|---|---|
isSteady |
類型：
boolean指出 Map3DElement 是否穩定 (即目前場景的所有轉譯完成)。 |
ClickEvent 類別
google.maps.maps3d.ClickEvent 類別
此事件是藉由點擊 Map3DElement 而建立。
這個類別會擴充 Event。
呼叫 const {ClickEvent} = await google.maps.importLibrary("maps3d") 即可存取。請參閱 Maps JavaScript API 中的程式庫。
屬性 | |
|---|---|
position |
類型：
LatLngAltitude optional事件發生時，遊標下方的經緯度/海拔高度。請注意，在較低層級，傳回的資料會較不準確。此外，在從較高相機位置按一下水面時，可能會傳回海底高度值。 |
CenterChangeEvent 類別
google.maps.maps3d.CenterChangeEvent 類別
這個事件是根據 Map3DElement 的監控中心變更建立。
這個類別會擴充 Event。
呼叫 const {CenterChangeEvent} = await google.maps.importLibrary("maps3d") 即可存取。請參閱 Maps JavaScript API 中的程式庫。
HeadingChangeEvent 類別
google.maps.maps3d.HeadingChangeEvent 類別
這個事件是根據監控 Map3DElement 的標題變更建立的建立而成。
這個類別會擴充 Event。
呼叫 const {HeadingChangeEvent} = await google.maps.importLibrary("maps3d") 即可存取。請參閱 Maps JavaScript API 中的程式庫。
RangeChangeEvent 類別
google.maps.maps3d.RangeChangeEvent 類別
這個事件來自 Map3DElement 的監控範圍變更。
這個類別會擴充 Event。
呼叫 const {RangeChangeEvent} = await google.maps.importLibrary("maps3d") 即可存取。請參閱 Maps JavaScript API 中的程式庫。
RollChangeEvent 類別
google.maps.maps3d.RollChangeEvent 類別
這個事件是根據監控 Map3DElement 的滾動情況建立而建立。
這個類別會擴充 Event。
呼叫 const {RollChangeEvent} = await google.maps.importLibrary("maps3d") 即可存取。請參閱 Maps JavaScript API 中的程式庫。
TiltChangeEvent 類別
google.maps.maps3d.TiltChangeEvent 類別
這個事件是透過監控 Map3DElement 的傾斜度變更而建立。
這個類別會擴充 Event。
呼叫 const {TiltChangeEvent} = await google.maps.importLibrary("maps3d") 即可存取。請參閱 Maps JavaScript API 中的程式庫。
Polyline3DElement 類別
google.maps.maps3d.Polyline3DElement 類別
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 optional0.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 上設定的屬性。
屬性 | |
|---|---|
altitudeMode optional |
類型：
AltitudeMode optional |
coordinates optional |
類型：
Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optional |
drawsOccludedSegments optional |
類型：
boolean optional預設：
false |
extruded optional |
類型：
boolean optional預設：
false |
geodesic optional |
類型：
boolean optional預設：
false |
outerColor optional |
類型：
string optional |
outerOpacity optional |
類型：
number optional |
outerWidth optional |
類型：
number optional |
strokeColor optional |
類型：
string optional |
strokeOpacity optional |
類型：
number optional |
strokeWidth optional |
類型：
number optional |
zIndex optional |
類型：
number optional |
Polygon3DElement 類別
google.maps.maps3d.Polygon3DElement 類別
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 optional0.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 |
drawsOccludedSegments optional |
類型：
boolean optional預設：
false |
extruded optional |
類型：
boolean optional預設：
false |
fillColor optional |
類型：
string optional |
fillOpacity optional |
類型：
number optional |
geodesic optional |
類型：
boolean optional預設：
false |
innerCoordinates optional |
類型：
Iterable<Iterable<LatLngAltitude|LatLngAltitudeLiteral>|Iterable<LatLngLiteral>> optional |
outerCoordinates optional |
類型：
Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optional |
strokeColor optional |
類型：
string optional |
strokeOpacity optional |
類型：
number optional |
strokeWidth optional |
類型：
number optional |
zIndex optional |
類型：
number optional |
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 |
允許呈現相對於地面 + 建築物+水面最高的物體。水面上會有水面，在地形上下方會顯示建築物表面 (如有) 或地面表面 (如果沒有建築物)。 |