heatmapjs怎么在vue中使用?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
代码如下。
<!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" > <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 }); }; <!--鼠标点击--> 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); }); }, }
效果图:
看完上述内容,你们掌握heatmapjs怎么在vue中使用的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!
本文标题:heatmapjs怎么在vue中使用-创新互联
网页路径:https://www.cdcxhl.com/article30/gsopo.html
成都网站建设公司_创新互联,为您提供网站改版、网页设计公司、营销型网站建设、域名注册、外贸建站、微信小程序
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联