3D Maps

Map3DElement 類別

google.maps.maps3d.Map3DElement 類別

Map3DElement 是 3D 地圖檢視畫面的 HTML 介面。

自訂元素:
<gmp-map-3d center="lat,lng,altitude" default-labels-disabled default-ui-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
地圖中心以 LatLngAltitude 提供,其中海拔高度以公尺為單位,表示地面以上高度。請注意,這不一定是攝影機的位置,因為 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>
defaultUIDisabled
類型:boolean optional
預設值:false
true 時,所有預設 UI 按鈕都會停用。不會停用鍵盤和手勢控制功能。
HTML 屬性:
  • <gmp-map-3d default-ui-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])
參數: 
傳回值:  void
設定函式,在指定事件傳送至目標時呼叫。請參閱 addEventListener
flyCameraAround
flyCameraAround(options)
參數: 
傳回值:
這個方法會在指定時間內,讓攝影機圍繞特定位置旋轉指定次數。

根據預設,相機會順時針旋轉。如果指定的輪次為負數,相機會改為逆時針方向旋轉。

由於動畫只能在地圖載入最少量資料後開始,因此該方法為非同步。這個方法會在動畫開始後傳回。

如果輪數為零,系統就不會旋轉,動畫會在開始後立即結束。
flyCameraTo
flyCameraTo(options)
參數: 
傳回值:
這個方法會在指定時間內,以拋物線方式將攝影機從目前位置移至指定終點位置。

由於動畫只能在地圖載入最少量資料後開始,因此該方法為非同步。動畫開始播放後,方法就會傳回。
BetaremoveEventListener
removeEventListener(type, listener[, options])
參數: 
傳回值:  void
從目標中移除先前使用 addEventListener 註冊的事件監聽器。請參閱 removeEventListener
stopCameraAnimation
stopCameraAnimation()
參數:
傳回值:
這個方法會停止任何可能正在執行的飛越動畫。相機會停留在動畫中間的任何位置,不會傳送至終點。

由於動畫只能在地圖載入最少量資料後開始或停止,因此該方法為非同步。動畫停止後,方法就會傳回。
gmp-animationend
function(animationEndEvent)
引數:
  • animationEndEventEvent
飛行動畫結束時會觸發此事件。這個事件會透過 DOM 樹狀結構向上傳遞。
gmp-centerchange
function(centerChangeEvent)
引數:
  • centerChangeEventEvent
當 Map3DElement 的 center 屬性變更時,系統會觸發這個事件。
gmp-click
function(clickEvent)
引數: 
點選 Map3DElement 元素時,系統會觸發此事件。
gmp-headingchange
function(headingChangeEvent)
引數:
  • headingChangeEventEvent
當 Map3DElement 的標頭屬性變更時,系統會觸發此事件。
gmp-rangechange
function(rangeChangeEvent)
引數:
  • rangeChangeEventEvent
當 Map3DElement 的 range 屬性變更時,系統會觸發此事件。
gmp-rollchange
function(rollChangeEvent)
引數: 
  • rollChangeEventEvent
當 Map3DElement 的滾動屬性變更時,會引發此事件。
gmp-steadychange
function(steadyChangeEvent)
引數:
Map3DElement 的穩態發生變化時,系統會觸發此事件。
gmp-tiltchange
function(tiltChangeEvent)
引數:
當 Map3DElement 的傾斜屬性變更時,系統會觸發此事件。

Map3DElementOptions 介面

google.maps.maps3d.Map3DElementOptions 介面

Map3DElementOptions 物件用於定義可在 Map3DElement 上設定的屬性。

bounds optional
詳情請參閱《Map3DElement.bounds》。
center optional
詳情請參閱《Map3DElement.center》。
defaultLabelsDisabled optional
類型:boolean optional
詳情請參閱《Map3DElement.defaultLabelsDisabled》。
defaultUIDisabled optional
類型:boolean optional
詳情請參閱《Map3DElement.defaultUIDisabled》。
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》。

FlyAroundAnimationOptions 介面

google.maps.maps3d.FlyAroundAnimationOptions 介面

FlyCameraAround 動畫的自訂選項。

