准备
成为开发者并创建 key
1、登录控制台
登录 高德开放平台控制台，如果没有开发者账号，请 注册开发者。
2、创建 key
进入应用管理，创建新应用，新应用中添加 key，服务平台选择 Web端(JS API)。
3、获取 key 和密钥
创建成功后，可获取 key 和安全密钥。
快速上手
1、HTML 页面准备
编写 HTML 页面的基本结构代码，需要一个节点来承载地图，本教程中使用 <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>2、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", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
}).then((AMap)=>{
const map = new AMap.Map('container');
}).catch((e)=>{
console.error(e); //加载错误提示
});
</script>3、添加点标记 Marker
JS API 提供了在地图之上绘制覆盖物的能力，现在我们添加add()一个默认的点标记Marker。
const marker = new AMap.Marker({
position:[116.39, 39.9] //位置
})
map.add(marker); //添加到地图
4、为点标记 Marker 添加事件，并唤起信息窗体 InfoWindow
JS API 提供的 Map、点标记、矢量图形等实例均支持事件绑定，鼠标、触摸板操作均会触发相应的事件。我们通过给点标记绑定click()事件来添加信息窗体InfoWindow。
// 创建信息窗体
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 事件
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了