--- theme: cyanosis --- 哈喽，各位高贵的倔友们你们好呀(✪ω✪)，今天小编给各位分享一篇关于高德地图内容的文章，如果各位倔友觉得还不错，期望点个赞呗，那我们话不多说，直接进入正题。 ## 写在开头 ### 申请Web端开发者Key和安全密钥要使用高德地图，我们必须先去[高德地图官网](https://lbs.amap.com/)注册成为开发者，并创建应用申请得到一个开发者 `Key` 与安全密钥。注册/登录 -> 右上角头像 -> 应用管理 -> 点击"创建新应用"按钮 -> 添加 `Key`。上面我们简单给个过程路径就不再多说啦，很简单的，更加详细的过程可以看看这里。[传送门](https://lbs.amap.com/api/javascript-api/guide/abc/prepare) ### 安装然后我们需要安装高德地图的依赖包： ```javascript npm install @amap/amap-jsapi-loader --save ``` ### 初始化地图装好依赖后，就能初始化地图了。新建 `AreaMap.vue` 文件： ```javascript ``` 这里小编使用的是 `Vue`，对于其他技术栈初始化地图，可以看看这里[传送门](https://lbs.amap.com/api/javascript-api-v2/guide/abc/amap-vue)。 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d4d35f37558e48ae9a68861deca974c1~tplv-k3u1fbpfcp-watermark.image?) ### 数据准备这里小编先准备了一些测试数据，下面会以这种数据结构来编写逻辑，如果你真实的数据结构与此不同，可以自行再转换一下或者适当调整一下代码逻辑。创建 `data.js` 文件： ```javascript const data = [ { "province": "北京市", "city": "北京城区", "area": "西城区", "append": "北京市北京城区西城区3", "lng": "116.365868", "lat": "39.912289", }, { "province": "上海市", "city": "上海城区", "area": "静安区", "append": "上海市上海城区静安区5", "lng": "121.459384", "lat": "31.247105", }, { "province": "广东省", "city": "广州市", "area": "黄埔区", "append": "广东省广州市黄埔区4", "lng": "113.459749", "lat": "23.106402", }, { "province": "四川省", "city": "成都市", "area": "青羊区", "append": "四川省成都市青羊区6", "lng": "104.062499", "lat": "30.674406", }, { "province": "河北省", "city": "石家庄市", "area": "桥西区", "append": "河北省石家庄市桥西区2", "lng": "114.461154", "lat": "38.004043", }, { "province": "重庆市", "city": "重庆城区", "area": "涪陵区", "append": "重庆市重庆城区涪陵区1", "lng": "107.389298", "lat": "29.703113", }, ]; export default data; ``` > 需要注意，上面小编虽然只列举了几条数据，但像这种以后可能会增大的数据量，一定不要直接挂载到 `Vue` 身上，要不消耗的依赖收集行为会特别影响性能！！！不要问我为什么知道的(•́へ•́╬)。 ## 地图板块颜色标注完成准备工作后，我们就要进入本章的主题对“地图区域板块”进行自定义颜色标注，该功能主要使用到高德地图的 [AMap.DistrictLayer](https://lbs.amap.com/api/javascript-api-v2/documentation#districtlayer) 图层对象。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0e5f9df37de14dd5828e5713ba526cb8~tplv-k3u1fbpfcp-watermark.image?) 该对象使用方式很简单，我们主要关注它的 `adcode` 参数，它表示区域板块的行政编码，下面小编写了一个简单案例，请观看： > `adcode` 参数官方文档写得是 `String` 类型，但实际还支持 `Array` 类型。 ```javascript ``` 具体效果： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c3c0542dafcd47ce9ecde02eb5d2e783~tplv-k3u1fbpfcp-watermark.image?) 是不是很简单(✪ω✪)，然后你以为这就完了？当然还没，接下来我们需要解决两个问题。 1. 开头我们提前准备的数据里面是没有行政编码的，这个行政编码只能从高德那边获取回来。 2. 我们需要实现对不同区域板块标注不同的颜色。 ### 获取行政编码行政编码的获取，高德提供了一个 [AMap.DistrictSearch](https://lbs.amap.com/api/javascript-api-v2/documentation#districtsearch) 对象供我们查询，它属于额外的插件服务，需要在地图初始化的时候进行配置。具体配置如下： ```javascript /** @name 初始化地图 **/ initMap() { return new Promise(resolve => { ... AMapLoader.load({ key: '你的Key', version: '2.0', plugins: [ // 配置行政区查询服务 'AMap.DistrictSearch' ], }) ... }) } ``` 后续如果使用到其他一些额外服务都是在 `plugins` 这里进行配置。接下来我们就把数据的地址信息转换成具体的行政编码： ```javascript ``` `subdistrict` 参数有四个值：`0、1、2、3`。默认值为 `1`，其中 `0` 表示不返回下级行政区，`1` 表示返回下一级行政区，`2` 表示返回下两级行政区，`3` 表示返回下三级行政区。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a9ffae6a49d24fecb5abf4513127548d~tplv-k3u1fbpfcp-watermark.image?) > 在 `getAllAdCode` 方法中，小编直接把全国与省市区三级的行政编码一次性全部获取回来了，然后再通过循环去找到对应的数据，高德返回全国区域的行政编码其实是非常快的。 > > 记得初次写得时候，小编是根据数据中需要哪个区域的数据就去查询那个区域，少量数据的话这样子是没有问题的，但是一旦数据量开始变多，并且查询的不是省级，是市级或者区级，那性能就嘎嘎往下掉。。。-.- ### 不同颜色标注那么，现在地图中红色板块的标注就是根据"数据"来控制的了，但是全部都是红色的略显单调，小编这就来给它们分别上上色(✪ω✪)。在[官方文档](https://lbs.amap.com/api/javascript-api-v2/documentation#districtlayer)中对于板块的样式调整有六个参数可以使用，应该是足够满足我们实际中复杂的业务需求了。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8e30c71d29974215a6bf76273c335b4c~tplv-k3u1fbpfcp-watermark.image?) 具体过程如下： ```javascript ``` 以上小编通过填充色 `fill` 支持的 `Function` 类型来实现不同颜色的标注，在回调函数中我们能获取到每个区域板块的行政编码。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/08d3b413766d472298419417031ff377~tplv-k3u1fbpfcp-watermark.image?) ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/78bd8330ded348739b14dd46ebb20d8c~tplv-k3u1fbpfcp-watermark.image?) ## 省市区板块标注切换上面我们标注的区域都是以省级为单位的，那么如何实现省级、市级、区级之间的标注切换呢？接下来请听小编细细道来(✪ω✪)。前面我们知道了标注一块区域就需要知道这块区域的行政编码才行，那么问题转换成： - 省级：获取需要的省级行政编码 - 市级：获取需要的市级行政编码 - 区域：获取需要的区级行政编码而且我们在上面的 `allAdCode` 变量中存储了全国所有区域板块的行政编码，它是一棵树形结构。我们先看效果，再具体看编码过程： ![666.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/65468ac7fabb498ca56f18bebc537e19~tplv-k3u1fbpfcp-watermark.image?) ```javascript ``` 编码过程不难，主要需要注意两点问题，其一是特殊省份像直辖市、台湾省、澳门等等，其二是性能问题。 ## 主题风格切换最后，我们再来完成一个地图主题风格切换的功能，高德地图官方给我们提供了十种标准的主题，可以直接免费使用，如果还不能满足你的需求，你也可以创建自定义的主题地图，当然，自定义功能强大只是需要花点 `Money` (✪ω✪)。[传送门](https://geohub.amap.com/mapstyle/index) 因为比较简单，小编就直接来贴代码啦。 ```javascript ``` 具体实现效果： ![66.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/977e42c00072409dbfee4415c4987f28~tplv-k3u1fbpfcp-watermark.image?) **** ![05220D85.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c074959752a7405bb50757b56c7833d6~tplv-k3u1fbpfcp-watermark.image?) 哎，写到这里突然发现文章好像又贼拉长了，还有两个功能没写呢（“工具栏操作”、“地图板块交互事件”），呃......后面再写续集吧，溜了溜了。 ## 完整源码 [点我点我](https://gitee.com/ydydydq/gaode-map)
****

至此，本篇文章就写完啦，撒花撒花。 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b2198fba2b674f1b935a63e4abb3cbd7~tplv-k3u1fbpfcp-watermark.image) 希望本文对你有所帮助，如有任何疑问，期待你的留言哦。
老样子，点赞+评论=你会了，收藏=你精通了。