vue中使用heatmapjs的示例代碼（結合百度地圖）

2019-11-19 13:01:20

字體：大中小

來源：轉載

供稿：網友

業務需求：將heatmap引入頁面中，做成一個可引入的框架，使用于所有頁面。代碼如下。

<!DOCTYPE html><html><head>  <meta charset="UTF-8">  <title></title>  <style>    .heatmap {      width:1900px; height:1900px;    }  </style>  <script src="js/heatmap.min.js"></script>  <script src="js/jquery.js"></script></head><body><input id=xxx type=hidden value=""> <input id=yyy type=hidden value=""><input id="array" type="button" value="點擊查看數組內容" onclick="getindex()"/><div class="demo-wrapper">  <div class="heatmap" style="position: relative;">    <div><img src="image/1.jpg" ></div>   </div></div></body> <script src="js/heatmap.min.js"></script><script>  <!--heapmap熱力圖-->  var heatmapInstance = h337.create({    container: document.querySelector('.heatmap'),    radius: 50  });  document.querySelector('.demo-wrapper').onmousemove = function(ev) {    heatmapInstance.addData({      x: ev.layerX,      y: ev.layerY,      value: 1    });  };   <!--鼠標點擊-->  var pointx = new Array();  var pointy = new Array();  var i = 0;//數組下標  function mouseMove(ev) {    Ev = ev || window.event;    var mousePos = mouseCoords(ev);    document.getElementById("xxx").value = mousePos.x;    pointx[i] = document.getElementById("xxx").value ;//x坐標值寫入數組    console.log("x:"+document.getElementById("xxx").value);    document.getElementById("yyy").value = mousePos.y;    pointy[i] = document.getElementById("yyy").value;//y坐標值寫入數組    console.log("y:"+document.getElementById("yyy").value);    //  執行完之后數組下標加一    i++;    console.log(i);//打印下標  }  function mouseCoords(ev) {    if (ev.pageX || ev.pageY) {      return {x: ev.pageX, y: ev.pageY};    }    return {      x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,      y: ev.clientY + document.body.scrollTop - document.body.clientTop    };  }  document.onmousemove = mouseMove;   $(function(){    var s ="";    s += window.screen.height+"*"+window.screen.width;    console.log("當前屏幕分辨率是："+s);    <!--動態改變div寬高-->    $(".heatmap").width($("body").width());    $(".heatmap").height($("body").height());  });</script></html>

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

vue中使用heatmapjs

百度地圖怎么使用就不說了，主要講講這個heatmap,直接貼代碼了，注釋挺詳細的

 //vue組件中data(){  return{    heatmapOverlay:""  }},mounted() {  //引用heatmap.js  //你也可以在index.html中直接插個 <script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>  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);    });  },}

效果圖：