您的位置：首页 > Web前端 > JavaScript

网页热力图 heatmap js

2016-06-28 10:41 627 查看

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
*/

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航