使用入门

在本教程中,您将引导自己使用 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" tilt="67.5"></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 地图的全部功能。