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 = 180”和“maxHeading = 90”将允许“[0, 90]”中的标题以及“[180, 360]”中的标题。“minHeading = 90”和“maxHeading = 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 = 180”和“maxHeading = 90”将允许“[0, 90]”中的标题以及“[180, 360]”中的标题。“minHeading = 90”和“maxHeading = 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
center optional
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 的稳定状态创建的。

此类扩展了 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
事件发生时位于光标下方的纬度/经度/海拔。请注意,在粗略的级别,返回的数据不准确。此外,当您从较高的镜头位置点击水面时,可能会返回海拔值的海底高度。

CenterChangeEvent

google.maps.maps3d.CenterChangeEvent

此事件是根据 Map3DElement的监控中心更改创建的。

此类扩展了 Event

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

HeadingChangeEvent

google.maps.maps3d.HeadingChangeEvent

此事件是根据在 Map3DElement 监控标题变化情况而创建的。

此类扩展了 Event

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

RangeChangeEvent

google.maps.maps3d.RangeChangeEvent

此事件是根据 Map3DElement的监控范围更改创建的。

此类扩展了 Event

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

RollChangeEvent

google.maps.maps3d.RollChangeEvent

此事件是通过监控 Map3DElement 上的掷骰子更改而创建的。

此类扩展了 Event

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

TiltChangeEvent

google.maps.maps3d.TiltChangeEvent

此事件是根据监测Map3DElement的倾斜度变化而创建的。

此类扩展了 Event

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

Polygon3DElement

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

Polygon3DElementOptions 接口

google.maps.maps3d.Polyline3DElementOptions 接口

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

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 多边形(类似于 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 允许表示相对于地表+建筑+水面最高点的对象。在水上时为水面;在地形上方时,为建筑物表面(如果有)或地面(如果没有建筑物)。