HBuilder +js 实现网页热力图
废话不多说，上代码
<!DOCTYPE html>
<html>
<head>
<title>111</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<link rel="stylesheet" href="css/commons.css" />
<link rel="stylesheet" href="css/landingpage.css" />
</head>
<body> <div id="out"></div>
<section class="example">
<h2>A Quick Example</h2>
With only a few lines of code you can create your own interactive web heatmap:<br style="clear:both" />
<div class="example-1">heatmap </div> </section> <script src="js/heatmap.min.js"></script>
<script> var writer = document.getElementById("out"); function geoFindMe() {
var output = document.getElementById("out"); if (!navigator.geolocation){
output.innerHTML = "<p>您的浏览器不支持地理位置</p>";
return;
} function success(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude; output.innerHTML = '<p><Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>'; var img = new Image();
img.src = "http://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=300x300&sensor=false"; output.appendChild(img);
}; function error() {
output.innerHTML = "无法获取您的位置";
}; output.innerHTML = "<p>Locating…</p>"; navigator.geolocation.getCurrentPosition(success, error);
}
</script> <script>
// @TODO:
// clean up.
window.onload = function() { geoFindMe();
var ex1el = document.querySelector('.example-1'); var heatmap3 = h337.create({
container: ex1el
}); var refreshHeatmap1 = function() {
var data1 = {};
var datap1 = [];
var max1 = 0;
var w = 1024;
var h = 1024;
var l = 50;
while(l--) {
var val = Math.random()*10;
max1 = Math.max(max1, val);
var d = {
x: Math.floor(Math.random()*w),
y: Math.floor(Math.random()*h),
value: val
};
datap1.push(d);
}
data1["max"] = max1;
data1["data"] = datap1; heatmap3.setData(data1);
};
refreshHeatmap1(); ex1el.onclick = function() {
refreshHeatmap1();
};
};
</script>
<div ></div>
</body>
</html>
代码中用到的 heatmap.min.js 请搜索 heatmap 下载
https://www.patrick-wied.at/static/heatmapjs/
/*
* heatmap.js v2.0.0 | JavaScript Heatmap Library
*
* Copyright 2008-2014 Patrick Wied <heatmapjs@patrick-wied.at> - All rights reserved.
* Dual licensed under MIT and Beerware license
*
* :: 2014-08-05 01:42
*/