MarkerElement 類別
google.maps.maps3d.MarkerElement
class
extends HTMLElement
implements MarkerElementOptions
library "maps3d"
在 3D 地圖上顯示位置。請注意,必須設定 position,系統才會顯示 MarkerElement。
<gmp-marker altitude-mode="value-name" anchor-left="string" anchor-top="string" autofits-camera collision-behavior="value-name" collision-priority="number" position="lat,lng" title="string"> </gmp-marker>
const {MarkerElement} = await google.maps.importLibrary("maps3d");
建構函式 | |
|---|---|
MarkerElement |
MarkerElement([options])參數:
使用指定選項建立 MarkerElement。 |
屬性 | |
|---|---|
altitudeMode
attr: altitude-mode |
指定位置的高度元件解讀方式。
HTML 屬性: altitude-mode="value-name" |
anchorLeft
attr: anchor-left |
輸入類型:
string optional輸出類型: string預設值:-50%
CSS 長度百分比值,用於從標記左上角偏移錨點。如果使用的圖像錨點與預設標記的一般底部中心點不同,這個方法就十分實用。
HTML 屬性: anchor-left="string" |
anchorTop
attr: anchor-top |
輸入類型:
string optional輸出類型: string預設值:-100%
CSS 長度百分比值,用於從標記左上角偏移錨點。如果使用的圖像錨點與預設標記的一般底部中心點不同,這個方法就十分實用。
HTML 屬性: anchor-top="string" |
attr: autofits-camera |
類型:
boolean optional預設值:
false如果提供,地圖可視區域會顯示指定標記,以及其他已選擇加入的元素。
HTML 屬性: autofits-camera |
collisionBehavior
attr: collision-behavior |
列舉,指定 MarkerElement 與其他
MarkerElement、Marker3DElement 或基本地圖標籤衝突時應呈現的行為。HTML 屬性: collision-behavior="value-name" |
collisionPriority
attr: collision-priority |
輸入類型:
number optional輸出類型: number optional這個數字可用來判斷
CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY 標記 (包括 Marker3DElement) 之間的相對優先順序。collisionPriority 值越高,表示優先順序越高。HTML 屬性: collision-priority="number" |
position
attr: position |
標記尖端的位置。在某些模式中,系統會忽略高度,因此可不提供。
HTML 屬性:
|
title
attr: title |
類型:
string滑鼠游標懸停效果文字。如果提供無障礙文字 (例如用於螢幕閱讀器),系統會將該文字新增至
MarkerElement,並使用提供的值。HTML 屬性: title="string" |
運算單元 | |
|---|---|
default |
直接新增至 MarkerElement 的任何自訂元素都會插入。 |
CSS 屬性 | |
|---|---|
z-index |
這個標記的 Z-index。詳情請參閱 z-index 說明文件。重疊的標記中,Z-index 較大的標記會覆蓋 Z-index 較小的標記。根據預設,標記會依 DOM 位置顯示,較晚加入 DOM 的標記會顯示在較早加入 DOM 的標記前方。 |
方法 | |
|---|---|
繼承:
addEventListener、removeEventListener |
MarkerElementOptions 介面
google.maps.maps3d.MarkerElementOptions
介面
MarkerElementOptions 物件,用於定義可在 MarkerElement 上設定的屬性。
屬性 | |
|---|---|
altitudeMode
選填 |
類型:
AltitudeMode optional詳情請參閱《 MarkerElement.altitudeMode》。 |
anchorLeft
選填 |
類型:
string optional詳情請參閱《 MarkerElement.anchorLeft》。 |
anchorTop
選填 |
類型:
string optional詳情請參閱《 MarkerElement.anchorTop》。 |
選填 |
類型:
boolean optional詳情請參閱《 》。 |
collisionBehavior
選填 |
類型:
CollisionBehavior optional詳情請參閱《 MarkerElement.collisionBehavior》。 |
collisionPriority
選填 |
類型:
number optional詳情請參閱《 MarkerElement.collisionPriority》。 |
position
選填 |
類型:
LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional詳情請參閱《 MarkerElement.position》。 |
title
選填 |
類型:
string optional詳情請參閱《 MarkerElement.title》。 |
MarkerInteractiveElement 類別
google.maps.maps3d.MarkerInteractiveElement
class
extends MarkerElement
implements MarkerInteractiveElementOptions
library "maps3d"
在 3D 地圖上顯示位置。請注意,必須設定 position,系統才會顯示 MarkerInteractiveElement。與 MarkerElement 不同,MarkerInteractiveElement 會收到 gmp-click 事件。
<gmp-marker-interactive gmp-popover-target-element="popover-id"> </gmp-marker-interactive>
const {MarkerInteractiveElement} = await google.maps.importLibrary("maps3d");
建構函式 | |
|---|---|
MarkerInteractiveElement |
MarkerInteractiveElement([options])參數:
使用指定選項建立 MarkerInteractiveElement。 |
屬性 | |
|---|---|
gmpPopoverTargetElement
attr: gmp-popover-target-element |
設定後,只要點選這個標記,就會開啟彈出式元素。
HTML 屬性: gmp-popover-target-element="popover-id" |
繼承:
altitudeMode (attr:altitude-mode)、
anchorLeft (attr:anchor-left)、
anchorTop (attr:anchor-top)、
(attr:autofits-camera)、
collisionBehavior (attr:collision-behavior)、
collisionPriority (attr:collision-priority)、
position (attr:position)、
title (attr:title)
| |
運算單元 | |
|---|---|
沿用:
default
|
CSS 屬性 | |
|---|---|
沿用:
z-index
|
方法 | |
|---|---|
繼承:
addEventListener、removeEventListener |
事件 | |
|---|---|
gmp-click |
function(clickEvent)引數:
使用者點選 MarkerInteractiveElement 元素時,系統會觸發這個事件。 |
MarkerInteractiveElementOptions 介面
google.maps.maps3d.MarkerInteractiveElementOptions
interface
extends MarkerElementOptions
MarkerInteractiveElementOptions 物件,用於定義可在 MarkerInteractiveElement 上設定的屬性。
屬性 | |
|---|---|
gmpPopoverTargetElement
選填 |
類型:
PopoverElement optional |
繼承:
altitudeMode、anchorLeft、anchorTop、、collisionBehavior、collisionPriority、position、title
| |
Marker3DElement 類別
google.maps.maps3d.Marker3DElement
class
extends HTMLElement
implements Marker3DElementOptions
library "maps3d"
在 3D 地圖上顯示位置。請注意,必須設定 position,系統才會顯示 Marker3DElement。
<gmp-marker-3d altitude-mode="value-name" autofits-camera collision-behavior="value-name" collision-priority="number" draws-when-occluded extruded label="string" position="lat,lng" size-preserved z-index="number"> </gmp-marker-3d>
const {Marker3DElement} = await google.maps.importLibrary("maps3d");
建構函式 | |
|---|---|
Marker3DElement |
Marker3DElement([options])參數:
使用指定選項建立 Marker3DElement。 |
屬性 | |
|---|---|
altitudeMode
attr: altitude-mode |
指定位置的高度元件解讀方式。
HTML 屬性: altitude-mode="value-name" |
attr: autofits-camera |
輸入類型:
boolean optional輸出類型: boolean預設值:
false如果提供,地圖可視區域會顯示指定標記,以及其他已選擇加入的元素。
HTML 屬性: autofits-camera |
collisionBehavior
attr: collision-behavior |
列舉,指定 Marker3DElement 與其他 Marker3DElement 或底圖標籤衝突時應呈現的行為。
HTML 屬性: collision-behavior="value-name" |
collisionPriority
attr: collision-priority |
輸入類型:
number optional輸出類型: number optional用於偵測衝突的衝突優先順序。
HTML 屬性: collision-priority="number" |
drawsWhenOccluded
attr: draws-when-occluded |
輸入類型:
boolean optional輸出類型: boolean預設值:
false指定是否要在標記遭到遮擋時繪製標記。標記可能會被地圖幾何圖形 (例如建築物) 遮擋。
HTML 屬性: draws-when-occluded |
extruded
attr: extruded |
輸入類型:
boolean optional輸出類型: boolean預設值:
false指定是否要將標記連接至地面。如要凸出標記,
altitudeMode 必須是 RELATIVE_TO_GROUND 或 ABSOLUTE。HTML 屬性: extruded |
label
attr: label |
輸入類型:
string optional輸出類型: string optional這個標記要顯示的文字。
HTML 屬性: label="string" |
position
attr: position |
標記尖端的位置。在某些模式中,系統會忽略高度,因此可不提供。
HTML 屬性:
|
sizePreserved
attr: size-preserved |
輸入類型:
boolean optional輸出類型: boolean預設值:
false指定這個標記是否應保持大小,無論與相機的距離為何。根據預設,標記會根據與攝影機/傾斜角度的距離縮放。
HTML 屬性: size-preserved |
zIndex
attr: z-index |
輸入類型:
number optional輸出類型: number optional與其他標記相比的 zIndex。
HTML 屬性: z-index="number" |
運算單元 | |
|---|---|
default |
直接新增至 Marker3DElement 的任何自訂元素都會加入版位,但只有 HTMLImageElement、SVGElement 和 PinElement 類型的元素會用於繪製標記,其他元素則會遭到忽略。HTMLImageElement 和 SVGElement 必須先包裝在 <template> 元素中,才能指派給 Marker3DElement 的預設版位。圖片和 SVG 目前會先經過光柵化,然後才在 3D 場景中算繪,因此嵌入 SVG 的自訂 HTML 或新增至圖片的 CSS 類別不會套用,且在畫面上顯示標記時可能不會反映。 |
方法 | |
|---|---|
繼承:
addEventListener、removeEventListener |
Marker3DElementOptions 介面
google.maps.maps3d.Marker3DElementOptions
介面
Marker3DElementOptions 物件,用於定義可在 Marker3DElement 上設定的屬性。
屬性 | |
|---|---|
altitudeMode
選填 |
類型:
AltitudeMode optional詳情請參閱《 Marker3DElement.altitudeMode》。 |
選填 |
類型:
boolean optional詳情請參閱《 》。 |
collisionBehavior
選填 |
類型:
CollisionBehavior optional |
collisionPriority
選填 |
類型:
number optional |
drawsWhenOccluded
選填 |
類型:
boolean optional |
extruded
選填 |
類型:
boolean optional詳情請參閱《 Marker3DElement.extruded》。 |
label
選填 |
類型:
string optional詳情請參閱《 Marker3DElement.label》。 |
position
選填 |
類型:
LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional詳情請參閱《 Marker3DElement.position》。 |
sizePreserved
選填 |
類型:
boolean optional詳情請參閱《 Marker3DElement.sizePreserved》。 |
zIndex
選填 |
類型:
number optional詳情請參閱《 Marker3DElement.zIndex》。 |
Marker3DInteractiveElement 類別
google.maps.maps3d.Marker3DInteractiveElement
class
extends Marker3DElement
implements Marker3DInteractiveElementOptions
library "maps3d"
在 3D 地圖上顯示位置。請注意,必須設定 position,系統才會顯示 Marker3DInteractiveElement。與 Marker3DElement 不同,Marker3DInteractiveElement 會收到 gmp-click 事件。
<gmp-marker-3d-interactive gmp-popover-target-element="popover-id" title="string"> </gmp-marker-3d-interactive>
const {Marker3DInteractiveElement} = await google.maps.importLibrary("maps3d");
建構函式 | |
|---|---|
Marker3DInteractiveElement |
Marker3DInteractiveElement([options])參數:
使用指定選項建立 Marker3DInteractiveElement。 |
屬性 | |
|---|---|
gmpPopoverTargetElement
attr: gmp-popover-target-element |
設定後,只要點選這個標記,就會開啟彈出式元素。
HTML 屬性: gmp-popover-target-element="popover-id" |
title
attr: title |
類型:
string滑鼠游標懸停效果文字。如果提供無障礙文字 (例如用於螢幕閱讀器),系統會將該文字新增至
Marker3DInteractiveElement,並使用提供的值。HTML 屬性: title="string" |
繼承:
altitudeMode (attr:altitude-mode)、
(attr:autofits-camera)、
collisionBehavior (attr:collision-behavior)、
collisionPriority (attr:collision-priority)、
drawsWhenOccluded (attr:draws-when-occluded)、
extruded (attr:extruded)、
label (attr:label)、
position (attr:position)、
sizePreserved (attr:size-preserved)、
zIndex (attr:z-index)
| |
運算單元 | |
|---|---|
default |
直接新增至 Marker3DInteractiveElement 的任何自訂元素都會插入,但只有 PinElement 類型的元素會用於繪製標記,其他元素則會忽略。 |
方法 | |
|---|---|
繼承:
addEventListener、removeEventListener |
事件 | |
|---|---|
gmp-click |
function(clickEvent)引數:
使用者點選 Marker3DInteractiveElement 元素時,系統會觸發這個事件。 |
Marker3DInteractiveElementOptions 介面
google.maps.maps3d.Marker3DInteractiveElementOptions
interface
extends Marker3DElementOptions
Marker3DInteractiveElementOptions 物件,用於定義可在 Marker3DInteractiveElement 上設定的屬性。
屬性 | |
|---|---|
gmpPopoverTargetElement
選填 |
類型:
PopoverElement optional |
title
選填 |
類型:
string optional詳情請參閱《 Marker3DInteractiveElement.title》。 |
繼承:
altitudeMode、、collisionBehavior、collisionPriority、drawsWhenOccluded、extruded、label、position、sizePreserved、zIndex
| |
Model3DElement 類別
google.maps.maps3d.Model3DElement
class
extends HTMLElement
implements Model3DElementOptions
library "maps3d"
可轉譯 gLTF 模型的 3D 模型。請注意,您必須設定 position 和 src,系統才會顯示 Model3DElement。
應支援 gLTF PBR 的核心屬性。目前不支援任何擴充功能或擴充功能屬性。
<gmp-model-3d altitude-mode="value-name" orientation="heading,tilt,roll" position="lat,lng" scale="number" src="url"> </gmp-model-3d>
const {Model3DElement} = await google.maps.importLibrary("maps3d");
建構函式 | |
|---|---|
Model3DElement |
Model3DElement([options])參數:
使用指定選項建立 Model3DElement。 |
屬性 | |
|---|---|
altitudeMode
attr: altitude-mode |
指定位置高度的解讀方式。
HTML 屬性: altitude-mode="value-name" |
orientation
attr: orientation |
說明 3D 模型座標系統的旋轉角度,以便將模型放置在 3D 地圖上。
系統會按照下列順序對模型套用旋轉:滾動、傾斜,然後是航向。 HTML 屬性: orientation="heading,tilt,roll" |
position
attr: position |
設定
Model3DElement 的位置。在某些模式中,系統會忽略高度,因此可不提供。HTML 屬性:
|
scale
attr: scale |
預設值:
1在模型的座標空間中,沿著 x、y 和 z 軸縮放模型。
HTML 屬性:
|
src
attr: src |
指定 3D 模型的網址。目前僅支援
.glb 格式的模型。所有相對 HTTP 網址都會解析為對應的絕對網址。 請注意,如果 .glb 模型檔案託管在與主要應用程式不同的網站或伺服器上,請務必設定正確的 CORS HTTP 標頭。這樣一來,應用程式就能安全地存取其他網域的模型檔案。HTML 屬性: src="url" |
方法 | |
|---|---|
繼承:
addEventListener、removeEventListener |
Model3DElementOptions 介面
google.maps.maps3d.Model3DElementOptions
介面
Model3DElementOptions 物件,用於定義可在 Model3DElement 上設定的屬性。
屬性 | |
|---|---|
altitudeMode
選填 |
類型:
AltitudeMode optional詳情請參閱《 Model3DElement.altitudeMode》。 |
orientation
選填 |
類型:
Orientation3D|Orientation3DLiteral optional詳情請參閱《 Model3DElement.orientation》。 |
position
選填 |
類型:
LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional詳情請參閱《 Model3DElement.position》。 |
scale
選填 |
類型:
number|Vector3D|Vector3DLiteral optional詳情請參閱《 Model3DElement.scale》。 |
src
選填 |
類型:
string|URL optional詳情請參閱《 Model3DElement.src》。 |
Model3DInteractiveElement 類別
google.maps.maps3d.Model3DInteractiveElement
class
extends Model3DElement
implements Model3DInteractiveElementOptions
library "maps3d"
可轉譯 gLTF 模型的 3D 模型。請注意,您必須設定 position 和 src,系統才會顯示 Model3DElement。
應支援 gLTF PBR 的核心屬性。目前不支援任何擴充功能或擴充功能屬性。
與 Model3DElement 不同,Model3DInteractiveElement 會收到 gmp-click 事件。
<gmp-model-3d-interactive></gmp-model-3d-interactive>
const {Model3DInteractiveElement} = await google.maps.importLibrary("maps3d");
建構函式 | |
|---|---|
Model3DInteractiveElement |
Model3DInteractiveElement([options])參數:
使用指定選項建立 Model3DInteractiveElement。 |
屬性 | |
|---|---|
繼承:
altitudeMode (屬性:altitude-mode)、
orientation (屬性:orientation)、
position (屬性:position)、
scale (屬性:scale)、
src (屬性:src)
|
方法 | |
|---|---|
繼承:
addEventListener、removeEventListener |
事件 | |
|---|---|
gmp-click |
function(clickEvent)引數:
使用者點選 Model3DInteractiveElement 元素時,系統會觸發這個事件。 |
Model3DInteractiveElementOptions 介面
google.maps.maps3d.Model3DInteractiveElementOptions
interface
extends Model3DElementOptions
Model3DInteractiveElementOptions 物件,用於定義可在 Model3DInteractiveElement 上設定的屬性。
屬性 | |
|---|---|
繼承:
altitudeMode、orientation、position、scale、src |
Polyline3DElement 類別
google.maps.maps3d.Polyline3DElement
class
extends HTMLElement
implements Polyline3DElementOptions
library "maps3d"
3D 折線是 3D 地圖上連接線段的線性疊加層。
<gmp-polyline-3d altitude-mode="value-name" autofits-camera draws-occluded-segments extruded geodesic outer-color="string" outer-width="number" path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..." stroke-color="string" stroke-width="number" z-index="number"> </gmp-polyline-3d>
const {Polyline3DElement} = await google.maps.importLibrary("maps3d");
建構函式 | |
|---|---|
Polyline3DElement |
Polyline3DElement([options])參數:
使用指定選項建立 Polyline3DElement。 |
屬性 | |
|---|---|
altitudeMode
attr: altitude-mode |
指定座標中高度元件的解讀方式。
HTML 屬性: altitude-mode="value-name" |
attr: autofits-camera |
輸入類型:
boolean optional輸出類型: boolean預設值:
false如果提供,指定折線會顯示在地圖可視區域中,以及任何其他選擇加入的元素。
HTML 屬性: autofits-camera |
drawsOccludedSegments
attr: draws-occluded-segments |
輸入類型:
boolean optional輸出類型: boolean預設值:
false指定是否要繪製可能遭到遮蔽的折線部分。折線可能會被地圖幾何圖形 (例如建築物) 遮擋。
HTML 屬性: draws-occluded-segments |
extruded
attr: extruded |
輸入類型:
boolean optional輸出類型: boolean預設值:
false指定是否要將折線連接至地面。如要擠出折線,
altitudeMode 必須是 RELATIVE_TO_GROUND 或 ABSOLUTE。HTML 屬性: extruded |
geodesic
attr: geodesic |
輸入類型:
boolean optional輸出類型: boolean預設值:
false如果設為
true,折線邊緣會解讀為測地線,並沿著地球曲率繪製。如果設為 false,折線邊緣會在螢幕空間中算繪為直線。HTML 屬性: geodesic |
outerColor
attr: outer-color |
輸入類型:
string optional輸出類型: string optional外圈顏色。系統支援所有 CSS3 顏色。
HTML 屬性: outer-color="string" |
outerWidth
attr: outer-width |
輸入類型:
number optional輸出類型: number optional外寬介於
0.0 和 1.0 之間。這是strokeWidth的百分比。HTML 屬性: outer-width="number" |
path
attr: path |
輸入類型:
Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optional輸出類型: Array<LatLngAltitude> optional折線座標的排列順序。在某些模式中,系統會忽略高度,因此可不提供。
HTML 屬性: path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..." |
strokeColor
attr: stroke-color |
輸入類型:
string optional輸出類型: string optional筆觸色彩。系統支援所有 CSS3 顏色。
HTML 屬性: stroke-color="string" |
strokeWidth
attr: stroke-width |
輸入類型:
number optional輸出類型: number optional筆觸寬度 (以像素為單位)。
HTML 屬性: stroke-width="number" |
zIndex
attr: z-index |
輸入類型:
number optional輸出類型: number optional和其他多邊形比較的 zIndex。
HTML 屬性: z-index="number" |
|
類型:
Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optional折線座標的排列順序。在某些模式中,系統會忽略高度,因此可不提供。 |
方法 | |
|---|---|
繼承:
addEventListener、removeEventListener |
Polyline3DElementOptions 介面
google.maps.maps3d.Polyline3DElementOptions
介面
Polyline3DElementOptions 物件,用於定義可在 Polyline3DElement 上設定的屬性。
屬性 | |
|---|---|
altitudeMode
選填 |
類型:
AltitudeMode optional詳情請參閱《 Polyline3DElement.altitudeMode》。 |
選填 |
類型:
boolean optional詳情請參閱《 》。 |
coordinates
選填 |
類型:
Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optional詳情請參閱《 》。 |
drawsOccludedSegments
選填 |
類型:
boolean optional |
extruded
選填 |
類型:
boolean optional詳情請參閱《 Polyline3DElement.extruded》。 |
geodesic
選填 |
類型:
boolean optional詳情請參閱《 Polyline3DElement.geodesic》。 |
outerColor
選填 |
類型:
string optional詳情請參閱《 Polyline3DElement.outerColor》。 |
outerWidth
選填 |
類型:
number optional詳情請參閱《 Polyline3DElement.outerWidth》。 |
path
選填 |
類型:
Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optional詳情請參閱《 Polyline3DElement.path》。 |
strokeColor
選填 |
類型:
string optional詳情請參閱《 Polyline3DElement.strokeColor》。 |
strokeWidth
選填 |
類型:
number optional詳情請參閱《 Polyline3DElement.strokeWidth》。 |
zIndex
選填 |
類型:
number optional詳情請參閱《 Polyline3DElement.zIndex》。 |
Polyline3DInteractiveElement 類別
google.maps.maps3d.Polyline3DInteractiveElement
class
extends Polyline3DElement
implements Polyline3DInteractiveElementOptions
library "maps3d"
3D 折線是 3D 地圖上連接線段的線性疊加層。與 Polyline3DElement 不同,Polyline3DInteractiveElement 會收到 gmp-click 事件。
<gmp-polyline-3d-interactive></gmp-polyline-3d-interactive>
const {Polyline3DInteractiveElement} = await google.maps.importLibrary("maps3d");
建構函式 | |
|---|---|
Polyline3DInteractiveElement |
Polyline3DInteractiveElement([options])參數:
使用指定選項建立 Polyline3DInteractiveElement。 |
屬性 | |
|---|---|
繼承:
altitudeMode (屬性:altitude-mode)、
(屬性:autofits-camera)、
drawsOccludedSegments (屬性:draws-occluded-segments)、
extruded (屬性:extruded)、
geodesic (屬性:geodesic)、
outerColor (屬性:outer-color)、
outerWidth (屬性:outer-width)、
path (屬性:path)、
strokeColor (屬性:stroke-color)、
strokeWidth (屬性:stroke-width)、
zIndex (屬性:z-index)、
|
方法 | |
|---|---|
繼承:
addEventListener、removeEventListener |
事件 | |
|---|---|
gmp-click |
function(clickEvent)引數:
使用者點選 Polyline3DInteractiveElement 元素時,系統會觸發這個事件。 |
Polyline3DInteractiveElementOptions 介面
google.maps.maps3d.Polyline3DInteractiveElementOptions
interface
extends Polyline3DElementOptions
Polyline3DInteractiveElementOptions 物件,用於定義可在 Polyline3DInteractiveElement 上設定的屬性。
屬性 | |
|---|---|
繼承:
altitudeMode、、coordinates、drawsOccludedSegments、extruded、geodesic、outerColor、outerWidth、path、strokeColor、strokeWidth、zIndex
|
Polygon3DElement 類別
google.maps.maps3d.Polygon3DElement
class
extends HTMLElement
implements Polygon3DElementOptions
library "maps3d"
3D 多邊形 (例如 3D 折線) 會定義一系列依序排列的相連座標。此外,多邊形會形成封閉迴圈,並定義填滿區域。
<gmp-polygon-3d autofits-camera draws-occluded-segments extruded fill-color="string" geodesic path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..." stroke-color="string" stroke-width="number" z-index="number"> </gmp-polygon-3d>
const {Polygon3DElement} = await google.maps.importLibrary("maps3d");
建構函式 | |
|---|---|
Polygon3DElement |
Polygon3DElement([options])參數:
使用指定選項建立 Polygon3DElement。 |
屬性 | |
|---|---|
altitudeMode |
指定座標中高度元件的解讀方式。 |
attr: autofits-camera |
輸入類型:
boolean optional輸出類型: boolean預設值:
false如果提供,指定的多邊形會顯示在地圖可視區域中,以及任何其他已選擇加入的元素。
HTML 屬性: autofits-camera |
drawsOccludedSegments
attr: draws-occluded-segments |
輸入類型:
boolean optional輸出類型: boolean預設值:
false指定是否繪製多邊形可能被遮擋的部分。多邊形可能會被地圖幾何圖形 (例如建築物) 遮擋。
HTML 屬性: draws-occluded-segments |
extruded
attr: extruded |
輸入類型:
boolean optional輸出類型: boolean預設值:
false指定是否要將多邊形連接至地面。如要擠出多邊形,
altitudeMode 必須是 RELATIVE_TO_GROUND 或 ABSOLUTE。HTML 屬性: extruded |
fillColor
attr: fill-color |
輸入類型:
string optional輸出類型: string optional填色。系統支援所有 CSS3 顏色。
HTML 屬性: fill-color="string" |
geodesic
attr: geodesic |
輸入類型:
boolean optional輸出類型: boolean預設值:
false如果設為
true,多邊形的邊緣會解讀為測地線,並沿著地球曲率繪製。如果設為 false,多邊形的邊緣會在螢幕空間中轉譯為直線。HTML 屬性: geodesic |
innerPaths |
輸入類型:
Iterable<Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral>> optional輸出類型: Array<Array<LatLngAltitude>> optional指定閉合迴圈的座標順序。與折線不同,多邊形可能由一或多個路徑組成,在多邊形內建立多個切口。 |
path
attr: path |
輸入類型:
Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optional輸出類型: Array<LatLngAltitude> optional指定閉合迴圈的座標順序。在某些模式中,系統會忽略高度,因此可不提供。
HTML 屬性: path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..." |
strokeColor
attr: stroke-color |
輸入類型:
string optional輸出類型: string optional筆觸色彩。系統支援所有 CSS3 顏色。
HTML 屬性: stroke-color="string" |
strokeWidth
attr: stroke-width |
輸入類型:
number optional輸出類型: number optional筆觸寬度 (以像素為單位)。
HTML 屬性: stroke-width="number" |
zIndex
attr: z-index |
輸入類型:
number optional輸出類型: number optional和其他多邊形比較的 zIndex。
HTML 屬性: z-index="number" |
|
類型:
Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optional指定閉合迴圈的座標順序。在某些模式中,系統會忽略高度,因此可不提供。 |
|
類型:
Iterable<Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral>> optional指定閉合迴圈的座標順序。與折線不同,多邊形可能由一或多個路徑組成,在多邊形內建立多個切口。 |
方法 | |
|---|---|
繼承:
addEventListener、removeEventListener |
Polygon3DElementOptions 介面
google.maps.maps3d.Polygon3DElementOptions
介面
Polygon3DElementOptions 物件,用於定義可在 Polygon3DElement 上設定的屬性。
Polygon3DInteractiveElement 類別
google.maps.maps3d.Polygon3DInteractiveElement
class
extends Polygon3DElement
implements Polygon3DInteractiveElementOptions
library "maps3d"
3D 多邊形 (例如 3D 折線) 會定義一系列依序排列的相連座標。此外,多邊形會形成封閉迴圈,並定義填滿區域。與 Polygon3DElement 不同,Polygon3DInteractiveElement 會收到 gmp-click 事件。
<gmp-polygon-3d-interactive></gmp-polygon-3d-interactive>
const {Polygon3DInteractiveElement} = await google.maps.importLibrary("maps3d");
建構函式 | |
|---|---|
Polygon3DInteractiveElement |
Polygon3DInteractiveElement([options])參數:
使用指定選項建立 Polygon3DInteractiveElement。 |
屬性 | |
|---|---|
繼承:
altitudeMode、
(attr:autofits-camera)、
drawsOccludedSegments (attr:draws-occluded-segments)、
extruded (attr:extruded)、
fillColor (attr:fill-color)、
geodesic (attr:geodesic)、
innerPaths、
path (attr:path)、
strokeColor (attr:stroke-color)、
strokeWidth (attr:stroke-width)、
zIndex (attr:z-index)、
、
|
方法 | |
|---|---|
繼承:
addEventListener、removeEventListener |
事件 | |
|---|---|
gmp-click |
function(clickEvent)引數:
使用者點選 Polygon3DInteractiveElement 元素時,系統會觸發這個事件。 |
Polygon3DInteractiveElementOptions 介面
google.maps.maps3d.Polygon3DInteractiveElementOptions
interface
extends Polygon3DElementOptions
Polygon3DInteractiveElementOptions 物件,用於定義可在 Polygon3DInteractiveElement 上設定的屬性。
屬性 | |
|---|---|
繼承:
altitudeMode、、drawsOccludedSegments、extruded、fillColor、geodesic、innerCoordinates、innerPaths、outerCoordinates、path、strokeColor、strokeWidth、zIndex
|
FlattenerElement 類別
google.maps.maps3d.FlattenerElement
class
extends HTMLElement
implements FlattenerElementOptions
library "maps3d"
整平器元素用於整平地圖上的指定區域。
<gmp-flattener path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..."> </gmp-flattener>
const {FlattenerElement} = await google.maps.importLibrary("maps3d");
建構函式 | |
|---|---|
FlattenerElement |
FlattenerElement([options])參數:
|
屬性 | |
|---|---|
innerPaths |
輸入類型:
Iterable<Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral>> optional輸出類型: Array<Array<LatLngAltitude>> optional指定閉合迴圈的座標順序。這些路徑會定義多邊形主要路徑 (即整平區域) 內的排除洞。innerPath 內的區域不會壓平。 |
path
attr: path |
輸入類型:
Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optional輸出類型: Array<LatLngAltitude> optional指定閉合迴圈的座標順序。這個迴圈定義了扁平化區域。
HTML 屬性: path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..." |
方法 | |
|---|---|
繼承:
addEventListener、removeEventListener |
FlattenerElementOptions 介面
google.maps.maps3d.FlattenerElementOptions
介面
FlattenerElementOptions 物件,用於定義可在 FlattenerElement 上設定的屬性。
屬性 | |
|---|---|
innerPaths
選填 |
類型:
Iterable<Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral>> optional詳情請參閱《 FlattenerElement.innerPaths》。 |
path
選填 |
類型:
Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optional詳情請參閱《 FlattenerElement.path》。 |
PopoverElement 類別
google.maps.maps3d.PopoverElement
class
extends HTMLElement
implements PopoverElementOptions
library "maps3d"
用於顯示彈出式視窗的自訂 HTML 元素。外觀看起來像對話框,通常會與標記連結。
<gmp-popover auto-pan-disabled light-dismiss-disabled open position-anchor="lat,lng"> </gmp-popover>
const {PopoverElement} = await google.maps.importLibrary("maps3d");
建構函式 | |
|---|---|
PopoverElement |
PopoverElement([options])參數:
|
屬性 | |
|---|---|
altitudeMode |
指定位置的高度元件解讀方式。 |
autoPanDisabled
attr: auto-pan-disabled |
輸入類型:
boolean optional輸出類型: boolean預設值:
false如果設為 True,系統會在彈出式視窗開啟時,停用平移地圖功能,讓彈出式視窗完整顯示。
HTML 屬性: auto-pan-disabled |
lightDismissDisabled
attr: light-dismiss-disabled |
輸入類型:
boolean optional輸出類型: boolean預設值:
false指定是否要「輕觸關閉」這個彈出式視窗。「輕觸關閉」行為與設定
popover="auto" 屬性類似,該屬性是瀏覽器 Popover API 的一部分。HTML 屬性: light-dismiss-disabled |
open
attr: open |
輸入類型:
boolean optional輸出類型: boolean預設值:
false指定是否應開啟這個彈出式視窗。
HTML 屬性: open |
positionAnchor
attr: position-anchor |
輸入類型:
LatLngLiteral|LatLngAltitudeLiteral|Marker3DInteractiveElement|MarkerInteractiveElement|string optional輸出類型: LatLngAltitude|Marker3DInteractiveElement|MarkerInteractiveElement optional顯示這個彈出式視窗的位置。如果彈出式視窗錨定至互動式標記,系統會改用標記的位置。
HTML 屬性:
|
運算單元 | |
|---|---|
default |
將插槽內容放在彈出式視窗的主要部分。 |
header |
將插槽內容放在彈出式視窗的標題部分。 |
CSS 屬性 | |
|---|---|
--gmp-popover-max-width |
彈出式視窗的最大寬度,不論內容寬度為何。 |
--gmp-popover-min-width |
彈出式視窗的最小寬度,不論內容寬度為何。使用這項屬性時,強烈建議將其設為小於地圖寬度的值 (以像素為單位)。 |
--gmp-popover-pixel-offset-x |
彈出式視窗頂端與地圖上錨定點之間的 X 軸偏移量 (以像素為單位)。 |
--gmp-popover-pixel-offset-y |
彈出式視窗頂端與地圖上錨定點之間的 Y 軸偏移量 (以像素為單位)。 |
background-color |
彈出式視窗的背景顏色。詳情請參閱 background-color 說明文件。請注意,預設地點彈出式視窗也會受到這項屬性的影響。在自訂彈出式視窗中使用指定的 CSS 類別或內嵌樣式,避免為預設地點彈出式視窗設定樣式。 |
border-radius |
彈出式視窗的邊框半徑。詳情請參閱 border-radius 說明文件。請注意,預設地點彈出式視窗也會受到這項屬性的影響。在自訂彈出式視窗中使用指定的 CSS 類別或內嵌樣式,避免為預設地點彈出式視窗設定樣式。 |
box-shadow |
彈出式視窗的 box-shadow。詳情請參閱 box-shadow 說明文件。請注意,預設地點彈出式視窗也會受到這項屬性的影響。在自訂彈出式視窗中使用指定的 CSS 類別或內嵌樣式,避免為預設地點彈出式視窗設定樣式。 |
color-scheme |
指出這個彈出式視窗可採用的色彩配置。詳情請參閱 color-scheme 說明文件。如未指定,系統會預設為使用者的色彩配置偏好設定。 |
padding |
彈出式視窗的邊框間距。詳情請參閱 padding 說明文件。請注意,預設地點彈出式視窗也會受到這項屬性的影響。在自訂彈出式視窗中使用指定的 CSS 類別或內嵌樣式,避免為預設地點彈出式視窗設定樣式。 |
方法 | |
|---|---|
繼承:
addEventListener、removeEventListener |
PopoverElementOptions 介面
google.maps.maps3d.PopoverElementOptions
介面
PopoverElementOptions 物件,用於定義可在 PopoverElement 上設定的屬性。
屬性 | |
|---|---|
altitudeMode
選填 |
類型:
AltitudeMode optional詳情請參閱《 PopoverElement.altitudeMode》。 |
autoPanDisabled
選填 |
類型:
boolean optional詳情請參閱《 PopoverElement.autoPanDisabled》。 |
lightDismissDisabled
選填 |
類型:
boolean optional |
open
選填 |
類型:
boolean optional詳情請參閱《 PopoverElement.open》。 |
positionAnchor
選填 |
類型:
LatLngLiteral|LatLngAltitudeLiteral|string|Marker3DInteractiveElement|MarkerInteractiveElement optional詳情請參閱《 PopoverElement.positionAnchor》。 |
AltitudeMode 常數
google.maps.maps3d.AltitudeMode
constants
程式庫"maps3d"
指定座標中高度元件的解讀方式。
這些常數也可以做為字串使用。在 TypeScript 中,字串常值是由 AltitudeModeString 類型定義。
const {AltitudeMode} = await google.maps.importLibrary("maps3d");
常數 | |
|---|---|
ABSOLUTE |
可表示相對於平均海平面的物件。這也表示,如果物件下方的地形詳細程度有所變更,物件的絕對位置仍會維持不變。 |
CLAMP_TO_GROUND |
可表示放置在地上的物件。無論提供的高度為何,都會沿著地形保持在地面。如果物件位於主要水體上方,則會放置在海平面上。 |
RELATIVE_TO_GROUND |
可相對於地面表示物件。如果地形細節層次改變,物件相對於地面的位置會保持不變。如果是在水面上,海拔高度會解讀為高於海平面的公尺值。 |
RELATIVE_TO_MESH |
可相對於地面、建築物和水面的最高點,表示物件。如果是在水面上,則為水面;如果是在地形上,則為建築物表面 (如有) 或地面 (如無建築物)。 |
CirclePathElement 類別
google.maps.maps3d.CirclePathElement
class
extends HTMLElement
implements CirclePathElementOptions
library "maps3d"
3D 地圖上的 3D 圓形疊加層。
<gmp-circle-path center="lat,lng,altitude" radius="number"> </gmp-circle-path>
const {CirclePathElement} = await google.maps.importLibrary("maps3d");
建構函式 | |
|---|---|
CirclePathElement |
CirclePathElement([options])參數:
使用指定選項建立 CirclePathElement。 |
屬性 | |
|---|---|
center
attr: center |
圓心。
HTML 屬性: center="lat,lng,altitude" |
radius
attr: radius |
輸入類型:
number optional輸出類型: number optional圓形的半徑 (以公尺為單位)。
HTML 屬性: radius="number" |
方法 | |
|---|---|
繼承:
addEventListener、removeEventListener |
CirclePathElementOptions 介面
google.maps.maps3d.CirclePathElementOptions
介面
CirclePathElementOptions 物件,用於定義可在 CirclePathElement 上設定的屬性。
屬性 | |
|---|---|
center
選填 |
類型:
LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optional詳情請參閱《 CirclePathElement.center》。 |
radius
選填 |
類型:
number optional詳情請參閱《 CirclePathElement.radius》。 |