camera
類型:CameraOptions
相機在旋轉動畫期間應注視的中心點。請注意,當相機圍繞這個中心點旋轉時,地圖方向會隨之變更。
durationMillis optional
類型:number optional
動畫的時間長度 (以毫秒為單位)。這是動畫的總時間長度,而非單一旋轉動作的時間長度。
rounds optional
類型:number optional
在指定時間內,圍繞中心旋轉的圈數。這項屬性可控制旋轉的整體速度。將負數傳遞至 rounds 會導致攝影機以逆時針方向旋轉,而非預設的順時針方向。

FlyToAnimationOptions 介面

google.maps.maps3d.FlyToAnimationOptions 介面

FlyCameraTo 動畫的自訂選項。

endCamera
類型:CameraOptions
攝影機指向動畫結束時的位置。
durationMillis optional
類型:number optional
動畫的時間長度 (以毫秒為單位)。時間長度為 0 時,攝影機會直接傳送至結束位置。

CameraOptions 介面

google.maps.maps3d.CameraOptions 介面

CameraOptions 物件可用來定義可設定至相機物件的屬性。攝影機物件可以是任何具有攝影機位置的任何資訊,例如目前的地圖狀態,或是未來要求的動畫狀態。

center optional
詳情請參閱《Map3DElement.center》。
heading optional
類型:number optional
詳情請參閱《Map3DElement.heading》。
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 是否穩定 (即目前場景的所有算繪作業皆已完成)。

LocationClickEvent 類別

google.maps.maps3d.LocationClickEvent class

這項事件是透過點按 Map3DElement 建立。

這個類別會擴充 Event

請呼叫 const {LocationClickEvent} = await google.maps.importLibrary("maps3d") 存取。請參閱 Maps JavaScript API 中的程式庫

position
類型:LatLngAltitude optional
事件發生時,游標下方的緯度/經度/高度。請注意,在較粗略的層級,系統會傳回精確度較低的資料。此外,當您從較高鏡頭位置點選水面,系統可能會傳回海底高度值。這個事件會在 DOM 樹狀結構中亮起。

PlaceClickEvent 類別

google.maps.maps3d.PlaceClickEvent class

這項事件是透過點按 Map3DElement 建立。

這個類別會擴充 LocationClickEvent

呼叫 const {PlaceClickEvent} = await google.maps.importLibrary("maps3d") 即可存取。請參閱「Maps JavaScript API 中的程式庫」。

placeId
類型:  string
地圖項目的地點 ID。
繼承: position
fetchPlace
fetchPlace()
參數:
傳回值:  Promise<Place>
擷取此地點 ID 的 Place。在產生的 Place 物件中,系統會填入 id 屬性。之後您可以透過 Place.fetchFields() 要求其他欄位,但必須遵守正常的 Places API 啟用和計費規定。如果擷取 Place 時發生錯誤,則會拒絕承諾。

Marker3DElement 類別

google.maps.maps3d.Marker3DElement class

顯示 3D 地圖上的位置。請注意,必須設定 positionMarker3DElement 才能顯示。

自訂元素:
<gmp-marker-3d altitude-mode="absolute" collision-behavior="required" draws-when-occluded extruded label="string" size-preserved z-index="number"></gmp-marker-3d>

這個類別會擴充 HTMLElement

這個類別會實作 Marker3DElementOptions

請呼叫 const {Marker3DElement} = await google.maps.importLibrary("maps3d") 存取。請參閱 Maps JavaScript API 中的程式庫

Marker3DElement
Marker3DElement([options])
參數: 
使用指定的選項建立 Marker3DElement
altitudeMode
類型:AltitudeMode optional
指定如何解讀位置的海拔高度元件。
HTML 屬性:
  • <gmp-marker-3d altitude-mode="absolute"></gmp-marker-3d>
  • <gmp-marker-3d altitude-mode="clamp-to-ground"></gmp-marker-3d>
  • <gmp-marker-3d altitude-mode="relative-to-ground"></gmp-marker-3d>
  • <gmp-marker-3d altitude-mode="relative-to-mesh"></gmp-marker-3d>
collisionBehavior
類型:CollisionBehavior optional
此列舉會指定 Marker3DElement 與其他 Marker3DElement 或底圖標籤衝突時的行為。
HTML 屬性:
  • <gmp-marker-3d collision-behavior="required"></gmp-marker-3d>
  • <gmp-marker-3d collision-behavior="required-and-hides-optional"></gmp-marker-3d>
  • <gmp-marker-3d collision-behavior="optional-and-hides-lower-priority"></gmp-marker-3d>
