HBuilder +js 实现网页热力图 废话不多说,上代码 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>111</title> 5 <meta name ...
HBuilder +js 实现网页热力图
废话不多说,上代码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>111</title> 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 Example</h2> 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='/images/loading.gif' data-original="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 = "<p>您的浏览器不支持地理位置</p>"; 31 return; 32 } 33 34 function success(position) { 35 var latitude = position.coords.latitude; 36 var longitude = position.coords.longitude; 37 38 output.innerHTML = '<p><Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>'; 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 = "<p>Locating…</p>"; 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 js
关键词:JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。