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); }); }, }
效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。