heatmapjs怎么在vue中使用-創(chuàng)新互聯(lián)

heatmapjs怎么在vue中使用？相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

我們注重客戶提出的每個(gè)要求，我們充分考慮每一個(gè)細(xì)節(jié)，我們積極的做好成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)服務(wù)，我們努力開拓更好的視野，通過不懈的努力，創(chuàng)新互聯(lián)贏得了業(yè)內(nèi)的良好聲譽(yù)，這一切，也不斷的激勵(lì)著我們更好的服務(wù)客戶。主要業(yè)務(wù)：網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)站設(shè)計(jì),微信平臺(tái)小程序開發(fā),網(wǎng)站開發(fā),技術(shù)開發(fā)實(shí)力，DIV+CSS，PHP及ASP，ASP.Net，SQL數(shù)據(jù)庫(kù)的技術(shù)開發(fā)工程師。

代碼如下。

<!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="點(diǎn)擊查看數(shù)組內(nèi)容" onclick="getindex()"/>
<div class="demo-wrapper">
  <div class="heatmap" >
    <div><img src="image/1.jpg" ></div>
   </div>
</div>
</body>
 
<script src="js/heatmap.min.js"></script>
<script>
  <!--heapmap熱力圖-->
  var heatmapInstance = h437.create({
    container: document.querySelector('.heatmap'),
    radius: 50
  });
  document.querySelector('.demo-wrapper').onmousemove = function(ev) {
    heatmapInstance.addData({
      x: ev.layerX,
      y: ev.layerY,
      value: 1
    });
  };
 
  <!--鼠標(biāo)點(diǎn)擊-->
  var pointx = new Array();
  var pointy = new Array();
  var i = 0;//數(shù)組下標(biāo)
  function mouseMove(ev) {
    Ev = ev || window.event;
    var mousePos = mouseCoords(ev);
    document.getElementById("xxx").value = mousePos.x;
    pointx[i] = document.getElementById("xxx").value ;//x坐標(biāo)值寫入數(shù)組
    console.log("x:"+document.getElementById("xxx").value);
    document.getElementById("yyy").value = mousePos.y;
    pointy[i] = document.getElementById("yyy").value;//y坐標(biāo)值寫入數(shù)組
    console.log("y:"+document.getElementById("yyy").value);
    //  執(zhí)行完之后數(shù)組下標(biāo)加一
    i++;
    console.log(i);//打印下標(biāo)
  }
  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("當(dāng)前屏幕分辨率是："+s);
    <!--動(dòng)態(tài)改變div寬高-->
    $(".heatmap").width($("body").width());
    $(".heatmap").height($("body").height());
  });
</script>
</html>

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

vue中使用heatmapjs

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

 //vue組件中
data(){
  return{
    heatmapOverlay:""
  }
},
mounted() {
  //引用heatmap.js
  //你也可以在index.html中直接插個(gè) <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);  
  
  //創(chuàng)建地圖，這個(gè)寫自己的創(chuàng)建地圖方法，請(qǐng)確認(rèn)你的地圖能加載出來
  this.creatMap();
  
  //一定要先讓地圖加載出來才加載熱力圖，我這里做演示直接寫個(gè)setTimeout了
  setTimeout(()=>{this.getHeatmap()},2000)
 },
methods:{
  getHeatmap() {
    //請(qǐng)求雷達(dá)數(shù)據(jù),雷達(dá)數(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)建的地圖實(shí)例,其他的熱力圖屬性（radius，opacity這種）可以在百度地圖接口實(shí)例中調(diào)試體驗(yàn)，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);
    });
  },
}

效果圖：

heatmapjs怎么在vue中使用

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

本文標(biāo)題：heatmapjs怎么在vue中使用-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)路徑：http://www.chinadenli.net/article30/gsopo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、網(wǎng)頁(yè)設(shè)計(jì)公司、營(yíng)銷型網(wǎng)站建設(shè)、域名注冊(cè)、外貿(mào)建站、微信小程序

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

heatmapjs怎么在vue中使用-創(chuàng)新互聯(lián)