3D Maps

Map3DElement

google.maps.maps3d.Map3DElement

Map3DElement 是 3D 地图视图的 HTML 接口。请注意,必须设置 mode,3D 地图才能开始渲染。

自定义元素:
<gmp-map-3d center="lat,lng,altitude" default-ui-disabled heading="number" internal-usage-attribution-ids="id1 id2" max-altitude="number" max-heading="number" max-tilt="number" min-altitude="number" min-heading="number" min-tilt="number" mode="hybrid" 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>
defaultUIDisabled
类型:  boolean optional
默认值false
如果值为 true,则所有默认界面按钮都会被停用。不会停用键盘和手势控制。
HTML 属性
  • <gmp-map-3d default-ui-disabled></gmp-map-3d>
heading
类型:  number optional
地图的罗盘航向角(以度为单位),正北为零。如果没有倾斜,任何横滚都将被解读为航向。
HTML 属性
  • <gmp-map-3d heading="number"></gmp-map-3d>
internalUsageAttributionIds
类型:  Iterable<string> optional
向初始化程序添加了使用情况归因 ID,这有助于 Google 了解哪些库和示例对开发者有帮助,例如标记聚类库的使用情况。如需选择不发送使用情况归因 ID,可以安全地删除此属性。系统只会发送唯一值。实例化后对此值所做的更改可能会被忽略。
HTML 属性
  • <gmp-map-3d internal-usage-attribution-ids="id1 id2"></gmp-map-3d>
maxAltitude
类型:  number optional
地图上显示的最大地面海拔高度。有效值介于 0 米和 63170000 米之间(地球半径乘以 10)。
HTML 属性
  • <gmp-map-3d max-altitude="number"></gmp-map-3d>
maxHeading
类型:  number optional
地图航向(旋转)的最大角度。有效值介于 0 度和 360 度之间。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
地图的最大入射角。有效值介于 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 度之间。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
地图的最小入射角。有效值介于 0 度和 90 度之间。
HTML 属性
  • <gmp-map-3d min-tilt="number"></gmp-map-3d>
mode
类型:  MapMode optional
指定地图应以何种模式呈现。如果未设置,则不会渲染地图。
HTML 属性
  • <gmp-map-3d mode="hybrid"></gmp-map-3d>
  • <gmp-map-3d mode="satellite"></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>
addEventListener
addEventListener(type, listener[, options])
参数: 
  • typestring一个区分大小写的字符串,表示要监听的事件类型。
  • listenerEventListener|EventListenerObject 接收通知的对象。必须是函数或具有 handleEvent 方法的对象
  • optionsboolean|AddEventListenerOptions optional 请参阅选项。自定义事件仅支持 capturepassive
返回值:  void
设置一个函数,每当指定事件传递到目标时,系统都会调用该函数。请参阅 addEventListener
flyCameraAround
flyCameraAround(options)
参数: 
返回值:无
此方法会在给定时间内围绕给定位置旋转相机,并在该时间内旋转给定的圈数。

默认情况下,相机按顺时针方向环绕。如果为圈数指定负数,相机将改为逆时针环绕拍摄。

该方法是异步的,因为动画只能在地图加载了最少数量后才能开始。动画开始播放后,该方法即会返回。

如果圈数为零,则不会发生旋转,动画会在开始后立即完成。
flyCameraTo
flyCameraTo(options)
参数: 
返回值:无
此方法可在给定的时长内将相机从当前位置抛物线式移动到给定的结束位置。

该方法是异步的,因为动画只能在地图加载了最少数量后才能开始。该方法会在动画开始播放后立即返回。
removeEventListener
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-error
function(mapInitializationErrorEvent)
实参: 
  • mapInitializationErrorEventEvent
当地图初始化失败时,系统会触发此事件。
gmp-headingchange
function(headingChangeEvent)
实参: 
  • headingChangeEventEvent
当 Map3DElement 的 heading 属性发生更改时,会触发此事件。
gmp-rangechange
function(rangeChangeEvent)
实参: 
  • rangeChangeEventEvent
当 Map3DElement 的 range 属性发生更改时,系统会触发此事件。
gmp-rollchange
function(rollChangeEvent)
实参: 
  • rollChangeEventEvent
