溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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中使用的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
