开始使用

请选择平台： Android iOS JavaScript

在本教程中，您将自行完成以下操作：使用 Maps JavaScript 中的 3D 地图创建您的第一个 JavaScript 应用，该应用是一个基本窗口，可显示金门大桥的俯视图，背景是马林岬。

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

设置环境

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

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

编写 HTML 网页

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

<html>
  <head>
      <title>Map</title>
  </head>
  <body>
      <!-- Your JavaScript code will go here -->
  </body>
</html>

添加 JavaScript

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

  • gmp-map-3d 包含用于初始化起始相机位置和视图的参数。
  • script 包含用于加载 Maps JavaScript API 的调用。请务必将 YOUR_KEY 替换为您的 API 密钥。

<html>
    <head>
        <title>Map</title>
        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script
            async
            src="https://maps.googleapis.com/maps/api/js?loading=async&key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps3d"></script>
    </head>
    <body>
        <gmp-map-3d center="37.7704,-122.3985,500" tilt="67.5" mode="hybrid">
        </gmp-map-3d>
    </body>
</html>

运行应用

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

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

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

后续步骤

  • 使用 Google 的现有示例打造更复杂的 3D 地图体验。
  • 如需充分发掘 Maps JavaScript API 中 3D 地图的潜力，请阅读参考文档。