当 Map3DElement 的 roll 属性发生更改时,系统会触发此事件。
gmp-steadychange
function(steadyChangeEvent)
实参: 
Map3DElement 的稳定状态发生变化时,会触发此事件。
gmp-tiltchange
function(tiltChangeEvent)
实参: 
  • tiltChangeEventEvent
当 Map3DElement 的倾斜度属性发生更改时,会触发此事件。

Map3DElementOptions 接口

google.maps.maps3d.Map3DElementOptions 接口

用于定义可在 Map3DElement 上设置的属性的 Map3DElementOptions 对象。

bounds optional
类型:  LatLngBounds|LatLngBoundsLiteral optional
请参阅 Map3DElement.bounds
center optional
请参阅 Map3DElement.center
defaultUIDisabled optional
类型:  boolean optional
heading optional
类型:  number optional
internalUsageAttributionIds optional
类型:  Iterable<string> optional
maxAltitude optional
类型:  number optional
maxHeading optional
类型:  number optional
maxTilt optional
类型:  number optional
minAltitude optional
类型:  number optional
minHeading optional
类型:  number optional
minTilt optional
类型:  number optional
mode optional
类型:  MapMode optional
请参阅 Map3DElement.mode
range optional
类型:  number optional
请参阅 Map3DElement.range
roll optional
类型:  number optional
请参阅 Map3DElement.roll
tilt optional
类型:  number optional
请参阅 Map3DElement.tilt

MapMode 常量

google.maps.maps3d.MapMode 常量

指定地图应以何种模式呈现。

通过调用 const {MapMode} = await google.maps.importLibrary("maps3d") 进行访问。
请参阅 Maps JavaScript API 中的库

HYBRID 此地图模式会在卫星图像或逼真图像上显示主要街道的透明图层。
SATELLITE 此地图模式会显示卫星图像或仿真图像(如有)。

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
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 是否稳定(即当前场景的所有渲染是否已完成)。

LocationClickEvent

google.maps.maps3d.LocationClickEvent

此事件是通过点击 Map3DElement 创建的。

此类扩展了 Event

通过调用 const {LocationClickEvent} = await google.maps.importLibrary("maps3d") 进行访问。
请参阅 Maps JavaScript API 中的库

position
类型:  LatLngAltitude optional
事件发生时光标下方的纬度/经度/海拔高度。请注意,在较粗略的级别,返回的数据准确性会较低。此外,当从较高的相机位置点击水面时,系统可能会返回海床海拔高度作为海拔高度值。此事件会通过 DOM 树向上冒泡。

PlaceClickEvent

google.maps.maps3d.PlaceClickEvent

此事件是通过点击 Map3DElement 上的地点图标创建的。为防止显示默认弹出式窗口,请对此事件调用 preventDefault() 方法,以防止 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 时出错,则拒绝相应 promise。

Marker3DElement

google.maps.maps3d.Marker3DElement

在 3D 地图上显示位置。请注意,必须设置 positionMarker3DElement 才能显示。

自定义元素:
<gmp-marker-3d altitude-mode="absolute" collision-behavior="required" draws-when-occluded extruded label="string" position="lat,lng" 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
标记笔尖的位置。海拔高度在某些模式下会被忽略,因此是可选的。
HTML 属性
  • <gmp-marker-3d position="lat,lng"></gmp-marker-3d>
  • <gmp-marker-3d position="lat,lng,altitude"></gmp-marker-3d>
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 的默认 slot。

图片和 SVG 目前在 3D 场景中呈现之前会进行栅格化处理,因此嵌入到 SVG 中的自定义 HTML 或添加到图片中的 CSS 类不会应用,并且在屏幕上显示标记时可能不会反映出来。
addEventListener
addEventListener(type, listener[, options])
参数: 
  • typestring一个区分大小写的字符串,表示要监听的事件类型。
  • listenerEventListener|EventListenerObject 接收通知的对象。必须是函数或具有 handleEvent 方法的对象
  • optionsboolean|AddEventListenerOptions optional 请参阅选项。自定义事件仅支持 capturepassive
返回值:  void
设置一个函数,每当指定事件传递到目标时,系统都会调用该函数。请参阅 addEventListener
removeEventListener
removeEventListener(type, listener[, options])
参数: 
返回值:  void
从目标中移除之前通过 addEventListener 注册的事件监听器。请参阅 removeEventListener

