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

网页热力图 heatmap js的更多相关文章

  1. 热力图heatmap.js使用中的思路解析

    官网: https://www.patrick-wied.at/static/heatmapjs/ 需求:使用heatmap.js制作热力图,反映人群分布情况 问题:热力图需要的数据:坐标 + 人数 ...

  2. 热力图实现-heatmap.js 代码示例

    Heatmap.js  – 最强大的 Web 动态热图 最新公司项目需要用到热力图,在百度上搜下,了解到heatmap.js这款神器.然后搜了下例子,却很难搜到马上出效果的例子,特此写一篇heatma ...

  3. 热力图 vue 项目中使用热力图插件 “heatmap.js”（保姆式教程）

    我现在写的这项目是用CDN引入 heatmap.js, 可根据自己项目情况使用哪种方式引入插件. 官网地址 "https://www.patrick-wied.at/static/heatm ...

  4. Heatmap.js v2.0 – 最强大的 Web 动态热图

    Heatmap 是用来呈现一定区域内的统计度量,最常见的网站访问热力图就是以特殊高亮的形式显示访客热衷的页面区域和访客所在的地理区域的图示.Heatmap.js 这个 JavaScript 库可以实现 ...

  5. 【JS】heatmap.js v1.0 到 v2.0，详细总结一下:)

    前段时间,项目要开发热力图插件,研究了heatmap.js,打算好好总结一下. 本文主要有以下几部分内容: 部分源码理解 如何迁移到v2.0 v2.0官方文档译文 关于heatmap.js介绍,请看这 ...

  6. 向网页中写入js和css

    向网页中写入js和css 本函数由前辈所写 loadFile: function (url, ftype) { var fileref; if (ftype == "js") { ...

  7. 手机端网页返回顶部js代码

    <!DOCTYPE html>  <html>  <head>  <meta http-equiv="Content-Type" cont ...

  8. 热力图heatmap使用

    参考:https://www.cnblogs.com/julinhuitianxia/p/7755246.html 1.首先到echarts官网下载应用实例:http://echarts.baidu. ...

  9. 网页上的JS call Unity3d里的function——SendMessage

    注意: sendmessage只可以从网页发信息到unity游戏里,但是没有返回值 只可以发布三种类型的data,不可以其他复杂的强类型 发信息的时不会做编译检测 SendMessage Workfl ...

随机推荐

  1. 破解ckfinder2.3 去除版本号和标题提示

    1.找到ckfinder.js 2.找到这样的字符串 <h4 class='message_content'></h4> 3.改成这样 <h4 style='displa ...

  2. java7新特性 java8新特性

    Java 7 的7个新特性 Java7语法新特性 JAVA8 十大新特性详解 http://www.jb51.net/article/48304.htm

  3. 50. Pow(x, n) （编程技巧）

    Implement pow(x, n). double sum = 1; if (n > 0) { while ((n--) > 0) sum *= x; return sum; } el ...

  4. NoCache

    <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> <META HTTP-EQUIV="Ca ...

  5. Qt下QWizard改变next,back等默认按钮的大小及背景

    默认的按钮又小又丑,想改大点漂亮点. 百度没百出来,最后用google 在这里: http://stackoverflow.com/questions/16425575/change-qwizard- ...

  6. SQL必知必会笔记2

    15. 插入数据 1). 数据插入 INSERT 用来将行插入到数据库表中,插入的方式有几种: (1)插入完整的行: INSERT INTO Customers VALUES( '1000000006 ...

  7. 使用Flex4的PopUpManager的addPopUp() 方法弹出 removeChild异常的解决办法

    Flex4中,弹出窗口有两种: Alert.show("balabalabala-");   PopUpManager.addPopUp([要弹出的控件],[父控件],[是否模态] ...

  8. OSGI.NET 学习笔记--架构篇

    关于osgi.net ,想必大家也听说过,以下是自己在学习osgi.net 过程中整理出来的内容,供大家学习参与使用. 1.  UIOSP 开放工厂框架架构 开放工厂所有插件基于OSGi.NET面向服 ...

  9. 非常不错的IT进阶站点

    1:CSDN http://www.csdn.net/ 2:Iteye http://www.iteye.com 3:拼吾爱 http://pin5i.com 4:月光博客 http://www.wi ...

  10. dev中如何对combox下拉框设置可消除属性以及ASPxGridView中金额，数量的显示，以及总计、grid中某行值

    下拉框属性关键:IncrementalFilteringMode="StartsWith" DropDownStyle="DropDown" ASPxGridV ...