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 |
anchorLeft
可选 |
类型:
string optional |
anchorTop
可选 |
类型:
string optional |
可选 |
类型:
boolean optional |
collisionBehavior
可选 |
类型:
CollisionBehavior optional |
collisionPriority
可选 |
类型:
number optional |
position
可选 |
类型:
LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional |
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(属性:altitude-mode)、anchorLeft(属性:anchor-left)、anchorTop(属性:anchor-top)、(属性:autofits-camera)、collisionBehavior(属性:collision-behavior)、collisionPriority(属性:collision-priority)、position(属性:position)、title(属性: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 |
可选 |
类型:
boolean optional |
collisionBehavior
可选 |
类型:
CollisionBehavior optional |
collisionPriority
可选 |
类型:
number optional |
drawsWhenOccluded
可选 |
类型:
boolean optional |
extruded
可选 |
类型:
boolean optional |
label
可选 |
类型:
string optional |
position
可选 |
类型:
LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional |
sizePreserved
可选 |
类型:
boolean optional |
zIndex
可选 |
类型:
number optional |
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(属性:altitude-mode)、(属性:autofits-camera)、collisionBehavior(属性:collision-behavior)、collisionPriority(属性:collision-priority)、drawsWhenOccluded(属性:draws-when-occluded)、extruded(属性:extruded)、label(属性:label)、position(属性:position)、sizePreserved(属性:size-preserved)、zIndex(属性: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 |
继承的方法:
altitudeMode、、collisionBehavior、collisionPriority、drawsWhenOccluded、extruded、label、position、sizePreserved、zIndex
| |
Model3DElement 类
google.maps.maps3d.Model3DElement
class
extends HTMLElement
implements Model3DElementOptions
library "maps3d"
一种 3D 模型,可用于渲染 gLTF 模型。请注意,必须设置 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 |
orientation
可选 |
类型:
Orientation3D|Orientation3DLiteral optional |
position
可选 |
类型:
LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional |
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"
一种 3D 模型,可用于渲染 gLTF 模型。请注意,必须设置 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 |
可选 |
类型:
boolean optional |
coordinates
可选 |
类型:
Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optional |
drawsOccludedSegments
可选 |
类型:
boolean optional |
extruded
可选 |
类型:
boolean optional |
geodesic
可选 |
类型:
boolean optional |
outerColor
可选 |
类型:
string optional |
outerWidth
可选 |
类型:
number optional |
path
可选 |
类型:
Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optional |
strokeColor
可选 |
类型:
string optional |
strokeWidth
可选 |
类型:
number optional |
zIndex
可选 |
类型:
number optional |
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 上设置的属性。
属性 | |
|---|---|
altitudeMode
可选 |
类型:
AltitudeMode optional |
可选 |
类型:
boolean optional |
drawsOccludedSegments
可选 |
类型:
boolean optional |
extruded
可选 |
类型:
boolean optional |
fillColor
可选 |
类型:
string optional |
geodesic
可选 |
类型:
boolean optional |
innerCoordinates
可选 |
类型:
Iterable<Iterable<LatLngAltitude|LatLngAltitudeLiteral>|Iterable<LatLngLiteral>> optional |
innerPaths
可选 |
类型:
Iterable<Iterable<LatLngAltitude|LatLngAltitudeLiteral>|Iterable<LatLngLiteral>> optional |
outerCoordinates
可选 |
类型:
Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optional |
path
可选 |
类型:
Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optional |
strokeColor
可选 |
类型:
string optional |
strokeWidth
可选 |
类型:
number optional |
zIndex
可选 |
类型:
number optional |
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、(属性:autofits-camera)、drawsOccludedSegments(属性:draws-occluded-segments)、extruded(属性:extruded)、fillColor(属性:fill-color)、geodesic(属性:geodesic)、innerPaths、path(属性:path)、strokeColor(属性:stroke-color)、strokeWidth(属性:stroke-width)、zIndex(属性: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 |
path
可选 |
类型:
Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optional |
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 |
autoPanDisabled
可选 |
类型:
boolean optional |
lightDismissDisabled
可选 |
类型:
boolean optional |
open
可选 |
类型:
boolean optional请参阅 PopoverElement.open。 |
positionAnchor
可选 |
类型:
LatLngLiteral|LatLngAltitudeLiteral|string|Marker3DInteractiveElement|MarkerInteractiveElement optional |
AltitudeMode 常量
google.maps.maps3d.AltitudeMode
常量
库 "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 |
radius
可选 |
类型:
number optional |