vue+ 高德地图 热力图

vue 实现高德地图 热力图

效果图：

第一步：引入链接

<script src="https://webapi.amap.com/maps?v=2.0&key=申请key"></script>

第二步：初始化地图

let vm = this;
    vm.map = null;
    vm.map = new AMap.Map('Map', {
      viewMode: '2D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D',
      zoom: 5, //初始化地图层级
      zooms:[5,7],
      center: [108.945951, 34.465262], //初始化地图中心点
      layers: [
        // 卫星
        new AMap.TileLayer.Satellite(),
        // 路网
        new AMap.TileLayer.RoadNet()
      ],
 });

第三步：热力图

let vm = this;
vm.heatmap = {};
vm.map.plugin(["AMap.HeatMap"], function () {
  //初始化heatmap对象
  vm.heatmap = new AMap.HeatMap(vm.map, {
   radius: 25, //给定半径
   opacity: [0, 0.8]
  });
  //设置数据集：该数据为北京部分“公园”数据
  vm.heatmap.setDataSet({
    data: heatmapData,
    max: 60
  });
});

相关链接
热力图 数据
高德地图热力图官网