高德地图 JS API2.0 入门使用教程
准备工作
注册高德地图开发者账号
进入高德开放平台首页使用手机号注册，然后完成身份认证。
创建应用
[应用管理] --> [创建新的应用]–>[填写应用名称以及应用类型] -->[添加]，然后获取到安全密钥和 key 即可。
过程如下图：
阅读参考文档
JS API 安全密钥使用：JS API 安全密钥使用-基础-进阶教程-地图 JS API 2.0 | 高德地图API (amap.com)
地图JSAPI 2.0 参考手册：参考手册-地图 JS API 2.0 | 高德地图API (amap.com)
JS API 2.0 使用概述概述-地图 JS API 2.0|高德地图API (amap.com)
高德地图图层分布
创建地图实例
首先展示地图
-
准备好一个html网页的框架
<!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>高德地图JS API</title> <style> html, body, #container { width: 100%; height: 100%; } </style> </head> <body> <div id="container"></div> </body> </html> -
加载 JS API
<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>或者使用明文加载（如下），但是这种方式不适合在生产模式中使用
<script type="text/javascript"> window._AMapSecurityConfig = { securityJsCode: "「你申请的安全密钥」", }; </script> <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=「你申请的应用key」"></script> -
地图初始化
- 如果使用
JS API Loader加载，这个就写在.then((AMap)=>{})中 - 这个写在另一个
script文件中，同时要在前面两个script文件加载之后，但是需要保证container容器已经挂载到DOM中。
const map = new AMap.Map("container", { viewMode: '2D', //默认使用 2D 模式 zoom: 11, //地图级别 center: [116.397428, 39.90923], //地图中心点 }); - 如果使用
-
添加主题样式
以下为初始时设置，也可以使用
map.setMapStyle('amap://styles/whitesmoke')来动态的设置地图样式。map = new AMap.Map("container", { mapStyle: "amap://styles/fresh", //设置地图的显示样式 }); -
综合起来的效果
展示图层
JS API 支持官方图层、三方图层、数据图层等。
本文介绍如何在地图上添加官方图层：实时交通路况图层AMap.TileLayer.Traffic，以及对此图层的其他操作。
-
创建图层并加载
Layers属性值是设置地图图层的数组，数组可以是图层中的一个或多个，即可以同时显示多个图层。
// 创建图层 const layer = new AMap.createDefaultLayer({ zooms: [3, 20], //可见级别 visible: true, //是否可见 opacity: 1, //透明度 zIndex: 0, //叠加层级 }); // 加载图层 const map = new AMap.Map("container", { viewMode: "2D", //默认使用 2D 模式 zoom: 11, //地图级别 center: [116.397428, 39.90923], //地图中心点 layers: [layer], //layer为创建的默认图层 }); // 这里加载的图层是默认的图层，即使不写也会默认显示 -
加载交通图层
// 创建交通图层 const traffic = new AMap.TileLayer.Traffic({ autoRefresh: true, //是否自动刷新，默认为false interval: 180, //刷新间隔，默认180s }); // 加载 map.add(traffic); //通过add方法添加图层 -
显示或者隐藏图层
traffic.show(); //显示路况图层 traffic.hide(); //隐藏路况图层
添加控件
- JS API 的控件可以以 插件的方式 引入的
推荐异步加载方式，在需要的地方引入。通过AMap.plugin方法按需引入控件，在plugin回调之后使用控件功能。
-
添加控件
//异步加载控件 AMap.plugin('AMap.ToolBar',function(){ var toolbar = new AMap.ToolBar(); //缩放工具条实例化 map.addControl(toolbar); //添加控件 }); -
控件的显示和隐藏
toolbar.show(); //缩放工具展示 toolbar.hide(); //缩放工具隐藏
-
JS API 的控件也可以使用同步预加载的方式
<script src="//webapi.amap.com/maps?v=2.0&key=申请的key值&&plugin=AMap.控件1,AMap.控件2,AMap.控件3,AMap.控件4"></script>引入之后然后以创建对象的形式进行创建：
var controlBar = new AMap.ControlBar({ visible: false, position: { top: '10px', right: '10px' // 控件停靠位置 { top: 5; left: 5; right: 5; bottom: 5 } 或者 'LT': 左上角, 'RT': 右上角, 'LB': 左下角, 'RB': 右下角 } }); map.addControl(controlBar);
添加点标记
-
自定义 Marker
//点标记显示内容 const markerContent = `<div class="custom-content-marker"> <img src="//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png"> <div class="close-btn" οnclick="clearMarker()">X</div> </div>` 自定义样式内容
.custom-content-marker { position: relative; width: 25px; height: 34px; } .custom-content-marker img { width: 100%; height: 100%; } .custom-content-marker .close-btn { position: absolute; top: -6px; right: -8px; width: 15px; height: 15px; font-size: 12px; background: #ccc; border-radius: 50%; color: #fff; text-align: center; line-height: 15px; box-shadow: -1px 1px 1px rgba(10, 10, 10, .2); } .custom-content-marker .close-btn:hover{ background: #666; } -
创建 Marker 对象
// 创建marker对象 const position = new AMap.LngLat(116.397428, 39.90923); //Marker 经纬度 const marker = new AMap.Marker({ position: position, content: markerContent, //将 html 传给 content offset: new AMap.Pixel(-13, -30), //以 icon 的 [center bottom] 为原点 }); // 添加marker map.add(marker);注意：
offset: new AMap.Pixel(-13, -30)，之所以为(-13，-30)，因为需要让上图以[center bottom]的方式扎在对应的经纬度上，上图是宽26px，高34px(去掉下部阴影为30px)，因此需要对自定内容做个offset的偏移(-13，-30)。 -
为
Marker绑定事件function clearMarker() { map.remove(marker); //清除 marker } document.querySelector(".close-btn").onclick = clearMarker; //绑定点击事件
添加多边形
AMap.Polygon对象为用户提供在地图图面绘制多边形的能力。可以为多边形设置填充颜色fillColor、描边颜色strokeColor、轮廓线样式等属性。与之前的 Canvas、SVG路径的绘制方法一致。
-
绘制路径
const pathArr = [ [ [ [121.7789, 31.3102], [121.7279, 31.3548], [121.5723, 31.4361], [121.5093, 31.4898], [121.5624, 31.4864], [121.5856, 31.4547], [121.7694, 31.3907], [121.796, 31.3456], [121.7789, 31.3102], ], ], ]; const polygon = new AMap.Polygon({ path: pathArr, //多边形路径 fillColor: "#ccebc5", //多边形填充颜色 strokeOpacity: 1, //线条透明度 fillOpacity: 0.5, //填充透明度 strokeColor: "#2b8cbe", //线条颜色 strokeWeight: 1, //线条宽度 strokeStyle: "dashed", //线样式 strokeDasharray: [5, 5], //轮廓的虚线和间隙的样式 }); // 添加到地图 map.add(polygon);
-
为
Polygon添加事件，提升交互效果//鼠标移入更改样式 polygon.on("mouseover", () => { polygon.setOptions({ fillOpacity: 0.7, //多边形填充透明度 fillColor: "#7bccc4", }); }); //鼠标移出恢复样式 polygon.on("mouseout", () => { polygon.setOptions({ fillOpacity: 0.5, fillColor: "#ccebc5", }); }); -
效果图
- 使用到的方法
| 参数/方法 | 说明 | 类型 | 参数值描述 | 默认值 |
|---|---|---|---|---|
| fillColor | 多边形填充颜色 | String | 使用16进制颜色代码赋值 | ‘#00B2D5’ |
| strokeWeight | 轮廓线宽度 | Number | - | 2 |
| strokeColor | 线条颜色 | String | 使用16进制颜色代码赋值 | ‘#00D3FC’ |
| fillOpacity | 多边形填充透明度，取值范围 | Number | 取值范围[0,1]，0表示完全透明，1表示不透明。 | 0.5 |
| strokeOpacity | 轮廓线透明度 | Number | 取值范围[0,1]，0表示完全透明，1表示不透明 | 0.9 |
| strokeStyle | 轮廓线样式 | String | 实线:“solid” 虚线:“dashed” | “solid” |
| strokeDasharray | 勾勒形状轮廓的虚线和间隙的样式，在strokeStyle为dashed时有效，在 ie9+浏览器有效 | Array | 详见 参考手册 | - |
| setOptions() | 修改多边形属性的方法，如样式风格，包括组成多边形轮廓线的节点、轮廓线样式等。 | Function | - | - |
搜索地点
通过AMap.plugin方法按需引入插件，在plugin回调之后使用插件功能。
AMap.plugin(["AMap.PlaceSearch"], function () {
const placeSearch = new AMap.PlaceSearch({
pageSize: 5, //单页显示结果条数
pageIndex: 1, //页码
city: "010", //兴趣点城市
citylimit: true, //是否强制限制在设置的城市内搜索
map: map, //展现结果的地图实例
panel: "my-panel", //参数值为你页面定义容器的 id 值<div id="my-panel"></div>，结果列表将在此容器中进行展示。
autoFitView: true, //是否自动调整地图视野使绘制的 Marker 点都处于视口的可见范围
});
placeSearch.search("北京大学"); //使用插件搜索关键字并查看结果
});
使用到的方法：
| 参数/方法 | 说明 | 类型 | 参数值描述 | 默认值 |
|---|---|---|---|---|
| pageSize | 单页显示结果条数 | Number | 0 - 100 | 20 |
| pageIndex | 页码 | Number | >=1 | 1 |
| city | 兴趣点城市 | String | 城市名（中文或中文全拼）、citycode、adcode | ‘全国’ |
| citylimit | 是否强制限制在设置的城市内搜索 | Boolean | true | false | false |
| map | 展现结果的地图实例。当指定此参数后，搜索结果的标注、线路等均会自动添加到此地图上 | AMap.Map | - | - |
| panel | 结果列表的 HTML 容器id或容器元素，提供此参数后，结果列表将在此容器中进行展示。 | String |HTMLElement|Boolean | 属性值为Boolean类型时，可选值只可为false | - |
| autoFitView | 用于控制在搜索结束后，是否自动调整地图视野使绘制的 Marker 点都处于视口的可见范围 | Boolean | true | false | - |
| search() | 根据输入关键字提示匹配信息，支持中文、拼音 | Function | - |
驾车路线规划
驾车路线规划需要使用AMap.Driving插件。
JS API 的路线规划种类有：驾车AMap.Driving、公交AMap.Transfer、步行AMap.Walking、骑乘AMap.Riding和货车AMap.TruckDriving等。
-
通过起始点的名称进行规划
// 驾车导航 const points = [ { keyword: '清华大学', city: '北京' }, //起始点坐标 { keyword: '北京体育大学', city: '北京' } //终点坐标 ] //引入和创建驾车规划插件 AMap.plugin(["AMap.Driving"], function () { const driving = new AMap.Driving({ map: map, // 地图对象 panel: "my-panel", //参数值为你页面定义容器的 id 值<div id="my-panel"></div> }); //获取起终点规划线路 driving.search(points, function (status, result) { if (status === "complete") { //status：complete 表示查询成功，no_data 为查询无结果，error 代表查询错误 //查询成功时，result 即为对应的驾车导航信息 console.log(result); } else { console.log("获取驾车数据失败：" + result); } }); }); -
使用经纬度进行规划
const startLngLat = [116.379028, 39.865042] //起始点坐标 const endLngLat = [116.427281, 39.903719] //终点坐标 //引入和创建驾车规划插件 AMap.plugin(["AMap.Driving"], function () { const driving = new AMap.Driving({ map: map, // 地图对象 panel: "my-panel", //参数值为你页面定义容器的 id 值<div id="my-panel"></div> }); //获取起终点规划线路 driving.search(startLngLat, endLngLat, function (status, result) { if (status === "complete") { //status：complete 表示查询成功，no_data 为查询无结果，error 代表查询错误 //查询成功时，result 即为对应的驾车导航信息 console.log(result); } else { console.log("获取驾车数据失败：" + result); } }); });