Google Maps Platform 即将推出全新地图样式。此次地图样式更新包括全新默认调色板,以及地图体验和易用性方面的改进。所有地图样式将于 2025 年 3 月自动更新。如需详细了解适用范围以及如何提前选择启用,请参阅
全新 Google Maps Platform 地图样式 。
发送反馈
使用入门
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
在本教程中,您将指导您使用 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 地图编写了一个程序。
后续步骤
您可以使用 Google 的现有示例 打造更复杂的 3D 地图体验。
阅读参考文档 ,探索 Maps JavaScript API 中 3D 地图的全部潜力。
发送反馈
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可 获得了许可,并且代码示例已根据 Apache 2.0 许可 获得了许可。有关详情,请参阅 Google 开发者网站政策 。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2024-06-26。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"没有我需要的信息"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"太复杂/步骤太多"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"内容需要更新"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻译问题"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"示例/代码问题"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"其他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"易于理解"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"解决了我的问题"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"其他"
}]
需要向我们提供更多信息?
{"lastModified": "\u6700\u540e\u66f4\u65b0\u65f6\u95f4 (UTC)\uff1a2024-06-26\u3002"}
[[["易于理解","easyToUnderstand","thumb-up"],["解决了我的问题","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["没有我需要的信息","missingTheInformationINeed","thumb-down"],["太复杂/步骤太多","tooComplicatedTooManySteps","thumb-down"],["内容需要更新","outOfDate","thumb-down"],["翻译问题","translationIssue","thumb-down"],["示例/代码问题","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["最后更新时间 (UTC):2024-06-26。"]]