展示地图 最后更新时间: 2024年10月30日
本文介绍如何使用 JS API 创建一个地图，开发者可以根据需要设置地图样式。
默认地图示例
1、实现步骤
1.1 准备
为了正常调用 API ，请先注册成为高德开放平台开发者，并申请 web 平台（JS API）的 key 和安全密钥，点击 具体操作。
你在2021年12月02日以后申请的 key 需要配合你的安全密钥一起使用。
1.2 HTML 页面准备
编写 HTML 页面的基本的结构代码，需要一个<div>节点作为地图容器，同时为此<div>指定id属性，本教程中使用 <div id="container"></div>，id你可以自定义。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="initial-scale=1.0, user-scalable=no, width=device-width"
/>
<title>HELLO, AMAP!</title>
<style>
html,
body,
#container {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>如果是移动端开发，请在<head>标签内添加<meta>标签并设置name属性为"viewport"，以达到最佳的绘制性能。
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />通过 css 为地图容器指定高度、宽度。
#container {
width: 300px;
height: 180px;
} 1.3 加载 JS API
推荐使用 JS API Loader 来加载，引入在控制台申请的 key 和安全密钥。
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: "「你申请的安全密钥」",
};
</script>
<script src="https://webapi.amap.com/loader.js"></script>
<script type="text/javascript">
AMapLoader.load({
key: "「你申请的应用key」", //申请好的Web端开发者key，调用 load 时必填
version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
})
.then((AMap) => {
//JS API 加载完成后获取AMap对象
})
.catch((e) => {
console.error(e); //加载错误提示
});
</script>为了避免你在开发中遇到有关 key 的问题，请务必正确的使用 key 和安全密钥。
本章头部的示例使用的是<script>标签加载的 JS API 脚本。
<script src="https://webapi.amap.com/maps?v=2.0&key=你申请的key值"></script>1.4 地图初始化
地图初始化需要设置基本的地图图层，你可以传入地图中心点经纬度（center）和地图初始展示级别（zoom）来展示你想要的区域范围。本例展示北京以天安门为中心的11级地图视野。
const map = new AMap.Map("container", {
viewMode: '2D', //默认使用 2D 模式
zoom: 11, //地图级别
center: [116.397428, 39.90923], //地图中心点
});viewMode 是地图渲染的模式，'2D'：平面模式，'3D'：带有俯仰角的 3D 模式。
初始化前需要获得AMap对象，创建地图实例的代码写在Loader的.then((AMap)=>{})中或者<script>标签加载后。
1.5 主题样式
如果你想更改地图的样式，只需要在上一步创建地图对象的时候传入mapStyle即可设置地图样式。你可以使用官方地图样式，也可以使用 GeoHUB 自定义地图平台 创建自定义样式。
官方主题样式
map = new AMap.Map("container", {
mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式
});也可以使用 map.setMapStyle('amap://styles/whitesmoke')来动态的设置地图样式。
至此，你已经成功使用 JS API 2.0展示了一个简单的地图。你可以根据自己的需求，进一步探索和使用 JS API 2.0的其他功能，例如：添加图层、添加点标记 等。
