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. [ActionScript 3.0] AS3.0 Loader加载子swf时是否需要指定新的应用程序域ApplicationDomain

    实际应用中, Loader加载子swf时是否需要指定新的应用程序域ApplicationDomain,需要择情况而定. 1.如果在本地将项目位置添加到flashplayer受信任位置(上一篇文章所述) ...

  2. ubuntu实用技巧

    添加alias ~/.bash_alias文件: alias go="python /Users/xhat/Downloads/goagent/local/proxy.py" ~/ ...

  3. EF连接mysql数据库生成实体模型

    声明:本人也是第一次用EF连接mysql生成实体模型 经过试验: mysql-connector-net-6.6.6 可以支持VS2012 mysql-connector-net-6.3.9 可以支持 ...

  4. Microsoft Office 2007的ContentType

    当从浏览器返回一个文件时,需要指定ContentType,以下是Office2007对应的值: "application/vnd.openxmlformats-officedocument. ...

  5. css margin-top设置html元素之间的距离

    css margin-top属性设置的是一个元素的顶端与另一个元素之间的距离.这个距离称为上外边距,本文章向大家介绍css margin-top属性的用法和实例,需要的朋友可以参考一下. css ma ...

  6. DFS与BFS

    顾名思义,DFS就是一直在一个方向搜索,当这一方向不可以时退回该点,换下一方向: 而BFS一开始就是向四面八方搜索,把符合条件的点存入队列中,当前一个点都搜索完毕时,再从队列顶中取出点,再向四面八方搜 ...

  7. 【翻译习作】 Windows Workflow Foundation程序开发-第一章03

    1.2.2.Visual Studio 2005扩展包 微软也为Windows Workflow开发者提供了Visual Studio 2005扩展包.扩展包将许多功能集成到Visual Studio ...

  8. redis错误总结

    1.同步错误.不停重试一直不成功 Full resync from master: e51165e2868c541e28134a287f9bfe36372bae34:80575961684 MASTE ...

  9. 学习记录 java session保存用户登录

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  10. 学习总结 html 表格标签的使用

    表格: <table></table>表格 width:宽度.可以用像素或百分比表示. 常用960像素. border:边框,常用值为0. cellpadding:内容跟边框的 ...