Marker3DElementOptions 接口

google.maps.maps3d.Marker3DElementOptions 接口

用于定义可在 Marker3DElement 上设置的属性的 Marker3DElementOptions 对象。

altitudeMode optional
类型:  AltitudeMode optional
collisionBehavior optional
类型:  CollisionBehavior optional
drawsWhenOccluded optional
类型:  boolean optional
extruded optional
类型:  boolean optional
label optional
类型:  string optional
position optional
sizePreserved optional
类型:  boolean optional
zIndex optional
类型:  number optional

Marker3DInteractiveElement

google.maps.maps3d.Marker3DInteractiveElement

在 3D 地图上显示位置。请注意,必须设置 positionMarker3DInteractiveElement 才能显示。与 Marker3DElement 不同,Marker3DInteractiveElement 会收到 gmp-click 事件。

自定义元素:
<gmp-marker-3d-interactive gmp-popover-target="popover-id" title="string"></gmp-marker-3d-interactive>

此类扩展了 Marker3DElement

此类实现了 Marker3DInteractiveElementOptions

通过调用 const {Marker3DInteractiveElement} = await google.maps.importLibrary("maps3d") 进行访问。
请参阅 Maps JavaScript API 中的库

Marker3DInteractiveElement
Marker3DInteractiveElement([options])
参数: 
使用指定的选项创建 Marker3DInteractiveElement
gmpPopoverTargetElement
类型:  PopoverElement optional
设置后,当用户点击相应标记时,系统会打开弹出式信息框元素。
HTML 属性
  • <gmp-marker-3d-interactive gmp-popover-target="popover-id"></gmp-marker-3d-interactive>
title
类型:  string
鼠标悬停时显示的文本。如果提供,则会向 Marker3DInteractiveElement 添加无障碍文本(例如,用于屏幕阅读器),并使用提供的值。
HTML 属性
  • <gmp-marker-3d-interactive title="string"></gmp-marker-3d-interactive>
继承自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 接口

用于定义可在 Marker3DInteractiveElement 上设置的属性的 Marker3DInteractiveElementOptions 对象。

此接口扩展了 Marker3DElementOptions

gmpPopoverTargetElement optional
类型:  PopoverElement optional
title optional
类型:  string optional
继承自altitudeModecollisionBehaviordrawsWhenOccludedextrudedlabelpositionsizePreservedzIndex

Model3DElement

google.maps.maps3d.Model3DElement

一种允许渲染 gLTF 模型的 3D 模型。请注意,必须设置 positionsrcModel3DElement 才能显示。

应支持 gLTF PBR 的核心属性。目前不支持任何扩展或扩展属性。

自定义元素:
<gmp-model-3d altitude-mode="absolute" orientation="heading,tilt,roll" position="lat,lng" scale="number" src="url"></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
类型:  Orientation3D|Orientation3DLiteral optional
描述了 3D 模型坐标系的旋转,以便将模型放置在 3D 地图上。

旋转按以下顺序应用于模型:横滚、倾斜,然后是航向。
HTML 属性
  • <gmp-model-3d orientation="heading,tilt,roll"></gmp-model-3d>
position
设置 Model3DElement 的位置。海拔高度在某些模式下会被忽略,因此是可选的。
HTML 属性
  • <gmp-model-3d position="lat,lng"></gmp-model-3d>
  • <gmp-model-3d position="lat,lng,altitude"></gmp-model-3d>
scale
类型:  number|Vector3D|Vector3DLiteral optional
默认值1
在模型的坐标空间中沿 x 轴、y 轴和 z 轴缩放模型。
HTML 属性
  • <gmp-model-3d scale="number"></gmp-model-3d>
  • <gmp-model-3d scale="x,y,z"></gmp-model-3d>
src
类型:  string|URL optional
指定 3D 模型的网址。目前仅支持 .glb 格式的模型。

所有相对 HTTP 网址都将解析为相应的绝对网址。

请注意,如果您将 .glb 模型文件托管在与主应用不同的网站或服务器上,请务必设置正确的 CORS HTTP 标头。这样,您的应用就可以安全地访问其他网域中的模型文件。
HTML 属性
  • <gmp-model-3d src="url"></gmp-model-3d>
