在本教程中,您将引导自己使用 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" 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>
运行程序
如需运行该程序并查看输出结果,请按以下步骤操作:
- 保存您创建的 HTML 文件。
- 在网络浏览器中打开文件(您可以双击文件,将其拖动到浏览器窗口中,或右键点击文件并使用“打开方式”)。
- 您应该会在浏览器窗口中看到地图。
恭喜!您刚刚编写了一个程序,使用 Google Maps JavaScript API 仿真 3D 地图。