快速上手 最后更新时间: 2023年12月04日
本文介绍如何创建 key 和开发一个简单的地图应用。
第一个地图示例
1、实现步骤
1
1.1 准备
成为开发者并创建 key
为了正常调用 API ，请先注册成为高德开放平台开发者，并申请 web 平台（JS API）的 key 和安全密钥，点击 具体操作。
提示
你在2021年12月02日以后申请的 key 需要配合你的安全密钥一起使用。
2
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>3
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) => {
const map = new AMap.Map("container");
})
.catch((e) => {
console.error(e); //加载错误提示
});
</script>本示例使用 JS API Loader 进行加载，查看更多 api 加载方式。
提示
为了避免你在开发中遇到有关 key 的报错，请务必正确的使用 key 和安全密钥，详见 准备 教程。
4
1.4 为地图点标记 Marker
JS API 提供了在地图之上绘制覆盖物的能力，现在我们使用add()方法添加一个默认的点标记Marker。
const marker = new AMap.Marker({
position: [116.39, 39.9], //位置
});
map.add(marker); //添加到地图代码需添加到.then((AMap)=>{})中，即：AMap 对象可以取到后执行，同理后边步骤的代码都有此要求。
5
1.5 为点标记 Marker 添加事件，并唤起信息窗体 InfoWindow
JS API 提供的 Map、点标记、矢量图形的实例均支持事件，鼠标或者触摸操作均会触发相应的事件。我们通过给点标记绑定click事件，通过添加信息窗体InfoWindow来处理click的回调事件。
const infoWindow = new AMap.InfoWindow({
//创建信息窗体
isCustom: true, //使用自定义窗体
content: "<div>HELLO,AMAP!</div>", //信息窗体的内容可以是任意html片段
offset: new AMap.Pixel(16, -45),
});
const onMarkerClick = function (e) {
infoWindow.open(map, e.target.getPosition()); //打开信息窗体
//e.target就是被点击的Marker
};
const marker = new AMap.Marker({
position: [116.481181, 39.989792],
});
map.add(marker);
marker.on("click", onMarkerClick); //绑定click事件查看更多信息窗体 InfoWindow 信息配置 如：窗口打开及关闭等。
6
1.6 为地图添加折线 Polyline
像点标记一样，通过add()方法向地图添加折线Polyline。
const lineArr = [
[116.368904, 39.913423],
[116.382122, 39.901176],
[116.387271, 39.912501],
[116.398258, 39.904600]
];
const polyline = new AMap.Polyline({
path: lineArr, //设置线覆盖物路径
strokeColor: "#3366FF", //线颜色
strokeWeight: 5, //线宽
strokeStyle: "solid", //线样式
});
map.add(polyline);2、线上尝试JS API
高德 JS API 2.0 提供了丰富的功能和应用场景，开发人员可以根据自己的需求，灵活运用这些功能来创建各种类型的地图应用。
