在本教程中,您将自行使用 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 地图编写了一个程序。