高德地图热力图，高德自带热力图heatmap

1、

 mounted() {
    this.init1()

  },

2、

init1() {
      const This = this
      //实例化地图
      const map = new AMap.Map('container', {
        resizeEnable: true,
        zoom: This.cpInfo.zoom,
        zooms: [3, 17],
        mapStyle: 'amap://styles/blue', 默认地图样式(normal)靛青蓝blue       
        center: This.cpInfo.center
      }) 
      //我用的是高德2.0，有的文章里写的是AMap.Heatmap，控制台会报错，要求第二个m也是大写，AMap.HeatMap
      map.plugin(['AMap.HeatMap'], function() {
        const heatmap = new AMap.HeatMap(map, {
          radius: 25, // 每个点的覆盖范围半径，单位是像素
          opacity: [0, 0.8],
          gradient: {
            0.3: 'blue',
            0.5: 'green',
            0.7: 'yellow',
            0.9: 'red'
          }
        })    
        This.heatMao = heatmap

        //设置数据集：该数据为自定义假数据
        var heatmapData = [
          { lng: '116.012743', lat: '31.754593', count: 8 },
          //我这里定义了至少一两百行的数据，因为要的就是假数据，所以我自己在高德坐标拾取中自己找的经纬度，文章末尾贴了链接
        ]
        This.heatMaoList = heatmapData
        This.heatMao.setDataSet({
          data: This.heatMaoList, // 加载数据一节中，可以自定义js文件，js文件内保存所有数据的变量。也可以直接像我这样在方法中定义数组
          max: 10 // 见gradient的例子
        })
      })
      map.setDefaultCursor('crosshair')
      this.map = map
      this.AMap = AMap   
    },

高德坐标拾取链接：高德坐标拾取