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. [Java] 过滤文件夹

    package test.file; import java.io.File; import java.io.FileFilter; /** * 过滤文件夹 * @author Frost.Yen * ...

  2. Eclipse Android HH and theme

    一. 汉化方法: 1.Eclipse版本查询:安装目录readme,查版本号;参照查代号如下表: 代号 平台版本 项目 主要版本发行日期 SR1发行日期 SR2发行日期 N/A 3.0 [1] N/A ...

  3. python中的enumerate函数

    enumerate 函数用于遍历序列中的元素以及它们的下标: >>> for i,j in enumerate(('a','b','c')): print i,j 0 a1 b2 c ...

  4. 【原】dnsmasq小工具

    1.介绍 DNSmasq是一个轻巧的,容易使用的DNS服务工具,它可以应用在内部网和Internet连接的时候的IP地址NAT转换,也可以用做小型网络的DNS服务. 它可以提供如下几个实用的功能: 1 ...

  5. 十步让 WebForm项目 变为 Mvc项目

    1.创建一个项目名为 App_Asp 的 Asp.NET 空 Web 应用程序2.添加全局应用程序类 Global.asax3.富文本打开 Global,修改 Inherits 为 App_Asp_G ...

  6. ASP.Net软件工程师基础（四）

    1.接口 (1)接口是一种规范.协议,定义了一组具有各种功能的方法(属性.索引器本质是方法). (2)接口存在的意义:多态.多态的意义:程序可扩展性. (3)接口解决了类的多继承的问题. (4)接口解 ...

  7. 菜鸟-手把手教你把Acegi应用到实际项目中(1.2)

    7) daoAuthenticationProvider 进行简单的基于数据库的身份验证.DaoAuthenticationProvider获取数据库中的账号密码并进行匹配,若成功则在通过用户身份的同 ...

  8. jdk的反射机制

    反射的作用 1)在运行时判断任意一个对象所属的类: 2)在运行时构造任意一个类的对象: 3)在运行时判断任意一个类所具有的成员变量和方法: 4)在运行时调用任意一个对象的方法. 5)反射API可以获取 ...

  9. PL/0与Pascal-S编译器程序详细注释

    学校编译课的作业之一,要求阅读两个较为简单的编译器的代码并做注释, 个人感觉是一次挺有意义的锻炼, 将自己的心得分享出来与一同在进步的同学们分享. 今后有时间再做进一步的更新和总结,其中可能有不少错误 ...

  10. Java基本概念（未完）

    仅简单总结~辅助快速回忆~ 一.JVM 1,Java类加载机制 Java程序由多个类文件组成,按需加载. Java的动态扩展是由运行期动态加载和动态链接实现的.——动态绑定,多态. 加载步骤: 1)装 ...