--- theme: cyanosis --- 哈喽，各位高贵的倔友们你们好呀(✪ω✪)，今天这一篇文章继续分享高德地图的内容，这是第三篇也是最后一篇关于高德地图内容的分享了，后续将继续带来一些新的其他类型的文章分享，期望能继续得到你的关注。那么，如果各位看官大大觉得本章还不错，也希望能给点个赞呗，我们话不多说，直接进入正题。 ## 写在开头高德地图的申请、安装与初始化我们在[上一篇文章](https://juejin.cn/post/7266721485811712041)讲过，这里就不多说啦，直接来进入本章的主题内容。同样的配方，同样的操作，搞起。 ![008E0D3C.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2091dcc5943349f9b7ee29b7ac34684b~tplv-k3u1fbpfcp-watermark.image?) ### 数据准备这里小编先准备了一些测试数据，下面会以这种数据结构来编写逻辑，如果你真实的数据结构与此不同，可以自行再转换一下或者适当调整一下代码逻辑。创建 `data.js` 文件： ```javascript const data = [ { "province": "北京市", "city": "北京城区", "area": "西城区", "append": "北京市北京城区西城区3", "lng": "116.365868", "lat": "39.912289", "count": "10", }, { "province": "上海市", "city": "上海城区", "area": "静安区", "append": "上海市上海城区静安区5", "lng": "121.459384", "lat": "31.247105", "count": "2", }, { "province": "广东省", "city": "广州市", "area": "黄埔区", "append": "广东省广州市黄埔区4", "lng": "113.459749", "lat": "23.106402", "count": "20", }, { "province": "四川省", "city": "成都市", "area": "青羊区", "append": "四川省成都市青羊区6", "lng": "104.062499", "lat": "30.674406", "count": "1", }, { "province": "河北省", "city": "石家庄市", "area": "桥西区", "append": "河北省石家庄市桥西区2", "lng": "114.461154", "lat": "38.004043", "count": "2", }, { "province": "重庆市", "city": "重庆城区", "area": "涪陵区", "append": "重庆市重庆城区涪陵区1", "lng": "107.389298", "lat": "29.703113", "count": "2", }, { "province": "广西省", "city": "桂林市", "area": "七星区", "append": "广西壮族自治区2", "lng": "110.317826", "lat": "25.252701", "count": "10", }, { "province": "湖南省", "city": "长沙市", "area": "望城区", "append": "湖南省长沙市望城区2", "lng": "112.819549", "lat": "28.347458", "count": "20", }, { "province": "湖南省", "city": "郴州市", "area": "永兴县", "append": "湖南省郴州市永兴县4", "lng": "113.116528", "lat": "26.127151", "count": "12", }, ]; export default data; ``` ## 绘制热力区域地图上绘制热力图，我们依旧使用的是高德地图提供的对象，这次使用到的是 [AMap.HeatMap](https://lbs.amap.com/api/javascript-api-v2/documentation#heatmap) 对象，但是该热力图是高德基于第三方 [heatmap.js](https://www.patrick-wied.at/static/heatmapjs/docs.html) 来实现的，所以如果需要更详细的参数解释，可以直接去 `heatmap.js` [官方文档](https://www.patrick-wied.at/static/heatmapjs/docs.html)看看。以下是高德地图文档中对 `AMap.HeatMap` 对象的参数说明，大部分是和 `heatmap.js` 参数一致的，你也可以自己上[官网](https://lbs.amap.com/api/javascript-api-v2/documentation#heatmap)瞅瞅(✪ω✪)。 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6a503308ecc448c6bc88eab35b982975~tplv-k3u1fbpfcp-watermark.image?) ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/94c639f1fb56499f893d509e787eda52~tplv-k3u1fbpfcp-watermark.image?) 下面我们来看看以我们本章的数据，如何来绘制出热力图，直接来看看代码： ```javascript ``` 注意，`data.js` 文件数据与前面两篇文章中的数据有所变化。 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ed3226c6009b406dbc8ca916ec0ec9a6~tplv-k3u1fbpfcp-watermark.image?) `AMap.HeatMap` 对象使用起来还是挺简单方便的，仅需要把数据转换成合适的结构丢进去就行了，上面可能唯一比较让人觉得不懂的是 `count` 与 `max` 参数代表着什么意思？ - `count`：权重，可以简单理解为每条数据对比的那个字段值。 - `max`：权重的最大值，`max` 可以不填，会默认取数据集 `count` 的最大值。 ## 绑定交互事件仅仅绘制静态的热力图还不能满足我们实际的业务需求（可恨的产品经理￣へ￣），还需要我们给这个热力图添加交互效果，例如以下的效果： ![7878.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c5b128e727f64dfdacaac10af14aaa65~tplv-k3u1fbpfcp-watermark.image?) 看着好像也挺简单？但由于高德地图对于热力图是不支持任何事件绑定监听的，这就需要绕点弯路了。 ![01B19233.jpg](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7079b0dc419044b583174be6d95a970a~tplv-k3u1fbpfcp-watermark.image?) 在[上一篇](url)文章中，我们学会了绘制散点并给它们绑定事件交互，只要将该功能迁移过来就行啦(✪ω✪)。so easy !!! 我们来看看具体的编码过程： ```javascript ``` 上面小编把绘制过程与事件监听过程写上去了，至于其他业务交互逻辑就看你实际需求来完善了。 ## 工具栏操作接下来，我们再来完成一个工具栏的小功能作为结尾，直接随小编来看代码： ```javascript ``` ![79.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3093ecbfaa784f62b76736c43490f19e~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) 希望本文对你有所帮助，如有任何疑问，期待你的留言哦。
老样子，点赞+评论=你会了，收藏=你精通了。