开始

在本教程中,您将自行使用 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

接下来,您将添加 JavaScript 代码来加载地图。该代码包含两个元素:

  • 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 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=alpha&libraries=maps3d"></script>
  </body>
</html>

运行程序

如需运行程序并查看输出,请按以下步骤操作:

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

恭喜!您刚刚使用 Google 的 Maps JavaScript API 仿真 3D 地图编写了一个程序。

后续步骤

  • 利用 Google 的现有示例打造更复杂的 3D 地图体验。
  • 如需了解 Maps JavaScript API 中 3D 地图的全部潜力,请参阅参考文档