网页热力图 heatmap js

时间：2021-08-07 16:23:03

HBuilder +js 实现网页热力图

网页热力图 heatmap 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
*/

相关文章