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 设置后,用于将镜头位置限制在指定纬度/经度边界内。请注意,边界之外的对象仍会渲染。边界可以同时限制经度和纬度,也可以仅限制纬度或经度。对于仅限纬度的边界,请分别使用 -180 和 180 的西经和东经度。对于仅限经度的边界,请分别使用 90 和 -90 的南北纬度。 |
center |
类型:
LatLngAltitude|LatLngAltitudeLiteral optional 以 LatLngAltitude 指定的地图中心,其中海拔高度以高于地平面的米为单位。请注意,这不一定是镜头所在的位置,因为
range 字段会影响镜头与地图中心的距离。如果未设置,则默认为 {lat: 0, lng: 0, altitude: 63170000} 。63170000 米是允许的最大海拔高度(地球半径乘以 10)。HTML 属性:
|
defaultLabelsDisabled |
类型:
boolean optional 默认值:
false 如果为
true ,系统不会渲染默认地图标签。HTML 属性:
|
heading |
类型:
number optional 地图的罗盘航向(以度为单位),其中正北方向为零。如果没有倾斜,则任何滚转都会被视为朝向。
HTML 属性:
|
maxAltitude |
类型:
number optional 地面上将会在地图上显示的最高海拔。有效值介于
0 到 63170000 米(地球半径乘以 10)之间。HTML 属性:
|
maxHeading |
类型:
number optional 地图的最大方向(旋转)角度。有效值介于
0 到 360 度之间。minHeading 和 maxHeading 表示允许进行朝向手势的时间间隔(小于等于 360 度)。minHeading = 180 和 maxHeading = 90 将允许使用 [0, 90] 中的标题,以及 [180, 360] 中的标题。minHeading = 90 和 maxHeading = 180 将允许在 [90, 180] 中使用标题。HTML 属性:
|
maxTilt |
类型:
number optional 地图的最大入射角。有效值介于
0 到 90 度之间。HTML 属性:
|
minAltitude |
类型:
number optional 地面上将显示在地图上的最低海拔高度。有效值介于
0 到 63170000 米(地球半径乘以 10)之间。HTML 属性:
|
minHeading |
类型:
number optional 地图方向(旋转)的最小角度。有效值介于
0 到 360 度之间。minHeading 和 maxHeading 表示允许进行朝向手势的时间间隔(小于等于 360 度)。minHeading = 180 和 maxHeading = 90 将允许使用 [0, 90] 中的标题,以及 [180, 360] 中的标题。minHeading = 90 和 maxHeading = 180 将允许在 [90, 180] 中使用标题。HTML 属性:
|
minTilt |
类型:
number optional 地图的最小入射角。有效值介于
0 到 90 度之间。HTML 属性:
|
range |
类型:
number optional 从镜头到地图中心的距离(以米为单位)。
HTML 属性:
|
roll |
类型:
number optional 镜头围绕查看矢量的旋转度数(以度为单位)。为了消除歧义,如果没有倾斜,则任何滚转都将被解读为朝向。
HTML 属性:
|
tilt |
类型:
number optional 镜头的查看矢量的倾斜度(以度为单位)。直视地球的视图矢量的倾斜度为 0 度。远离地球的视图矢量将倾斜
180 度。HTML 属性:
|
方法 | |
---|---|
addEventListener |
addEventListener(type, listener[, options]) 参数:
返回值:
void 设置一个将在指定事件传送到目标时调用的函数。请参阅 addEventListener |
removeEventListener |
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 |
类型:
LatLngBounds|LatLngBoundsLiteral optional 请参阅 Map3DElement.bounds 。 |
center optional |
类型:
LatLngAltitude|LatLngAltitudeLiteral optional 请参阅 Map3DElement.center 。 |
defaultLabelsDisabled optional |
类型:
boolean optional |
heading optional |
类型:
number optional 请参阅 Map3DElement.heading 。 |
maxAltitude optional |
类型:
number optional |
maxHeading optional |
类型:
number optional |
maxTilt optional |
类型:
number optional 请参阅 Map3DElement.maxTilt 。 |
minAltitude optional |
类型:
number optional |
minHeading optional |
类型:
number optional |
minTilt optional |
类型:
number optional 请参阅 Map3DElement.minTilt 。 |
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 属性:
|
coordinates |
类型:
Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optional 折线坐标的有序序列。在某些模式中,海拔高度将被忽略,因此为可选项。 |
drawsOccludedSegments |
类型:
boolean optional 默认值:
false 指定是否绘制多段线中可能被遮挡的部分。多段线可能会被地图几何图形(例如建筑物)遮挡。
HTML 属性:
|
extruded |
类型:
boolean optional 默认值:
false 指定是否将多段线与地面连接。若要使多段线向外凸出,
altitudeMode 必须为 RELATIVE_TO_GROUND 或 ABSOLUTE 。HTML 属性:
|
geodesic |
类型:
boolean optional 默认值:
false 如果设为
true ,多段线的边缘将被视为测地线,并将遵循地球的曲度。如果设置为 false ,多段线的边缘会在屏幕空间中渲染为直线。HTML 属性:
|
outerColor |
类型:
string optional 外部颜色。支持所有 CSS3 颜色。
HTML 属性:
|
outerOpacity |
类型:
number optional 外部不透明度介于
0.0 和 1.0 之间。HTML 属性:
|
outerWidth |
类型:
number optional 外部宽度介于
0.0 和 1.0 之间。这是占strokeWidth 的百分比。HTML 属性:
|
strokeColor |
类型:
string optional 笔触颜色。支持所有 CSS3 颜色。
HTML 属性:
|
strokeOpacity |
类型:
number optional 描边不透明度介于
0.0 和 1.0 之间。HTML 属性:
|
strokeWidth |
类型:
number optional 笔触宽度(以像素为单位)。
HTML 属性:
|
zIndex |
类型:
number optional 相对于其他折线的 zIndex。
HTML 属性:
|
方法 | |
---|---|
addEventListener |
addEventListener(type, listener[, options]) 参数:
返回值:
void 设置一个将在指定事件传送到目标时调用的函数。请参阅 addEventListener |
removeEventListener |
removeEventListener(type, listener[, options]) 参数:
返回值:
void 从目标中删除之前通过 addEventListener 注册的事件监听器。请参阅 removeEventListener |
多段线 3DElementOptions 界面
google.maps.maps3d.Polyline3DElementOptions
界面
多段线 3DElementOptions 对象,用于定义可在多段线 3DElement 上设置的属性。
属性 | |
---|---|
altitudeMode optional |
类型:
AltitudeMode optional |
coordinates optional |
类型:
Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> 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 属性:
|
drawsOccludedSegments |
类型:
boolean optional 默认值:
false 指定是否绘制多边形的可能被遮挡的部分。多边形可能会被地图几何图形(例如建筑物)遮挡。
HTML 属性:
|
extruded |
类型:
boolean optional 默认值:
false 指定是否将多边形连接到地面。要使多边形向外凸出,
altitudeMode 必须为 RELATIVE_TO_GROUND 或 ABSOLUTE 。HTML 属性:
|
fillColor |
类型:
string optional 填充色。支持所有 CSS3 颜色。
HTML 属性:
|
fillOpacity |
类型:
number optional 填充透明度,范围为 0.0 到 1.0。
HTML 属性:
|
geodesic |
类型:
boolean optional 默认值:
false 如果为
true ,多边形的边将被解释为测地线,并将遵循地球的曲度。如果设置为 false ,多边形的边缘将渲染为屏幕空间中的直线。HTML 属性:
|
innerCoordinates |
类型:
Iterable<Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral>> optional 用于指定闭合环的坐标的有序序列。与多段线不同的是,多边形由一条或多条路径组成,在多边形内部会创建多个剪切。 |
outerCoordinates |
类型:
Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optional 用于指定闭合环的坐标的有序序列。在某些模式中,海拔高度将被忽略,因此为可选项。 |
strokeColor |
类型:
string optional 笔触颜色。支持所有 CSS3 颜色。
HTML 属性:
|
strokeOpacity |
类型:
number optional 描边不透明度介于
0.0 和 1.0 之间。HTML 属性:
|
strokeWidth |
类型:
number optional 笔触宽度(以像素为单位)。
HTML 属性:
|
zIndex |
类型:
number optional 相对于其他折线的 zIndex。
HTML 属性:
|
方法 | |
---|---|
addEventListener |
addEventListener(type, listener[, options]) 参数:
返回值:
void 设置一个将在指定事件传送到目标时调用的函数。请参阅 addEventListener |
removeEventListener |
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 |
类型:
Iterable<Iterable<LatLngAltitude|LatLngAltitudeLiteral>|Iterable<LatLngLiteral>> optional |
outerCoordinates optional |
类型:
Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> 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 |
允许表示相对于最高地面、建筑物和水面最高处的对象。位于水面上时是水面;当位于地形上时,此值为建筑物表面(如果有)或地面(如果没有建筑物)。 |