Map3D 元素 類別
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 指定為 LatLng 海拔高度的地圖中心,海拔高度為公尺以上的地面。請注意,這個欄位未必是攝影機的所在位置,因為
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 攝影機視角向量的傾斜度。直視地在地球的檢視向量,其傾斜度為 0 度。如果檢視向量指向地球,其傾斜度為
180 度。HTML 屬性:
|
方法 | |
---|---|
|
addEventListener(type, listener[, options]) 參數:
傳回值:
void 設定每次指定事件傳送至目標時要呼叫的函式。請參閱 addEventListener |
|
removeEventListener(type, listener[, options]) 參數:
傳回值:
void 從目標中移除先前以 addEventListener 註冊的事件監聽器。請參閱 removeEventListener |
活動 | |
---|---|
gmp-centerchange |
function(centerChangeEvent) 引數:
當 Map3DElement 的中心屬性變更時,會引發此事件。 |
gmp-click |
function(clickEvent) 引數:
使用者點選 Map3DElement 元素時,會觸發此事件。 |
gmp-headingchange |
function(headingChangeEvent) 引數:
當 Map3DElement 的方向屬性變更時,會引發此事件。 |
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 詳情請參閱《 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
類別
此事件的建立原因為監控穩定狀態「Map3DElement
」。這個事件會在 DOM 樹狀結構中亮起。
這個類別
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 事件發生時,遊標下方的經緯度/海拔高度。請注意,在較不準確的情況下,系統傳回的資料會較不準確。此外,當您從較高鏡頭位置點選水面,系統可能會傳回海底高度值。這個事件會在 DOM 樹狀結構中亮起。 |
CenterChangeEvent 類別
google.maps.maps3d.CenterChangeEvent
類別
這個事件是在 Map3DElement
變更監控中心變更而建立。這個事件會在 DOM 樹狀結構中亮起。
這個類別
Event
。
呼叫 const {CenterChangeEvent} = await google.maps.importLibrary("maps3d")
即可存取。請參閱 Maps JavaScript API 中的程式庫。
HeadingChangeEvent 類別
google.maps.maps3d.HeadingChangeEvent
類別
這個事件是在 Map3DElement
監控標題變更而建立。這個事件會在 DOM 樹狀結構中亮起。
這個類別
Event
。
呼叫 const {HeadingChangeEvent} = await google.maps.importLibrary("maps3d")
即可存取。請參閱 Maps JavaScript API 中的程式庫。
RangeChangeEvent 類別
google.maps.maps3d.RangeChangeEvent
類別
這個事件是在 Map3DElement
發生監控範圍變更時建立。這個事件會在 DOM 樹狀結構中亮起。
這個類別
Event
。
呼叫 const {RangeChangeEvent} = await google.maps.importLibrary("maps3d")
即可存取。請參閱 Maps JavaScript API 中的程式庫。
RollChangeEvent 類別
google.maps.maps3d.RollChangeEvent
類別
這個事件是在「Map3DElement
」的監控滾動式變更中建立。這個事件會在 DOM 樹狀結構中亮起。
這個類別
Event
。
呼叫 const {RollChangeEvent} = await google.maps.importLibrary("maps3d")
即可存取。請參閱 Maps JavaScript API 中的程式庫。
TiltChangeEvent 類別
google.maps.maps3d.TiltChangeEvent
類別
這個事件是在 Map3DElement
監控的傾斜變更建立。這個事件會在 DOM 樹狀結構中亮起。
這個類別
Event
。
呼叫 const {TiltChangeEvent} = await google.maps.importLibrary("maps3d")
即可存取。請參閱 Maps JavaScript API 中的程式庫。
折線 3D 元素 類別
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 optional 外部不透明度,範圍介於
0.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 上設定的屬性。
屬性 | |
---|---|
altitudeMode optional |
類型:
AltitudeMode optional 詳情請參閱《 Polyline3DElement.altitudeMode 》。 |
coordinates optional |
類型:
Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optional 詳情請參閱《 Polyline3DElement.coordinates 》。 |
drawsOccludedSegments optional |
類型:
boolean optional 預設:
false |
extruded optional |
類型:
boolean optional 預設:
false 詳情請參閱《 Polyline3DElement.extruded 》。 |
geodesic optional |
類型:
boolean optional 預設:
false 詳情請參閱《 Polyline3DElement.geodesic 》。 |
outerColor optional |
類型:
string optional 詳情請參閱《 Polyline3DElement.outerColor 》。 |
outerOpacity optional |
類型:
number optional 詳情請參閱《 Polyline3DElement.outerOpacity 》。 |
outerWidth optional |
類型:
number optional 詳情請參閱《 Polyline3DElement.outerWidth 》。 |
strokeColor optional |
類型:
string optional 詳情請參閱《 Polyline3DElement.strokeColor 》。 |
strokeOpacity optional |
類型:
number optional 詳情請參閱《 Polyline3DElement.strokeOpacity 》。 |
strokeWidth optional |
類型:
number optional 詳情請參閱《 Polyline3DElement.strokeWidth 》。 |
zIndex optional |
類型:
number optional 詳情請參閱《 Polyline3DElement.zIndex 》。 |
多邊形 3D 元素 類別
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 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
介面
用來定義可在 Polygon3DElement 上設定的屬性的 Polygon3DElementOptions 物件。
屬性 | |
---|---|
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 |
允許根據地面 + 建築物 + 水面最高者表示物件。當水流過水時,就會有水面。疊加在地形上時,這將會是建築物表面 (如果有的話) 或地面表面 (如果沒有建築物)。 |