addEventListener
addEventListener(type, listener[, options])
参数: 
  • typestring一个区分大小写的字符串,表示要监听的事件类型。
  • listenerEventListener|EventListenerObject 接收通知的对象。必须是函数或具有 handleEvent 方法的对象
  • optionsboolean|AddEventListenerOptions optional 请参阅选项。自定义事件仅支持 capturepassive
返回值:  void
设置一个函数,每当指定事件传递到目标时,系统都会调用该函数。请参阅 addEventListener
removeEventListener
removeEventListener(type, listener[, options])
参数: 
返回值:  void
从目标中移除之前通过 addEventListener 注册的事件监听器。请参阅 removeEventListener

Model3DElementOptions 接口

google.maps.maps3d.Model3DElementOptions 接口

用于定义可针对 Model3DElement 设置的属性的 Model3DElementOptions 对象。

altitudeMode optional
类型:  AltitudeMode optional
orientation optional
类型:  Orientation3D|Orientation3DLiteral optional
position optional
scale optional
类型:  number|Vector3D|Vector3DLiteral optional
src optional
类型:  string|URL optional
请参阅 Model3DElement.src

Model3DInteractiveElement

google.maps.maps3d.Model3DInteractiveElement

一种允许渲染 gLTF 模型的 3D 模型。请注意,必须设置 positionsrcModel3DElement 才能显示。

应支持 gLTF PBR 的核心属性。目前不支持任何扩展或扩展属性。

Model3DElement 不同,Model3DInteractiveElement 会收到 gmp-click 事件。

自定义元素:
<gmp-model-3d-interactive></gmp-model-3d-interactive>

此类扩展了 Model3DElement

此类实现了 Model3DInteractiveElementOptions

通过调用 const {Model3DInteractiveElement} = await google.maps.importLibrary("maps3d") 进行访问。
请参阅 Maps JavaScript API 中的库

Model3DInteractiveElement
Model3DInteractiveElement([options])
参数: 
使用指定的选项创建 Model3DInteractiveElement
继承自altitudeModeorientationpositionscalesrc
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)
实参: 
当点击 Model3DInteractiveElement 元素时,系统会触发此事件。

Model3DInteractiveElementOptions 接口

google.maps.maps3d.Model3DInteractiveElementOptions 接口

用于定义可在 Model3DInteractiveElement 上设置的属性的 Model3DInteractiveElementOptions 对象。

此接口扩展了 Model3DElementOptions

继承自altitudeModeorientationpositionscalesrc

Polyline3DElement

google.maps.maps3d.Polyline3DElement

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>
addEventListener
addEventListener(type, listener[, options])
参数: 
  • typestring一个区分大小写的字符串,表示要监听的事件类型。
  • listenerEventListener|EventListenerObject 接收通知的对象。必须是函数或具有 handleEvent 方法的对象
  • optionsboolean|AddEventListenerOptions optional 请参阅选项。自定义事件仅支持 capturepassive
返回值:  void
设置一个函数,每当指定事件传递到目标时,系统都会调用该函数。请参阅 addEventListener
removeEventListener
removeEventListener(type, listener[, options])
参数: 
返回值:  void
从目标中移除之前通过 addEventListener 注册的事件监听器。请参阅 removeEventListener

Polyline3DElementOptions 接口

google.maps.maps3d.Polyline3DElementOptions 接口

用于定义可在 Polyline3DElement 上设置的属性的 Polyline3DElementOptions 对象。

altitudeMode optional
类型:  AltitudeMode optional
coordinates optional
drawsOccludedSegments optional
类型:  boolean optional
extruded optional
类型:  boolean optional
geodesic optional
类型:  boolean optional
outerColor optional
类型:  string optional
outerWidth optional
类型:  number optional
strokeColor optional
类型:  string optional
strokeWidth optional
类型:  number optional
zIndex optional
类型:  number optional

Polyline3DInteractiveElement

google.maps.maps3d.Polyline3DInteractiveElement

3D 多段线是 3D 地图上相连线段的线性叠加层。与 Polyline3DElement 不同,Polyline3DInteractiveElement 会收到 gmp-click 事件。

