3D Maps

Map3DElement 类别

google.maps.maps3d.Map3DElement 类别

Map3DElement 是用于 3D 地图视图的 HTML 接口。

自定义元素:
<gmp-map-3d center="lat,lng,altitude" default-labels-disabled heading="number" max-altitude="number" max-heading="number" max-tilt="number" min-altitude="number" min-heading="number" min-tilt="number" range="number" roll="number" tilt="number"></gmp-map-3d>

此类扩展 HTMLElement

此类实现了 Map3DElementOptions

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

Map3DElement
Map3DElement([options])
参数
bounds
设置后,用于将镜头位置限制在指定纬度/经度边界内。请注意,边界之外的对象仍会渲染。边界可以同时限制经度和纬度,也可以仅限制纬度或经度。对于仅限纬度的边界,请分别使用 -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>
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
镜头的查看矢量的倾斜度(以度为单位)。直视地球的视图矢量的倾斜度为 0 度。远离地球的视图矢量将倾斜 180 度。
HTML 属性
  • <gmp-map-3d tilt="number"></gmp-map-3d>
BetaaddEventListener
addEventListener(type, listener[, options])
参数
  • typestring 一个区分大小写的字符串,表示要监听的事件类型。
  • listenerEventListener|EventListenerObject 接收通知的对象。它必须是一个函数或包含 handleEvent 方法的对象
  • optionsboolean|AddEventListenerOptions optional 请参阅选项。自定义事件仅支持 capturepassive
返回值void
设置一个将在指定事件传送到目标时调用的函数。请参阅 addEventListener
BetaremoveEventListener
removeEventListener(type, listener[, options])
参数
返回值void
从目标中删除之前通过 addEventListener 注册的事件监听器。请参阅 removeEventListener
gmp-centerchange
function(centerChangeEvent)
参数
当 Map3DElement 的中心属性更改时会触发此事件。
gmp-click
function(clickEvent)
参数
点击 Map3DElement 元素时会触发此事件。
gmp-headingchange
function(headingChangeEvent)
参数
当 Map3DElement 的标题属性更改时会触发此事件。
gmp-rangechange
function(rangeChangeEvent)
参数
当 Map3DElement 的范围属性更改时会触发此事件。
gmp-rollchange
function(rollChangeEvent)
参数
当 Map3DElement 的滚动属性更改时会触发此事件。
gmp-steadychange
function(steadyChangeEvent)
参数
Map3DElement 的稳定状态发生变化时会触发此事件。
gmp-tiltchange
function(tiltChangeEvent)
参数
当 Map3DElement 的倾斜属性更改时会触发此事件。

Map3DElementOptions 界面

google.maps.maps3d.Map3DElementOptions 界面

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

bounds optional
请参阅 Map3DElement.bounds
center optional
请参阅 Map3DElement.center
defaultLabelsDisabled optional
类型boolean optional
heading optional
类型number 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
range optional
类型number optional
请参阅 Map3DElement.range
roll optional
类型number optional
请参阅 Map3DElement.roll
tilt optional
类型number optional
请参阅 Map3DElement.tilt

SteadyChangeEvent 类别

google.maps.maps3d.SteadyChangeEvent 类别

此事件是通过监控 Map3DElement 的稳定状态而创建的。此事件会在 DOM 树中向上传递。

此类扩展 Event

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

isSteady
类型boolean
指示 Map3DElement 是否稳定(即当前场景的所有渲染已完成)。

ClickEvent 类别

google.maps.maps3d.ClickEvent 类别

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

此类扩展 Event

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

position
类型LatLngAltitude optional
事件发生时位于光标下方的纬度/经度/海拔高度。请注意,在较为粗略的级别,返回的数据会不太准确。此外,从较高的镜头位置点击水面时,可能会为海拔值返回海底海拔。此事件会在 DOM 树中向上传递。

CenterChangeEvent 类别

google.maps.maps3d.CenterChangeEvent 类别

此事件是根据 Map3DElement监控中心的变化而创建的。此事件会在 DOM 树中向上传递。

此类扩展 Event

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

HeadingChangeEvent 类别

