网页热力图 heatmap js
HBuilder +js 实现网页热力图
废话不多说，上代码
1 DOCTYPE html> 2 <html> 3 <head> 4 <title>111title> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta charset="utf-8" /> 7 <link rel="stylesheet" href="css/commons.css" /> 8 <link rel="stylesheet" href="css/landingpage.css" /> 9 head> 10 <body> 11 12 <div id="out">div> 13 <section class="example"> 14 <h2>A Quick Exampleh2> 15 With only a few lines of code you can create your own interactive web heatmap:<br style="clear:both" /> 16 <div class="example-1">heatmap div> 17 18 19 section> 20 21 <script src="js/heatmap.min.js">script> 22 <script> 23 24 var writer = document.getElementById("out"); 25 26 function geoFindMe() { 27 var output = document.getElementById("out"); 28 29 if (!navigator.geolocation){ 30 output.innerHTML = "您的浏览器不支持地理位置
"; 31 return; 32 } 33 34 function success(position) { 35 var latitude = position.coords.latitude; 36 var longitude = position.coords.longitude; 37 38 output.innerHTML = ''; 39 40 var img = new Image(); 41 img.src = "http://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=300x300&sensor=false"; 42 43 output.appendChild(img); 44 }; 45 46 function error() { 47 output.innerHTML = "无法获取您的位置"; 48 }; 49 50 output.innerHTML = "
' + latitude + '°
Longitude is ' + longitude + '°Locating…
"; 51 52 navigator.geolocation.getCurrentPosition(success, error); 53 } 54 script> 55 56 57 <script> 58 // @TODO: 59 // clean up. 60 window.onload = function() { 61 62 geoFindMe(); 63 var ex1el = document.querySelector('.example-1'); 64 65 var heatmap3 = h337.create({ 66 container: ex1el 67 }); 68 69 var refreshHeatmap1 = function() { 70 var data1 = {}; 71 var datap1 = []; 72 var max1 = 0; 73 var w = 1024; 74 var h = 1024; 75 var l = 50; 76 while(l--) { 77 var val = Math.random()*10; 78 max1 = Math.max(max1, val); 79 var d = { 80 x: Math.floor(Math.random()*w), 81 y: Math.floor(Math.random()*h), 82 value: val 83 }; 84 datap1.push(d); 85 } 86 data1["max"] = max1; 87 data1["data"] = datap1; 88 89 heatmap3.setData(data1); 90 }; 91 refreshHeatmap1(); 92 93 ex1el.onclick = function() { 94 refreshHeatmap1(); 95 }; 96 }; 97 script> 98 <div >div> 99 body> 100 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
* Dual licensed under MIT and Beerware license
*
* :: 2014-08-05 01:42
*/