自定义元素:
<gmp-polyline-3d-interactive></gmp-polyline-3d-interactive>

此类扩展了 Polyline3DElement

此类实现了 Polyline3DInteractiveElementOptions

通过调用 const {Polyline3DInteractiveElement} = await google.maps.importLibrary("maps3d") 进行访问。
请参阅 Maps JavaScript API 中的库

Polyline3DInteractiveElement
Polyline3DInteractiveElement([options])
参数: 
使用指定的选项创建 Polyline3DInteractiveElement
继承自altitudeModecoordinatesdrawsOccludedSegmentsextrudedgeodesicouterColorouterWidthstrokeColorstrokeWidthzIndex
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)
实参: 
  • clickEventLocationClickEvent 事件对象将包含点击的经纬度海拔高度位置。
当点击 Polyline3DInteractiveElement 元素时,系统会触发此事件。

Polyline3DInteractiveElementOptions 接口

google.maps.maps3d.Polyline3DInteractiveElementOptions 接口

用于定义可在 Polyline3DInteractiveElement 上设置的属性的 Polyline3DInteractiveElementOptions 对象。

此接口扩展了 Polyline3DElementOptions

继承自altitudeModecoordinatesdrawsOccludedSegmentsextrudedgeodesicouterColorouterWidthstrokeColorstrokeWidthzIndex

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>
addEventListener
addEventListener(type, listener[, options])
参数: 
  • typestring一个区分大小写的字符串,表示要监听的事件类型。
  • listenerEventListener|EventListenerObject 接收通知的对象。必须是函数或具有 handleEvent 方法的对象
  • optionsboolean|AddEventListenerOptions optional 请参阅选项。自定义事件仅支持 capturepassive
返回值:  void
设置一个函数,每当指定事件传递到目标时,系统都会调用该函数。请参阅 addEventListener
removeEventListener
removeEventListener(type, listener[, options])
参数: 
返回值:  void
从目标中移除之前通过 addEventListener 注册的事件监听器。请参阅 removeEventListener

Polygon3DElementOptions 接口

google.maps.maps3d.Polygon3DElementOptions 接口

用于定义可在 Polygon3DElement 上设置的属性的 Polygon3DElementOptions 对象。

altitudeMode optional
类型:  AltitudeMode optional
drawsOccludedSegments optional
类型:  boolean optional
extruded optional
类型:  boolean optional
fillColor optional
类型:  string optional
geodesic optional
类型:  boolean optional
innerCoordinates optional
outerCoordinates optional
strokeColor optional
类型:  string optional
strokeWidth optional
类型:  number optional
zIndex optional
类型:  number optional

Polygon3DInteractiveElement

google.maps.maps3d.Polygon3DInteractiveElement

3D 多边形(如 3D 多段线)定义了一系列按顺序排列的相连坐标。此外,多边形会形成闭合环路并定义填充区域。与 Polygon3DElement 不同,Polygon3DInteractiveElement 会收到 gmp-click 事件。

自定义元素:
<gmp-polygon-3d-interactive></gmp-polygon-3d-interactive>

此类扩展了 Polygon3DElement

此类实现了 Polygon3DInteractiveElementOptions

通过调用 const {Polygon3DInteractiveElement} = await google.maps.importLibrary("maps3d") 进行访问。
请参阅 Maps JavaScript API 中的库

Polygon3DInteractiveElement
Polygon3DInteractiveElement([options])
参数: 
使用指定的选项创建 Polygon3DInteractiveElement
继承自altitudeModedrawsOccludedSegmentsextrudedfillColorgeodesicinnerCoordinatesouterCoordinatesstrokeColorstrokeWidthzIndex
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)
实参: 
  • clickEventLocationClickEvent 事件对象将包含点击的经纬度海拔高度位置。
当点击 Polygon3DInteractiveElement 元素时,系统会触发此事件。

Polygon3DInteractiveElementOptions 接口

google.maps.maps3d.Polygon3DInteractiveElementOptions 接口

用于定义可在 Polygon3DInteractiveElement 上设置的属性的 Polygon3DInteractiveElementOptions 对象。

此接口扩展了 Polygon3DElementOptions