google.maps.maps3d.HeadingChangeEvent 类别

此事件是根据监控“Map3DElement”的标题更改情况创建的。此事件会在 DOM 树中向上传递。

此类扩展 Event

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

RangeChangeEvent 类别

google.maps.maps3d.RangeChangeEvent 类别

此事件是根据 Map3DElement的监控范围变化创建的。此事件会在 DOM 树中向上传递。

此类扩展 Event

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

RollChangeEvent 类别

google.maps.maps3d.RollChangeEvent 类别

此事件是通过监控 Map3DElement 的滚动变化情况而创建的。此事件会在 DOM 树中向上传递。

此类扩展 Event

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

TiltChangeEvent 类别

google.maps.maps3d.TiltChangeEvent 类别

此事件是通过监控 Map3DElement 的倾斜度变化而创建的。此事件会在 DOM 树中向上传递。

此类扩展 Event

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

多段线 3D 元素 类别

google.maps.maps3d.Polyline3DElement 类别

3D 多段线是 3D 地图上已连接线段的线性叠加层。

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

此类扩展 HTMLElement

此类实现了 Polyline3DElementOptions

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

Polyline3DElement
Polyline3DElement([options])
参数
altitudeMode
类型AltitudeMode optional
指定如何解释坐标中的海拔高度分量。
HTML 属性
  • <gmp-polyline-3d altitude-mode="absolute"></gmp-polyline-3d>
  • <gmp-polyline-3d altitude-mode="clamp-to-ground"></gmp-polyline-3d>
  • <gmp-polyline-3d altitude-mode="relative-to-ground"></gmp-polyline-3d>
  • <gmp-polyline-3d altitude-mode="relative-to-mesh"></gmp-polyline-3d>
coordinates
折线坐标的有序序列。在某些模式中,海拔高度将被忽略,因此为可选项。
drawsOccludedSegments
类型boolean optional
默认值false
指定是否绘制多段线中可能被遮挡的部分。多段线可能会被地图几何图形(例如建筑物)遮挡。
HTML 属性
  • <gmp-polyline-3d draws-occluded-segments></gmp-polyline-3d>
extruded
类型boolean optional
默认值false
指定是否将多段线与地面连接。若要使多段线向外凸出,altitudeMode 必须为 RELATIVE_TO_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>
outerOpacity
类型number optional
外部不透明度介于 0.01.0 之间。
HTML 属性
  • <gmp-polyline-3d outer-opacity="number"></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>
strokeOpacity
类型number optional
描边不透明度介于 0.01.0 之间。
HTML 属性
  • <gmp-polyline-3d stroke-opacity="number"></gmp-polyline-3d>
strokeWidth
类型number optional
笔触宽度(以像素为单位)。
HTML 属性
  • <gmp-polyline-3d stroke-width="number"></gmp-polyline-3d>
zIndex
类型number optional
相对于其他折线的 zIndex。
HTML 属性
  • <gmp-polyline-3d z-index="number"></gmp-polyline-3d>
BetaaddEventListener
addEventListener(type, listener[, options])
参数
  • typestring 一个区分大小写的字符串,表示要监听的事件类型。
  • listenerEventListener|EventListenerObject 接收通知的对象。它必须是一个函数或包含 handleEvent 方法的对象
  • optionsboolean|AddEventListenerOptions optional 请参阅选项。自定义事件仅支持 capturepassive
返回值void
设置一个将在指定事件传送到目标时调用的函数。请参阅 addEventListener
BetaremoveEventListener
removeEventListener(type, listener[, options])
参数
返回值void
从目标中删除之前通过 addEventListener 注册的事件监听器。请参阅 removeEventListener

多段线 3DElementOptions 界面

google.maps.maps3d.Polyline3DElementOptions 界面

多段线 3DElementOptions 对象,用于定义可在多段线 3DElement 上设置的属性。

altitudeMode optional
类型AltitudeMode optional
coordinates optional
drawsOccludedSegments optional
类型boolean optional
默认值false
extruded optional
类型boolean optional
默认值false
geodesic optional
类型boolean optional
默认值false
outerColor optional
类型string optional
outerOpacity optional
类型number optional
outerWidth optional
类型number optional
strokeColor optional
类型string optional
strokeOpacity optional
类型number optional
strokeWidth optional
类型number optional
zIndex optional
类型number optional

