3D Maps

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
指定為 LatLng 海拔高度的地圖中心，海拔高度為公尺以上的地面。請注意，這個欄位未必是攝影機的所在位置，因為 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
要在地圖上顯示之地面的最高海拔高度。有效值介於 0 到 63170000 公尺之間 (地球半徑乘以 10)。
HTML 屬性：
  • <gmp-map-3d max-altitude="number"></gmp-map-3d>
maxHeading
類型：  number optional
地圖的最大角度 (旋轉)。有效值介於 0 和 360 度之間。minHeading 和 maxHeading 表示允許標題手勢 (<= 360 度) 的間隔時間。minHeading = 180和maxHeading = 90將允許「[0, 90]」中的標題和「[180, 360]」中的標題。minHeading = 90和maxHeading = 180將允許「[90, 180]」中的標題。
HTML 屬性：
  • <gmp-map-3d max-heading="number"></gmp-map-3d>
maxTilt
類型：  number optional
地圖的入射角上限。有效值介於 0 和 90 度之間。
HTML 屬性：
  • <gmp-map-3d max-tilt="number"></gmp-map-3d>
minAltitude
類型：  number optional
要在地圖上顯示的最高海拔高度，有效值介於 0 到 63170000 公尺之間 (地球半徑乘以 10)。
HTML 屬性：
  • <gmp-map-3d min-altitude="number"></gmp-map-3d>
minHeading
類型：  number optional
地圖方向的最小角度 (旋轉)。有效值介於 0 和 360 度之間。minHeading 和 maxHeading 表示允許標題手勢 (<= 360 度) 的間隔時間。minHeading = 180和maxHeading = 90將允許「[0, 90]」中的標題和「[180, 360]」中的標題。minHeading = 90和maxHeading = 180將允許「[90, 180]」中的標題。
HTML 屬性：
  • <gmp-map-3d min-heading="number"></gmp-map-3d>
minTilt
類型：  number optional
地圖的最小射角。有效值介於 0 和 90 度之間。
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
攝影機視角向量的傾斜度。直視地在地球的檢視向量，其傾斜度為 0 度。如果檢視向量指向地球，其傾斜度為 180 度。
HTML 屬性：
  • <gmp-map-3d tilt="number"></gmp-map-3d>
BetaaddEventListener
addEventListener(type, listener[, options])
參數： 
  • type：string 區分大小寫的字串，代表要監聽的事件類型。
  • listener：EventListener|EventListenerObject 接收通知的物件。這必須是函式或含有 handleEvent 方法的物件
  • options：boolean|AddEventListenerOptions optional查看選項。自訂事件僅支援 capture 和 passive。
傳回值：  void
設定每次指定事件傳送至目標時要呼叫的函式。請參閱 addEventListener
BetaremoveEventListener
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
詳情請參閱《Map3DElement.center》。
defaultLabelsDisabled optional
類型：  boolean optional
詳情請參閱《Map3DElement.defaultLabelsDisabled》。
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 屬性：
  • <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_GROUND 或 ABSOLUTE。
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.0 和 1.0 之間。
HTML 屬性：
  • <gmp-polyline-3d outer-opacity="number"></gmp-polyline-3d>
outerWidth
類型：  number optional
外部寬度介於 0.0 和 1.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.0 和 1.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])
參數： 
  • type：string 區分大小寫的字串，代表要監聽的事件類型。
  • listener：EventListener|EventListenerObject 接收通知的物件。這必須是函式或含有 handleEvent 方法的物件
  • options：boolean|AddEventListenerOptions optional查看選項。自訂事件僅支援 capture 和 passive。
傳回值：  void
設定每次指定事件傳送至目標時要呼叫的函式。請參閱 addEventListener
BetaremoveEventListener
removeEventListener(type, listener[, options])
參數： 
傳回值：  void
從目標中移除先前以 addEventListener 註冊的事件監聽器。請參閱 removeEventListener

Polyline3DElementOptions 介面

google.maps.maps3d.Polyline3DElementOptions 介面

Polyline3DElementOptions 物件，用來定義可在 Polyline3DElement 上設定的屬性。
altitudeMode optional
類型：  AltitudeMode optional
詳情請參閱《Polyline3DElement.altitudeMode》。
coordinates optional
詳情請參閱《Polyline3DElement.coordinates》。
drawsOccludedSegments optional
類型：  boolean optional
預設： false
詳情請參閱《Polyline3DElement.drawsOccludedSegments》。
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 屬性：
  • <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_GROUND 或 ABSOLUTE。
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.0 和 1.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])
參數： 
  • type：string 區分大小寫的字串，代表要監聽的事件類型。
  • listener：EventListener|EventListenerObject 接收通知的物件。這必須是函式或含有 handleEvent 方法的物件
  • options：boolean|AddEventListenerOptions optional查看選項。自訂事件僅支援 capture 和 passive。
傳回值：  void
設定每次指定事件傳送至目標時要呼叫的函式。請參閱 addEventListener
BetaremoveEventListener
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
詳情請參閱《Polygon3DElement.drawsOccludedSegments》。
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
詳情請參閱《Polygon3DElement.innerCoordinates》。
outerCoordinates optional
詳情請參閱《Polygon3DElement.outerCoordinates》。
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 允許根據地面 + 建築物 + 水面最高者表示物件。當水流過水時，就會有水面。疊加在地形上時，這將會是建築物表面 (如果有的話) 或地面表面 (如果沒有建築物)。