继承自altitudeModedrawsOccludedSegmentsextrudedfillColorgeodesicinnerCoordinatesouterCoordinatesstrokeColorstrokeWidthzIndex

PopoverElement

google.maps.maps3d.PopoverElement

用于渲染弹出式窗口的自定义 HTML 元素。它看起来像一个气泡,通常与标记相关联。

自定义元素:
<gmp-popover altitude-mode="absolute" light-dismiss-disabled open position-anchor="lat,lng"></gmp-popover>

此类扩展了 HTMLElement

此类实现了 PopoverElementOptions

通过调用 const {PopoverElement} = await google.maps.importLibrary("maps3d") 进行访问。
请参阅 Maps JavaScript API 中的库

PopoverElement
PopoverElement([options])
参数: 
altitudeMode
类型:  AltitudeMode optional
指定如何解读位置信息的海拔高度分量。
HTML 属性
  • <gmp-popover altitude-mode="absolute"></gmp-popover>
  • <gmp-popover altitude-mode="clamp-to-ground"></gmp-popover>
  • <gmp-popover altitude-mode="relative-to-ground"></gmp-popover>
  • <gmp-popover altitude-mode="relative-to-mesh"></gmp-popover>
lightDismissDisabled
类型:  boolean optional
默认值false
指定此弹出式窗口是否应“轻度关闭”。“轻触即关闭”行为类似于设置 popover="auto" 属性,该属性是浏览器 Popover API 的一部分。
HTML 属性
  • <gmp-popover light-dismiss-disabled></gmp-popover>
open
类型:  boolean optional
默认值false
指定此弹出式窗口是否应处于打开状态。
HTML 属性
  • <gmp-popover open></gmp-popover>
positionAnchor
显示此弹出式提示的位置。如果悬浮框锚定到互动标记,则会改用标记的位置。
HTML 属性
  • <gmp-popover position-anchor="lat,lng"></gmp-popover>
  • <gmp-popover position-anchor="lat,lng,altitude"></gmp-popover>
  • <gmp-popover position-anchor="marker-id"></gmp-popover>
default
将插槽内容放置在弹出式窗口的主要部分。
header
将插槽内容放置在弹出式窗口的标题部分。
--gmp-popover-max-width
弹出式窗口的最大宽度,无论内容宽度如何。
--gmp-popover-min-width
弹出式窗口的最小宽度,无论内容宽度如何。使用此属性时,强烈建议将其设置为小于地图宽度(以像素为单位)的值。
--gmp-popover-pixel-offset-x
弹出式窗口尖端在 x 轴上相对于地图上弹出式窗口锚定点的地理坐标的偏移量(以像素为单位)。
--gmp-popover-pixel-offset-y
弹出式窗口尖端在 y 轴上相对于地图上弹出式窗口锚定点的地理坐标的偏移量(以像素为单位)。
color-scheme
指明此弹出式窗口可以采用哪种配色方案进行渲染。如需了解详情,请参阅 color-scheme 文档。如果未指定,则默认为用户的配色方案偏好设置。
addEventListener
addEventListener(type, listener[, options])
参数: 
  • typestring一个区分大小写的字符串,表示要监听的事件类型。
  • listenerEventListener|EventListenerObject 接收通知的对象。必须是函数或具有 handleEvent 方法的对象
  • optionsboolean|AddEventListenerOptions optional 请参阅选项。自定义事件仅支持 capturepassive
返回值:  void
设置一个函数,每当指定事件传递到目标时,系统都会调用该函数。请参阅 addEventListener
removeEventListener
removeEventListener(type, listener[, options])
参数: 
返回值:  void
从目标中移除之前通过 addEventListener 注册的事件监听器。请参阅 removeEventListener

PopoverElementOptions 接口

google.maps.maps3d.PopoverElementOptions 接口

用于定义可在 PopoverElement 上设置的属性的 PopoverElementOptions 对象。

altitudeMode optional
类型:  AltitudeMode optional
lightDismissDisabled optional
类型:  boolean optional
open optional
类型:  boolean optional
请参阅 PopoverElement.open
positionAnchor 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 允许表达相对于地面+建筑物+水面最高点的对象。如果位于水面上,则为水面;如果位于地形上,则为建筑物表面(如果有)或地面(如果没有建筑物)。