需要引入的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);  
  
  //創(chuàng)建地圖，這個寫自己的創(chuàng)建地圖方法，請確認你的地圖能加載出來
  this.creatMap();
  
  //一定要先讓地圖加載出來才加載熱力圖，我這里做演示直接寫個setTimeout了
  setTimeout(()=>{this.getHeatmap()},2000)
 },
methods:{
  getHeatmap() {
    //請求雷達數(shù)據(jù),雷達數(shù)據(jù)需要lng,lat,count 三種數(shù)據(jù)
   this.$http
    .get("../../../static/radar20.json")
    .then(res => {
     if (res.data.code == "success") {
      console.log("獲取radar成功");
      var bigdata = res.data.data;
       
       //關(guān)鍵是下面的三行
       //其中map是new BMap.Map()創(chuàng)建的地圖實例,其他的熱力圖屬性（radius，opacity這種）可以在百度地圖接口實例中調(diào)試體驗，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);
    });
  },
}

效果圖：

看完上述內(nèi)容，你們掌握heatmapjs怎么在vue中使用的方法了嗎？如果還想學到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！