在本教程中，您将自行使用 Maps JavaScript 中的逼真 3D 地图创建您的第一个 JavaScript 程序：一个简单的窗口，用于显示金门大桥的俯视图，背景为马林海角。
完成本教程后，您应该会在开发环境中看到以下地图：
设置环境
在开始编写代码之前，您必须设置一个运行 JavaScript 的环境。在本教程中，您将使用网络浏览器作为环境。所有现代网络浏览器都内置了对 JavaScript 的支持，因此您无需安装任何其他软件。
- 打开您选择的文本编辑器。
- 创建一个新文件，并使用
.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>
运行程序
如需运行程序并查看输出，请按以下步骤操作：
- 保存您创建的 HTML 文件。
- 在网络浏览器中打开该文件（您可以双击该文件、将其拖动到浏览器窗口中，或右键点击该文件并使用“打开方式”）。
- 您应该会在浏览器窗口中看到地图。
恭喜！您刚刚使用 Google 的 Maps JavaScript API 仿真 3D 地图编写了一个程序。