概览

请选择平台： Android iOS JavaScript

Maps JavaScript 中的 3D 地图可帮助您打造沉浸式 3D 地图体验。它提供了用于自定义地图样式、提高无障碍性和增强易用性的工具，可用于开发极具吸引力的互动式应用。

以下示例展示了利用 Maps JavaScript API 中的 3D 地图可以做些什么：

为何在 Maps JavaScript 中使用 3D 地图

Maps JavaScript 中的 3D 地图在 maps3d 库中提供了 Map3DElement (<gmp-map-3d>) 类，以便您在所有应用中使用 Google 的 3D 图像。3D 地图提供内置的 3D 渲染体验，让您可以整合或体验 3D 真实世界环境、城市景观和地标游览。

对于 3D 地形、相机倾斜、航向和范围俯瞰、挤压 3D 建筑物以及 3D 对象（例如 Marker3DElement [<gmp-marker-3d>]），请使用 3D <gmp-map-3d>（maps3d 库中的 Map3DElement）。对于平面 2D 路线图、标准 2D AdvancedMarkerElement 图钉和 2D 矢量样式，请使用 2D <gmp-map>（maps 库中的 MapElement 或 google.maps.Map）。

Maps JavaScript 中的 3D 地图有哪些用途？

• 打造真实世界地图体验：在 SATELLITE 或 HYBRID 模式（在卫星图像上叠加底图标注）下渲染城市、地形和地标的逼真 3D 航拍图像，或使用 mode 属性在 ROADMAP 模式下显示样式化 3D 底图。如需了解详情，请参阅更改地图模式。
• 自定义地图样式：
  • 3D 云端地图样式设置：控制基本地图注点 (POI) 和道路的可见性和样式。如需了解详情，请参阅自定义 3D 地图。
  • 自定义标记、弹出式窗口、多段线和多边形：使用 MarkerElement、Marker3DElement、Marker3DInteractiveElement、PopoverElement、Polyline3DElement 和 Polygon3DElement 识别位置并在地图上绘制 3D 路线或边界。 如需了解详情，请参阅标记、弹出式窗口以及形状和线条。
  • 3D 模型和 glTF 资源：使用 Model3DElement 在真实世界坐标处添加建筑物、地标或对象的自定义 PBR glTF 3D 模型。如需了解详情，请参阅模型。
• 构建沉浸式地图：
  • 预设相机路径：使用 flyCameraTo 和 flyCameraAround，通过预定义的相机飞越和轨道动画引导用户浏览 3D 地图。如需了解详情，请参阅为镜头路径添加动画效果。
  • 控制用户互动：自定义用户可用的控件和镜头移动。如需了解详情，请参阅 3D 地图控件和探索、限制镜头视图和边界以及控制镜头位置。

快速示例

如需加载 maps3d 库并使用 mode="HYBRID"、center (lat,lng,altitude)、range、tilt 和 heading 呈现 <gmp-map-3d> 元素，请使用以下代码段：

<gmp-map-3d
  style="height: 400px; width: 100%;"
  mode="HYBRID"
  center="40.7484,-73.9857,200"
  range="900"
  tilt="67"
  heading="35">
</gmp-map-3d>
<script async
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=beta&libraries=maps3d">
</script>

将 YOUR_API_KEY 替换为您的 Google Maps Platform API 密钥。

如何在 Maps JavaScript 中使用 3D 地图

1	设置	从设置 JavaScript API 开始，然后完成后续设置说明。
2	了解 Maps JavaScript API 的结算方式	如需了解相关信息，请参阅用量和结算。
3	创建地图	如需了解详情，请参阅开始使用。

覆盖率

在受支持的国家和地区，部分大都市区提供仿真 3D 建筑和地标网格。在没有 3D 网格覆盖的区域（例如印度），<gmp-map-3d> 会渲染覆盖在 3D 地形海拔上的 2D 卫星或路线图图像，而不会渲染凸出的 3D 建筑物。如需在没有 3D 网格覆盖的区域展示地标，您可以使用 Model3DElement 在其坐标处放置自定义 glTF 3D 模型，或使用 2D <gmp-map>。如需了解各个国家/地区的可用性（在 Maps JavaScript 3D 列下），请参阅 Google Maps Platform 覆盖范围详细信息。

后续步骤

• 查看入门指南，制作“Hello, World!”3D 地图。
• 试用入门 Codelab，探索如何向地图添加地图项。
• 在下一个 Codelab 中，您将进一步了解标记和动画。
• 浏览 Google 的一系列示例，找到适合您的应用场景的示例。