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
类型:  LatLngBounds|LatLngBoundsLiteral optional
设置后,会将相机的位置限制在指定的 lat/lng 边界内。请注意,边界之外的对象仍会呈现。边界可以同时限制经度和纬度,也可以仅限制纬度或经度。对于仅限纬度的边界,请分别使用 -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
地图的罗盘航向角(以度为单位),其中正北为 0。当没有倾斜时,任何滚动都会被解读为航向。
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 的 center 属性发生变化时,系统会触发此事件。
gmp-click
function(clickEvent)
参数: 
当用户点击 Map3DElement 元素时,系统会触发此事件。
gmp-headingchange
function(headingChangeEvent)
参数: 
当 Map3DElement 的 heading 属性发生变化时,系统会触发此事件。
gmp-rangechange
function(rangeChangeEvent)
参数: 
当 Map3DElement 的 range 属性发生变化时,系统会触发此事件。
gmp-rollchange
function(rollChangeEvent)
参数: 
当 Map3DElement 的滚动属性发生变化时,系统会触发此事件。
gmp-steadychange
function(steadyChangeEvent)
参数: 
Map3DElement 的稳态发生变化时,系统会触发此事件。
gmp-tiltchange
function(tiltChangeEvent)
参数: 
当 Map3DElement 的 tilt 属性发生变化时,系统会触发此事件。

Map3DElementOptions 接口

google.maps.maps3d.Map3DElementOptions 接口

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

bounds optional
类型:  LatLngBounds|LatLngBoundsLiteral 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 的稳定状态创建的。

此类扩展了 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 中的库

Polyline3DElement

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

Polyline3DElementOptions 接口

google.maps.maps3d.Polyline3DElementOptions 接口

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

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