Polygon3DElement 类别

google.maps.maps3d.Polygon3DElement 类别

三维多边形(如同 3D 多段线)可定义一系列有序连接的坐标。此外,多边形还会形成一个闭合环并定义一个填充区域。

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

此类扩展 HTMLElement

此类实现了 Polygon3DElementOptions

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

Polygon3DElement
Polygon3DElement([options])
参数
altitudeMode
类型AltitudeMode optional
指定如何解释坐标中的海拔高度分量。
HTML 属性
  • <gmp-polygon-3d altitude-mode="absolute"></gmp-polygon-3d>
  • <gmp-polygon-3d altitude-mode="clamp-to-ground"></gmp-polygon-3d>
  • <gmp-polygon-3d altitude-mode="relative-to-ground"></gmp-polygon-3d>
  • <gmp-polygon-3d altitude-mode="relative-to-mesh"></gmp-polygon-3d>
drawsOccludedSegments
类型boolean optional
默认值false
指定是否绘制多边形的可能被遮挡的部分。多边形可能会被地图几何图形(例如建筑物)遮挡。
HTML 属性
  • <gmp-polygon-3d draws-occluded-segments></gmp-polygon-3d>
extruded
类型boolean optional
默认值false
指定是否将多边形连接到地面。要使多边形向外凸出,altitudeMode 必须为 RELATIVE_TO_GROUNDABSOLUTE
HTML 属性
  • <gmp-polygon-3d extruded></gmp-polygon-3d>
fillColor
类型string optional
填充色。支持所有 CSS3 颜色。
HTML 属性
  • <gmp-polygon-3d fill-color="string"></gmp-polygon-3d>
fillOpacity
类型number optional
填充透明度,范围为 0.0 到 1.0。
HTML 属性
  • <gmp-polygon-3d fill-opacity="number"></gmp-polygon-3d>
geodesic
类型boolean optional
默认值false
如果为 true,多边形的边将被解释为测地线,并将遵循地球的曲度。如果设置为 false,多边形的边缘将渲染为屏幕空间中的直线。
HTML 属性
  • <gmp-polygon-3d geodesic></gmp-polygon-3d>
innerCoordinates
用于指定闭合环的坐标的有序序列。与多段线不同的是,多边形由一条或多条路径组成,在多边形内部会创建多个剪切。
outerCoordinates
用于指定闭合环的坐标的有序序列。在某些模式中,海拔高度将被忽略,因此为可选项。
strokeColor
类型string optional
笔触颜色。支持所有 CSS3 颜色。
HTML 属性
  • <gmp-polygon-3d stroke-color="string"></gmp-polygon-3d>
strokeOpacity
类型number optional
描边不透明度介于 0.01.0 之间。
HTML 属性
  • <gmp-polygon-3d stroke-opacity="number"></gmp-polygon-3d>
strokeWidth
类型number optional
笔触宽度(以像素为单位)。
HTML 属性
  • <gmp-polygon-3d stroke-width="number"></gmp-polygon-3d>
zIndex
类型number optional
相对于其他折线的 zIndex。
HTML 属性
  • <gmp-polygon-3d z-index="number"></gmp-polygon-3d>
BetaaddEventListener
addEventListener(type, listener[, options])
参数
  • 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
drawsOccludedSegments optional
类型boolean optional
默认值false
extruded optional
类型boolean optional
默认值false
fillColor optional
类型string optional
fillOpacity optional
类型number optional
geodesic optional
类型boolean optional
默认值false
innerCoordinates optional
outerCoordinates optional
strokeColor optional
类型string optional
strokeOpacity optional
类型number optional
strokeWidth optional
类型number optional
zIndex optional
类型number 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 允许表示相对于最高地面、建筑物和水面最高处的对象。位于水面上时是水面;当位于地形上时,此值为建筑物表面(如果有)或地面(如果没有建筑物)。