前端系列——vue2+高德地图web端开发（热力图）

前言

热力图其实实现起来不难
原理是在图层上将获取到的坐标点进行层级渲染形成多层的圆，每层的圆以不同的颜色进行展示，当多个圆叠加到一起就形成了热力图

组件间的调用说明

在Vue中我将组件拆为map.vue和config.vue使用一个父页面将这两个组件拼合到一起

总体思路

1. 首先选择config.vue中的复选框，传递复选框被选中的标志给Map.vue（标志比如若复选框选中则传递true，消除选中则传递false）【这里用到兄弟组件间的传值】
2. Map.vue接收到复选框选中的标记后进行true和false的判断，判断为true则调用热力图函数代码即可

代码

热力图坐标点搜索

我们先对热力图需要的坐标点进行搜索，这里的目的是第一次搜索坐标点的数量，页数，等信息，因为多数需要的坐标点少则几个，多则上百，近千，我们在这个函数中获取到必要的数据信息即可
注意这里的兴趣点城市，最详细可以搜索到区的信息，街道不行

searchhotchartpos(val) {
   
      this.map.plugin(['AMap.PlaceSearch'], () => {
   
        //构造地点查询类
        var placeSearch = new AMap.PlaceSearch({
   
          pageSize: 50, // 单页显示结果条数
          pageIndex: 1, // 页码
          city: this.searchPlaceInput, // 兴趣点城市
          citylimit: true //是否强制限制在设置的城市内搜索
          //map: this.map, // 展现结果的地图实例
          // panel: 'panel', // 结果列表将在此容器中进行展示。
          // autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
        })
        //关键字查询
        p