欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-10-24 08:15:11
业务需求:将heatmap引入页面中,做成一个可引入的框架,使用于所有页面。代码如下。 ...

业务需求:将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在  获取。

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);
    });
  },
}

效果图:

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

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