drawsWhenOccluded
類型:boolean optional
預設值:false
指定標記在遮蔽時是否應繪製。標記可能會遭到地圖幾何圖形 (例如建築物) 遮蔽。
HTML 屬性:
  • <gmp-marker-3d draws-when-occluded></gmp-marker-3d>
extruded
類型:boolean optional
預設: false
指定是否要將標記連結至地面。如要擠出標記,altitudeMode 必須為 RELATIVE_TO_GROUNDABSOLUTE
HTML 屬性:
  • <gmp-marker-3d extruded></gmp-marker-3d>
label
類型:string optional
使用此標記要顯示的文字。
HTML 屬性:
  • <gmp-marker-3d label="string"></gmp-marker-3d>
position
標記小費的位置。在某些模式中,系統會忽略高度,因此高度為選用值。
sizePreserved
類型:boolean optional
預設: false
指定無論與攝影機的距離為何,這個標記是否應保留其大小。根據預設,標記會根據距離攝影機/傾斜角度進行縮放。
HTML 屬性:
  • <gmp-marker-3d size-preserved></gmp-marker-3d>
zIndex
類型:  number optional
與其他標記比較的 zIndex。
HTML 屬性:
  • <gmp-marker-3d z-index="number"></gmp-marker-3d>
default
直接新增至 Marker3DElement 的所有自訂元素都會設為版位,但只有 HTMLImageElementSVGElementPinElement 類型的元素會用於繪製標記,其他元素會忽略其他元素。
HTMLImageElementSVGElement 必須先包裝在 <template> 元素中,才能指派至 Marker3DElement 的預設插槽。

目前,圖片和 SVG 會先經過光柵化,才會在 3D 場景中算繪,因此不會套用嵌入 SVG 或新增至圖片的 CSS 類別自訂 HTML,且在螢幕上顯示標記時,可能不會顯示。
BetaaddEventListener
addEventListener(type, listener[, options])
參數: 
  • typestring 區分大小寫的字串,代表要監聽的事件類型。
  • listenerEventListener|EventListenerObject 接收通知的物件。此項目必須是函式或含有 handleEvent 方法的物件
  • optionsboolean|AddEventListenerOptions optional查看選項。自訂事件只支援 capturepassive
傳回值:  void
設定函式,在指定事件傳送至目標時呼叫。請參閱 addEventListener
BetaremoveEventListener
removeEventListener(type, listener[, options])
參數: 
傳回值:void
從目標中移除先前使用 addEventListener 註冊的事件監聽器。請參閱 removeEventListener

Marker3DElementOptions 介面

google.maps.maps3d.Marker3DElementOptions 介面

Marker3DElementOptions 物件用於定義可在 Marker3DElement 上設定的屬性。

altitudeMode optional
類型:  AltitudeMode optional
詳情請參閱《Marker3DElement.altitudeMode》。
collisionBehavior optional
類型:CollisionBehavior optional
詳情請參閱《Marker3DElement.collisionBehavior》。
drawsWhenOccluded optional
類型:  boolean optional
詳情請參閱《Marker3DElement.drawsWhenOccluded》。
extruded optional
類型:boolean optional
詳情請參閱《Marker3DElement.extruded》。
label optional
類型:string optional
詳情請參閱《Marker3DElement.label》。
position optional
詳情請參閱《Marker3DElement.position》。
sizePreserved optional
類型:boolean optional
詳情請參閱《Marker3DElement.sizePreserved》。
zIndex optional
類型:number optional
詳情請參閱《Marker3DElement.zIndex》。

Marker3DInteractiveElement 類別

google.maps.maps3d.Marker3DInteractiveElement 類別

在 3D 地圖上顯示位置。請注意,必須設定 positionMarker3DInteractiveElement 才能顯示。與 Marker3DElement 不同,Marker3DInteractiveElement 會收到 gmp-click 事件。

自訂元素:
<gmp-marker-3d-interactive></gmp-marker-3d-interactive>

這個類別會擴充 Marker3DElement

這個類別會實作 Marker3DInteractiveElementOptions

請呼叫 const {Marker3DInteractiveElement} = await google.maps.importLibrary("maps3d") 存取。請參閱「Maps JavaScript API 中的程式庫」。

