Map3DElement 类
google.maps.maps3d.Map3DElement 类
Map3DElement 是 3D 地图视图的 HTML 接口。
自定义元素：
<gmp-map-3d center="lat,lng,altitude" default-labels-disabled default-ui-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 属性：
|
defaultUIDisabled |
类型：
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相机视图向量的倾斜度（以度为单位）。如果视角向量直接向下指向地球，则倾斜角度为零度。指向远离地球方向的视图向量的倾斜角度为
180 度。HTML 属性：
|
方法 | |
|---|---|
|
addEventListener(type, listener[, options])参数：
返回值：
void设置一个函数，每当指定事件传递到目标时，系统都会调用该函数。请参阅 addEventListener。 |
flyCameraAround |
flyCameraAround(options)参数：
返回值：无
此方法会在给定时间内围绕给定位置旋转相机，并在该时间内旋转给定的圈数。 默认情况下，相机按顺时针方向环绕。如果为圈数指定负数，相机将改为逆时针环绕拍摄。 该方法是异步的，因为动画只能在地图加载了最少数量后才能开始。动画开始播放后，该方法即会返回。 如果圈数为零，则不会发生旋转，动画会在开始后立即完成。 |
flyCameraTo |
flyCameraTo(options)参数：
返回值：无
此方法可在给定的时长内将相机从当前位置抛物线式移动到给定的结束位置。 该方法是异步的，因为动画只能在地图加载了最少数量后才能开始。该方法会在动画开始播放后立即返回。 |
|
removeEventListener(type, listener[, options])参数：
返回值：
void从目标中移除之前通过 addEventListener 注册的事件监听器。请参阅 removeEventListener。 |
stopCameraAnimation |
stopCameraAnimation()参数：无
返回值：无
此方法会停止可能正在运行的任何飞行动画。相机停留在动画中途的任何位置，不会瞬移到终点。 该方法是异步的，因为动画只能在地图加载了最少数量后才能开始或停止。动画停止后，该方法即会返回。 |
事件 | |
|---|---|
gmp-animationend |
function(animationEndEvent)实参：
此事件会在飞行动画结束时触发。此事件会通过 DOM 树向上冒泡。 |
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 的 roll 属性发生更改时，系统会触发此事件。 |
gmp-steadychange |
function(steadyChangeEvent)实参：
当 Map3DElement 的稳定状态发生变化时，会触发此事件。 |
gmp-tiltchange |
function(tiltChangeEvent)实参：
当 Map3DElement 的倾斜度属性发生更改时，会触发此事件。 |
Map3DElementOptions 接口
google.maps.maps3d.Map3DElementOptions
接口
用于定义可在 Map3DElement 上设置的属性的 Map3DElementOptions 对象。
属性 | |
|---|---|
bounds optional |
类型：
LatLngBounds|LatLngBoundsLiteral optional请参阅 Map3DElement.bounds。 |
center optional |
类型：
LatLngAltitude|LatLngAltitudeLiteral optional请参阅 Map3DElement.center。 |
defaultLabelsDisabled optional |
类型：
boolean optional |
defaultUIDisabled 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。 |
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 |
类型：
LatLngAltitude|LatLngAltitudeLiteral optional请参阅 Map3DElement.center。 |
heading optional |
类型：
number optional请参阅 Map3DElement.heading。 |
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 创建的。
此类扩展了 LocationClickEvent。
通过调用 const {PlaceClickEvent} = await google.maps.importLibrary("maps3d") 进行访问。
请参阅 Maps JavaScript API 中的库。
属性 | |
|---|---|
placeId |
类型：
string地图项的地点 ID。 |
继承自：
position
| |
方法 | |
|---|---|
fetchPlace |
fetchPlace()参数：无
为相应地点 ID 获取 Place。在生成的 Place 对象中，id 属性将被填充。随后，您可以通过 Place.fetchFields() 请求其他字段，但需遵守正常的 Places API 启用和结算流程。如果提取 Place 时出错，则拒绝相应 promise。 |
Marker3DElement 类
google.maps.maps3d.Marker3DElement 类
在 3D 地图上显示位置。请注意，必须设置 position，Marker3DElement 才能显示。
自定义元素：
<gmp-marker-3d altitude-mode="absolute" collision-behavior="required" draws-when-occluded extruded label="string" 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 属性：
|
collisionBehavior |
类型：
CollisionBehavior optional一种枚举，用于指定 Marker3DElement 在与其他 Marker3DElement 或与基础地图标签发生冲突时的行为方式。
HTML 属性：
|
drawsWhenOccluded |
类型：
boolean optional默认值：
false指定当此标记被遮挡时是否应绘制。标记可能会被地图几何图形（例如建筑物）遮挡。
HTML 属性：
|
extruded |
类型：
boolean optional默认值：
false指定是否将标记连接到地面。如需拉伸标记，
altitudeMode 必须是 RELATIVE_TO_GROUND 或 ABSOLUTE。HTML 属性：
|
label |
类型：
string optional相应标记要显示的文本。
HTML 属性：
|
position |
类型：
LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional标记笔尖的位置。海拔高度在某些模式下会被忽略，因此是可选的。 |
sizePreserved |
类型：
boolean optional默认值：
false指定此标记是否应保持其大小，无论与相机的距离如何。默认情况下，标记会根据与相机/倾斜度的距离进行缩放。
HTML 属性：
|
zIndex |
类型：
number optionalzIndex 与其他标记的比较。
HTML 属性：
|
槽数 | |
|---|---|
default |
直接添加到 Marker3DElement 的任何自定义元素都将进行插槽处理，但只有 HTMLImageElement、SVGElement 和 PinElement 类型的元素将用于绘制标记，其他元素将被忽略。、 HTMLImageElement 和 SVGElement 必须封装在 <template> 元素中，然后才能分配给 Marker3DElement 的默认 slot。图片和 SVG 目前在 3D 场景中呈现之前会进行栅格化处理，因此嵌入到 SVG 中的自定义 HTML 或添加到图片中的 CSS 类不会应用，并且在屏幕上显示标记时可能不会反映出来。 |
方法 | |
|---|---|
|
addEventListener(type, listener[, options])参数：
返回值：
void设置一个函数，每当指定事件传递到目标时，系统都会调用该函数。请参阅 addEventListener。 |
|
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请参阅 |