3D Maps

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
設定後,將相機位置限制在指定的經緯度邊界內。請注意,邊界外的物件仍會呈現。邊界可以限制經緯度,或是只能限制經緯度。如果是僅限緯度,則會分別使用西經度和東經度 -180180。如果是僅限經度,則會分別使用南緯度和南緯度 90-90
center
以經緯度提供的地圖中心,其中的高度是以公尺為單位的公尺。請注意,這不一定是攝影機的位置,因為 range 欄位會影響攝影機與地圖中心的距離。如未設定,則預設為 {lat: 0, lng: 0, altitude: 63170000}。最大海拔高度為 63170000 公尺 (地球半徑乘以 10)。
HTML 屬性:
  • <gmp-map-3d center="lat,lng,altitude"></gmp-map-3d>
defaultLabelsDisabled
類型:  boolean optional
預設: false
如果設為 true,系統不會轉譯預設地圖標籤。
HTML 屬性:
  • <gmp-map-3d default-labels-disabled></gmp-map-3d>
heading
類型:  number optional
地圖的指南針方向,以度為單位,由北方為零。如果沒有傾斜,系統會將任何擲骰子視為方向。
HTML 屬性:
  • <gmp-map-3d heading="number"></gmp-map-3d>
maxAltitude
類型:  number optional
地圖上將顯示出的地面最高海拔高度。有效值介於 063170000 公尺之間 (地球半徑乘以 10)。
HTML 屬性:
  • <gmp-map-3d max-altitude="number"></gmp-map-3d>
maxHeading
類型:  number optional
地圖的最大方向 (旋轉)。有效值介於 0360 度之間。minHeadingmaxHeading 代表的間隔為 <= 360 度,即可使用方向手勢。minHeading = 180maxHeading = 90 將允許 [0, 90] 中的標題和 [180, 360] 中的標題。minHeading = 90maxHeading = 180 將允許在 [90, 180] 中使用標題。
HTML 屬性:
  • <gmp-map-3d max-heading="number"></gmp-map-3d>
maxTilt
類型:  number optional
地圖入射角度上限。有效值介於 090 度之間。
HTML 屬性:
  • <gmp-map-3d max-tilt="number"></gmp-map-3d>
minAltitude
類型:  number optional
將在地圖上顯示的最小海拔高度,有效值介於 063170000 公尺之間 (地球半徑乘以 10)。
HTML 屬性:
  • <gmp-map-3d min-altitude="number"></gmp-map-3d>
minHeading
類型:  number optional
地圖的最小方向 (旋轉)。有效值介於 0360 度之間。minHeadingmaxHeading 代表的間隔為 <= 360 度,即可使用方向手勢。minHeading = 180maxHeading = 90 將允許 [0, 90] 中的標題和 [180, 360] 中的標題。minHeading = 90maxHeading = 180 將允許在 [90, 180] 中使用標題。
HTML 屬性:
  • <gmp-map-3d min-heading="number"></gmp-map-3d>
minTilt
類型:  number optional
地圖入射角的最小角度。有效值介於 090 度之間。
HTML 屬性:
  • <gmp-map-3d min-tilt="number"></gmp-map-3d>
range
類型:  number optional
相機與地圖中心之間的距離 (以公尺為單位)。
HTML 屬性:
  • <gmp-map-3d range="number"></gmp-map-3d>
roll
類型:  number optional
攝影機圍繞檢視向量的角度。為解決模稜兩可的問題,如果沒有傾斜,所有擲出的結果都會視為方向。
HTML 屬性:
  • <gmp-map-3d roll="number"></gmp-map-3d>
tilt
類型:  number optional
攝影機檢視向量的傾斜度 (以度為單位)。直接向下看地球的檢視向量,傾斜度為零度。遠離地球的檢視向量會有 180 度的傾斜度。
HTML 屬性:
  • <gmp-map-3d tilt="number"></gmp-map-3d>