Marker3DInteractiveElement
Marker3DInteractiveElement([options])
參數: 
使用指定的選項建立 Marker3DInteractiveElement
繼承:altitudeModecollisionBehaviordrawsWhenOccludedextrudedlabelpositionsizePreservedzIndex
default
直接新增至 Marker3DInteractiveElement 的所有自訂元素都會運算單元配置,但只有 PinElement 類型的元素會用於繪製標記,其他元素會忽略其他元素。
addEventListener
addEventListener(type, listener[, options])
參數: 
  • typestring 代表要監聽的事件類型,區分大小寫。
  • listenerEventListener|EventListenerObject 接收通知的物件。此項目必須是函式或含有 handleEvent 方法的物件
  • optionsboolean|AddEventListenerOptions optional 請參閱「選項」。自訂事件只支援 capturepassive
傳回值:  void
設定函式,在指定事件傳送至目標時呼叫。請參閱 addEventListener
removeEventListener
removeEventListener(type, listener[, options])
參數: 
傳回值:  void
從目標中移除先前以 addEventListener 註冊的事件監聽器。請參閱 removeEventListener
gmp-click
function(clickEvent)
引數: 
點選 Marker3DInteractiveElement 元素時,系統會觸發此事件。

Marker3DInteractiveElementOptions 介面

google.maps.maps3d.Marker3DInteractiveElementOptions 介面

Marker3DInteractiveElementOptions 物件,用於定義可在 Marker3DInteractiveElement 上設定的屬性。

這個介面會擴充 Marker3DElementOptions

繼承: altitudeModecollisionBehaviordrawsWhenOccludedextrudedlabelpositionsizePreservedzIndex

Model3DElement 類別

google.maps.maps3d.Model3DElement 類別

可用於轉譯 gLTF 模型的 3D 模型。請注意,positionsrc 必須設為顯示 Model3DElement

應支援 gLTF PBR 的核心屬性。目前不支援任何擴充功能或擴充功能屬性。

自訂元素:
<gmp-model-3d altitude-mode="absolute" src="src"></gmp-model-3d>

這個類別會擴充 HTMLElement

這個類別會實作 Model3DElementOptions

請呼叫 const {Model3DElement} = await google.maps.importLibrary("maps3d") 存取。請參閱「Maps JavaScript API 中的程式庫」。

Model3DElement
Model3DElement([options])
參數: 
使用指定的選項建立 Model3DElement
altitudeMode
類型:  AltitudeMode optional
指定如何解讀位置的海拔高度。
HTML 屬性:
  • <gmp-model-3d altitude-mode="absolute"></gmp-model-3d>
  • <gmp-model-3d altitude-mode="clamp-to-ground"></gmp-model-3d>
  • <gmp-model-3d altitude-mode="relative-to-ground"></gmp-model-3d>
  • <gmp-model-3d altitude-mode="relative-to-mesh"></gmp-model-3d>
orientation
說明 3D 模型的座標系統旋轉方式,以便在 3D 地圖上定位模型。

系統會依以下順序套用旋轉動作:傾斜、傾斜、方向。
position
設定 Model3DElement 的位置。在某些模式中,系統會忽略高度,因此高度為選用值。
scale
類型:number|Vector3D|Vector3DLiteral optional
預設值:1
沿著模型座標空間中的 x、y 和 z 軸縮放模型。
src
類型:string|URL optional
指定 3D 模型的網址。目前僅支援 .glb 格式的模型。

任何相對 HTTP 網址都會解析為相應的絕對 HTTP 網址。

請注意,如果您將 .glb 模型檔案代管在與主要應用程式不同的網站或伺服器上,請務必設定正確的 CORS HTTP 標頭。這樣一來,應用程式就能安全地存取其他網域的模型檔案。
HTML 屬性:
  • <gmp-model-3d src="src"></gmp-model-3d>
BetaaddEventListener
addEventListener(type, listener[, options])
參數: 
  • typestring 代表要監聽的事件類型,區分大小寫。
  • listenerEventListener|EventListenerObject 接收通知的物件。此項目必須是函式或含有 handleEvent 方法的物件
  • optionsboolean|AddEventListenerOptions optional 請參閱「選項」。自訂事件只支援 capturepassive
