vue中使用heatmapjs的示例代码（结合百度地图）

业务需求：将heatmap引入页面中，做成一个可引入的框架，使用于所有页面。代码如下。

  
  
  
    .heatmap {
      width:1900px; height:1900px;
    }
  
  
  



 



  
    
   


 

需要引入的js在https://github.com/pa7/heatmap.js  获取。

vue中使用heatmapjs

百度地图怎么使用就不说了，主要讲讲这个heatmap,直接贴代码了，注释挺详细的

 //vue组件中
data(){
  return{
    heatmapOverlay:""
  }
},
mounted() {
  //引用heatmap.js
  //你也可以在index.html中直接插个 

  let script = document.createElement("script");
  script.type = "text/javascript";
  script.src =
   "http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js";
  document.body.appendChild(script);  
  
  //创建地图，这个写自己的创建地图方法，请确认你的地图能加载出来
  this.creatMap();
  
  //一定要先让地图加载出来才加载热力图，我这里做演示直接写个setTimeout了
  setTimeout(()=>{this.getHeatmap()},2000)
 },
methods:{
  getHeatmap() {
    //请求雷达数据,雷达数据需要lng,lat,count 三种数据
   this.$http
    .get("../../../static/radar20.json")
    .then(res => {
     if (res.data.code == "success") {
      console.log("获取radar成功");
      var bigdata = res.data.data;

//关键是下面的三行
//其中map是new BMap.Map()创建的地图实例,其他的热力图属性（radius，opacity这种）可以在百度地图接口实例中调试体验，http://lbsyun.baidu.com/jsdemo.htm#c1_15
      this.heatmapOverlay = new BMapLib.HeatmapOverlay({ radius: 40,opacity:0.4});
      map.addOverlay(this.heatmapOverlay);
      this.heatmapOverlay.setDataSet({ data: bigdata, max: 20 });

     } else {
      console.log("err");
     }
    })
    .catch(err => {
     console.log(err);
    });
  },
}

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。