BetaaddEventListener
addEventListener(type, listener[, options])
參數: 
  • typestring 這是區分大小寫的字串,代表要監聽的事件類型。
  • listenerEventListener|EventListenerObject 接收通知的物件。這必須是內含 handleEvent 方法的函式或物件
  • optionsboolean|AddEventListenerOptions optional 查看選項。自訂事件僅支援 capturepassive
傳回值:  void
設定會在指定事件傳送至目標時呼叫的函式。詳情請參閱 addEventListener
BetaremoveEventListener
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
查看《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 屬性:
  • <gmp-polyline-3d altitude-mode="absolute"></gmp-polyline-3d>
  • <gmp-polyline-3d altitude-mode="clamp-to-ground"></gmp-polyline-3d>
  • <gmp-polyline-3d altitude-mode="relative-to-ground"></gmp-polyline-3d>
  • <gmp-polyline-3d altitude-mode="relative-to-mesh"></gmp-polyline-3d>
coordinates
折線座標的排列順序。某些模式會忽略高度,因此選用。
drawsOccludedSegments
類型:  boolean optional
預設: false
指定是否要繪製折線中可遮蔽的部分。折線可由地圖幾何圖形遮蔽 (例如建築物)。
HTML 屬性:
  • <gmp-polyline-3d draws-occluded-segments></gmp-polyline-3d>
extruded
類型:  boolean optional
預設: false
指定是否要將折線連接到地面。如要擷取折線,altitudeMode 必須為 RELATIVE_TO_GROUNDABSOLUTE
HTML 屬性:
  • <gmp-polyline-3d extruded></gmp-polyline-3d>
geodesic
類型:  boolean optional
預設: false
true 時,系統會將折線邊緣解讀為測地線,並遵循地球的彎曲度。使用 false 時,折線的邊緣會在螢幕空間中算繪為直線。
HTML 屬性:
  • <gmp-polyline-3d geodesic></gmp-polyline-3d>
outerColor
類型:  string optional
外部顏色。除了延伸的具名色彩之外,也支援所有的 CSS3 色彩。
HTML 屬性:
  • <gmp-polyline-3d outer-color="string"></gmp-polyline-3d>
outerOpacity
類型:  number optional
0.01.0 之間的外部不透明度。
HTML 屬性:
  • <gmp-polyline-3d outer-opacity="number"></gmp-polyline-3d>
outerWidth
類型:  number optional
外部寬度介於 0.01.0 之間。這是 strokeWidth 的百分比。
HTML 屬性:
  • <gmp-polyline-3d outer-width="number"></gmp-polyline-3d>
strokeColor
類型:  string optional
筆觸色彩。除了延伸的具名色彩之外,也支援所有的 CSS3 色彩。
HTML 屬性:
  • <gmp-polyline-3d stroke-color="string"></gmp-polyline-3d>
strokeOpacity
類型:  number optional
0.01.0 之間的筆劃不透明度。
HTML 屬性:
  • <gmp-polyline-3d stroke-opacity="number"></gmp-polyline-3d>
strokeWidth
類型:  number optional
筆觸寬度 (以像素為單位)。
HTML 屬性:
  • <gmp-polyline-3d stroke-width="number"></gmp-polyline-3d>
zIndex
類型:  number optional
和其他多邊形比較的 zIndex。
HTML 屬性:
  • <gmp-polyline-3d z-index="number"></gmp-polyline-3d>
BetaaddEventListener
addEventListener(type, listener[, options])
參數: 
  • typestring 這是區分大小寫的字串,代表要監聽的事件類型。
  • listenerEventListener|EventListenerObject 接收通知的物件。這必須是內含 handleEvent 方法的函式或物件
  • optionsboolean|AddEventListenerOptions optional 查看選項。自訂事件僅支援 capturepassive
傳回值:  void
設定會在指定事件傳送至目標時呼叫的函式。詳情請參閱 addEventListener
BetaremoveEventListener
removeEventListener(type, listener[, options])
參數: 
傳回值:  void
從目標中移除先前使用 addEventListener 註冊的事件監聽器。詳情請參閱「removeEventListener

