开始使用

在本教程中，您将指导您使用 Maps JavaScript 中的仿真 3D 地图创建您的第一个 JavaScript 应用：一个基本窗口，用于显示金门大桥的俯视图，背景是马林岬。

完成本教程后，您应该会在开发环境中看到以下地图：

设置环境

在开始编写代码之前，您必须设置一个运行 JavaScript 的环境。在本教程中，您将使用网络浏览器作为环境。所有新型网络浏览器都内置了对 JavaScript 的支持，因此您无需安装任何其他软件。

  1. 打开您选择的文本编辑器。
  2. 创建一个新文件并以 .html 扩展名（例如hello-p3djs.html）。

编写 HTML 网页

首先，您需要创建一个具有基本 HTML 结构的网页：

<!DOCTYPE html>
<html>
<head>
    <title>Hello Photorealistic 3D Maps in Maps JavaScript</title>
</head>
<body>
    <!-- Your JavaScript code will go here -->
</body>
</html>

添加 JavaScript

接下来，您需要添加自定义 HTML 元素来加载地图。该代码包含两个元素：

  • gmp-map-3d 包含用于初始化镜头起始位置和视图的参数。
  • script 包含用于加载 Maps JavaScript API 的调用。请务必将 YOUR_KEY 替换为您的 API 密钥。
<!DOCTYPE html>
<html>
  <head>
    <title>Hello Photorealistic 3D Maps in Maps JavaScript</title>

    <style>
      html,
      body {
        height:100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <gmp-map-3d mode="hybrid" center="37.841157, -122.551679" range="2000" tilt="75" heading="330"></gmp-map-3d>
    <script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_KEY>&v=beta&libraries=maps3d"></script>
  </body>
</html>

运行应用

如需运行该应用并查看输出，请按以下步骤操作：

  1. 保存您创建的 HTML 文件。
  2. 在网络浏览器中打开文件（您可以双击文件，将其拖到浏览器窗口中，或右键点击文件并使用“打开方式”）。
  3. 您应该会在浏览器窗口中看到地图。

恭喜！您刚刚使用 Maps JavaScript API 中的 Google 仿真 3D 地图编写了一个应用。

后续步骤

  • 利用 Google 的现有示例打造更复杂的 3D 地图体验。
  • 阅读参考文档，探索 Maps JavaScript API 中仿真 3D 地图的全部潜力。