vue中使用heatmapjs的示例代码（结合百度地图）
更新时间：2018年09月05日 14:00:36 作者：李大雷
这篇文章主要介绍了vue中使用heatmapjs的示例代码（结合百度地图），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
业务需求：将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);
});
},
}
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本篇文章主要介绍了vue keep-alive请求数据的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
在本篇文章里小编给各位分享的是关于Vue发布项目的实例内容以及知识点讲解，需要的朋友们参考下。2019-07-07
element组件el-date-picker禁用当前时分秒之前的日期时间选择
本文主要介绍了element组件el-date-picker禁用当前时分秒之前的日期时间选择，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-01-01
这篇文章主要介绍了Vue前端如何实现与后端进行数据交互，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
本文讲述了如何使用Vue.js中的ElementUI组件库实现el-menu与el-tabs的联动,通过在el-menu中选择菜单项,可以切换el-tabs的内容区域,具有一定的参考价值,感兴趣的可以了解一下2023-11-11
在商场大家经常看到停车收费倒计时支付页面,今天小编通过本文给大家分享vue 倒计时结束跳转页面功能,感兴趣的朋友一起看看吧2023-10-10
这篇文章主要介绍了Vue项目中quill-editor带样式编辑器的使用方法，可以更改插入图片和视频，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据,下面这篇文章主要给大家介绍了关于VUE跨域详解以及常用解决跨域的方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
本文主要介绍了为什么vue中不建议使用空字符串作为className，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
这篇文章主要介绍了你不知道的Vue技巧之--开发一个可以通过方法调用的组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
最新评论