Polyline3DElementOptions 介面

google.maps.maps3d.Polyline3DElementOptions 介面

Polyline3DElementOptions 物件,用來定義可在 Polyline3DElement 上設定的屬性。

altitudeMode optional
類型:  AltitudeMode optional
coordinates 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 屬性:
  • <gmp-polygon-3d altitude-mode="absolute"></gmp-polygon-3d>
  • <gmp-polygon-3d altitude-mode="clamp-to-ground"></gmp-polygon-3d>
  • <gmp-polygon-3d altitude-mode="relative-to-ground"></gmp-polygon-3d>
  • <gmp-polygon-3d altitude-mode="relative-to-mesh"></gmp-polygon-3d>
drawsOccludedSegments
類型:  boolean optional
預設: false
指定是否要繪製多邊形的部分,多邊形可以用地圖幾何圖形 (例如建築物) 遮蔽。
HTML 屬性:
  • <gmp-polygon-3d draws-occluded-segments></gmp-polygon-3d>
extruded
類型:  boolean optional
預設: false
指定是否要將多邊形與地面連接。如要擷取多邊形,altitudeMode 必須是 RELATIVE_TO_GROUNDABSOLUTE
HTML 屬性:
  • <gmp-polygon-3d extruded></gmp-polygon-3d>
fillColor
類型:  string optional
填色。除了延伸的具名色彩之外,也支援所有的 CSS3 色彩。
HTML 屬性:
  • <gmp-polygon-3d fill-color="string"></gmp-polygon-3d>
fillOpacity
類型:  number optional
填滿透明度介於 0.0 和 1.0 之間。
HTML 屬性:
  • <gmp-polygon-3d fill-opacity="number"></gmp-polygon-3d>
geodesic
類型:  boolean optional
預設: false
使用 true 時,多邊形邊緣會解讀為測地線,並遵循地球的彎曲度。使用 false 時,多邊形的邊緣會在螢幕空間中以直線呈現。
HTML 屬性:
  • <gmp-polygon-3d geodesic></gmp-polygon-3d>
innerCoordinates
指定閉合迴圈的座標順序。與折線不同,多邊形可能包含一或多條路徑,而這些路徑會在多邊形中建立多個切割點。
outerCoordinates
指定閉合迴圈的座標順序。某些模式會忽略高度,因此選用。
strokeColor
類型:  string optional
筆觸色彩。除了延伸的具名色彩之外,也支援所有的 CSS3 色彩。
HTML 屬性:
  • <gmp-polygon-3d stroke-color="string"></gmp-polygon-3d>
strokeOpacity
類型:  number optional
0.01.0 之間的筆劃不透明度。
HTML 屬性:
  • <gmp-polygon-3d stroke-opacity="number"></gmp-polygon-3d>
strokeWidth
類型:  number optional
筆觸寬度 (以像素為單位)。
HTML 屬性:
  • <gmp-polygon-3d stroke-width="number"></gmp-polygon-3d>
zIndex
類型:  number optional
和其他多邊形比較的 zIndex。
HTML 屬性:
  • <gmp-polygon-3d z-index="number"></gmp-polygon-3d>
BetaaddEventListener
addEventListener(type, listener[, options])
參數: 
  • typestring 這是區分大小寫的字串,代表要監聽的事件類型。
  • listenerEventListener|EventListenerObject 接收通知的物件。這必須是內含 handleEvent 方法的函式或物件
  • optionsboolean|AddEventListenerOptions optional 查看選項。自訂事件僅支援 capturepassive
傳回值:  void
設定會在指定事件傳送至目標時呼叫的函式。詳情請參閱 addEventListener
BetaremoveEventListener
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
outerCoordinates 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 允許呈現相對於地面 + 建築物+水面最高的物體。水面上會有水面,在地形上下方會顯示建築物表面 (如有) 或地面表面 (如果沒有建築物)。