傳回值:  void
設定函式,在指定事件傳送至目標時呼叫。請參閱 addEventListener
BetaremoveEventListener
removeEventListener(type, listener[, options])
參數: 
傳回值:void
從目標中移除先前使用 addEventListener 註冊的事件監聽器。請參閱 removeEventListener

Model3DElementOptions 介面

google.maps.maps3d.Model3DElementOptions 介面

Model3DElementOptions 物件,用來定義可在 Model3DElement 上設定的屬性。

altitudeMode optional
類型:AltitudeMode optional
詳情請參閱《Model3DElement.altitudeMode》。
orientation optional
詳情請參閱《Model3DElement.orientation》。
position optional
詳情請參閱《Model3DElement.position》。
scale optional
類型:number|Vector3D|Vector3DLiteral optional
詳情請參閱《Model3DElement.scale》。
src optional
類型:string|URL optional
詳情請參閱《Model3DElement.src》。

Polyline3DElement 類別

google.maps.maps3d.Polyline3DElement class

3D 折線是 3D 地圖上連接線段的線性疊加層。

自訂元素:
<gmp-polyline-3d altitude-mode="absolute" draws-occluded-segments extruded geodesic outer-color="string" outer-width="number" stroke-color="string" stroke-width="number" z-index="number"></gmp-polyline-3d>

這個類別會擴充 HTMLElement

這個類別會實作 Polyline3DElementOptions

請呼叫 const {Polyline3DElement} = await google.maps.importLibrary("maps3d") 存取。請參閱「Maps JavaScript API 中的程式庫」。

Polyline3DElement
Polyline3DElement([options])
參數: 
使用指定的選項建立 Polyline3DElement
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>
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>
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
詳情請參閱《Polyline3DElement.altitudeMode》。
coordinates optional
詳情請參閱《Polyline3DElement.coordinates》。
drawsOccludedSegments optional
類型:boolean optional
extruded optional
類型:boolean optional
詳情請參閱《Polyline3DElement.extruded》。
geodesic optional
類型:boolean optional
詳情請參閱《Polyline3DElement.geodesic》。
outerColor optional
類型:string optional
詳情請參閱《Polyline3DElement.outerColor》。
outerWidth optional
類型:number optional
詳情請參閱《Polyline3DElement.outerWidth》。
strokeColor optional
類型:string optional
詳情請參閱《Polyline3DElement.strokeColor》。
strokeWidth optional
類型:number optional
詳情請參閱《Polyline3DElement.strokeWidth》。
zIndex optional
類型:number optional
詳情請參閱《Polyline3DElement.zIndex》。

Polygon3DElement 類別

google.maps.maps3d.Polygon3DElement 類別

3D 多邊形 (例如 3D 折線) 會以有序序列定義一系列連接的座標。此外,多邊形會形成封閉迴圈,並定義填滿的區域。

自訂元素:
<gmp-polygon-3d altitude-mode="absolute" draws-occluded-segments extruded fill-color="string" geodesic stroke-color="string" stroke-width="number" z-index="number"></gmp-polygon-3d>

這個類別會擴充 HTMLElement

這個類別會實作 Polygon3DElementOptions

請呼叫 const {Polygon3DElement} = await google.maps.importLibrary("maps3d") 存取。請參閱「Maps JavaScript API 中的程式庫」。

Polygon3DElement
Polygon3DElement([options])
參數: 
使用指定的選項建立 Polygon3DElement
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>
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>
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
詳情請參閱《Polygon3DElement.altitudeMode》。
drawsOccludedSegments optional
類型:boolean optional
extruded optional
類型:boolean optional
詳情請參閱《Polygon3DElement.extruded》。
fillColor optional
類型:string optional
詳情請參閱《Polygon3DElement.fillColor》。
geodesic optional
類型:boolean optional
詳情請參閱《Polygon3DElement.geodesic》。
innerCoordinates optional
詳情請參閱《Polygon3DElement.innerCoordinates》。
outerCoordinates optional
詳情請參閱《Polygon3DElement.outerCoordinates》。
strokeColor optional
類型:string optional
詳情請參閱《Polygon3DElement.strokeColor》。
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 可讓您根據地面、建築物和水面最高點來表示物件。當水流過水時,就會有水面;在地形上,則會是建築物表面 (如果有的話) 或地面表面 (如果沒有建築物)。