vue中使用heatmapjs的示例代码(结合百度地图)


Posted in Javascript onSeptember 05, 2018

业务需求:将heatmap引入页面中,做成一个可引入的框架,使用于所有页面。代码如下。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    .heatmap {
      width:1900px; height:1900px;
    }
  </style>
  <script src="js/heatmap.min.js"></script>
  <script src="js/jquery.js"></script>
</head>
<body>
<input id=xxx type=hidden value="">
 
<input id=yyy type=hidden value="">
<input id="array" type="button" value="点击查看数组内容" onclick="getindex()"/>
<div class="demo-wrapper">
  <div class="heatmap" style="position: relative;">
    <div><img src="image/1.jpg" ></div>
   </div>
</div>
</body>
 
<script src="js/heatmap.min.js"></script>
<script>
  <!--heapmap热力图-->
  var heatmapInstance = h337.create({
    container: document.querySelector('.heatmap'),
    radius: 50
  });
  document.querySelector('.demo-wrapper').onmousemove = function(ev) {
    heatmapInstance.addData({
      x: ev.layerX,
      y: ev.layerY,
      value: 1
    });
  };
 
  <!--鼠标点击-->
  var pointx = new Array();
  var pointy = new Array();
  var i = 0;//数组下标
  function mouseMove(ev) {
    Ev = ev || window.event;
    var mousePos = mouseCoords(ev);
    document.getElementById("xxx").value = mousePos.x;
    pointx[i] = document.getElementById("xxx").value ;//x坐标值写入数组
    console.log("x:"+document.getElementById("xxx").value);
    document.getElementById("yyy").value = mousePos.y;
    pointy[i] = document.getElementById("yyy").value;//y坐标值写入数组
    console.log("y:"+document.getElementById("yyy").value);
    //  执行完之后数组下标加一
    i++;
    console.log(i);//打印下标
  }
  function mouseCoords(ev) {
    if (ev.pageX || ev.pageY) {
      return {x: ev.pageX, y: ev.pageY};
    }
    return {
      x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,
      y: ev.clientY + document.body.scrollTop - document.body.clientTop
    };
  }
  document.onmousemove = mouseMove;
 
  $(function(){
    var s ="";
    s += window.screen.height+"*"+window.screen.width;
    console.log("当前屏幕分辨率是:"+s);
    <!--动态改变div宽高-->
    $(".heatmap").width($("body").width());
    $(".heatmap").height($("body").height());
  });
</script>
</html>

需要引入的js在https://github.com/pa7/heatmap.js  获取。

vue中使用heatmapjs

百度地图怎么使用就不说了,主要讲讲这个heatmap,直接贴代码了,注释挺详细的

//vue组件中
data(){
  return{
    heatmapOverlay:""
  }
},
mounted() {
  //引用heatmap.js
  //你也可以在index.html中直接插个 <script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>

  let script = document.createElement("script");
  script.type = "text/javascript";
  script.src =
   "http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js";
  document.body.appendChild(script);  
  
  //创建地图,这个写自己的创建地图方法,请确认你的地图能加载出来
  this.creatMap();
  
  //一定要先让地图加载出来才加载热力图,我这里做演示直接写个setTimeout了
  setTimeout(()=>{this.getHeatmap()},2000)
 },
methods:{
  getHeatmap() {
    //请求雷达数据,雷达数据需要lng,lat,count 三种数据
   this.$http
    .get("../../../static/radar20.json")
    .then(res => {
     if (res.data.code == "success") {
      console.log("获取radar成功");
      var bigdata = res.data.data;
       
       //关键是下面的三行
       //其中map是new BMap.Map()创建的地图实例,其他的热力图属性(radius,opacity这种)可以在百度地图接口实例中调试体验,http://lbsyun.baidu.com/jsdemo.htm#c1_15
      this.heatmapOverlay = new BMapLib.HeatmapOverlay({ radius: 40,opacity:0.4});
      map.addOverlay(this.heatmapOverlay);
      this.heatmapOverlay.setDataSet({ data: bigdata, max: 20 });
       
     } else {
      console.log("err");
     }
    })
    .catch(err => {
     console.log(err);
    });
  },
}

效果图:

vue中使用heatmapjs的示例代码(结合百度地图)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
随机显示经典句子或诗歌的javascript脚本
Aug 04 Javascript
jQuery的初始化与对象构建之浅析
Apr 12 Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
Sep 28 Javascript
Javascript this 的一些学习总结
Aug 31 Javascript
javascript:history.go()和History.back()的区别及应用
Nov 25 Javascript
一个jquery实现的不错的多行文字图片滚动效果
Sep 28 Javascript
jquery常用的12个小功能
Jul 22 Javascript
js实现自动轮换选项卡
Jan 13 Javascript
MUI 上拉刷新/下拉加载功能实例代码
Apr 13 Javascript
详解用vue.js和laravel实现微信支付
Jun 23 Javascript
vue环形进度条组件实例应用
Oct 10 Javascript
JavaScript实现通讯录功能
Dec 27 Javascript
解决vue点击控制单个样式的问题
Sep 05 #Javascript
浅谈webpack4.x 入门(一篇足矣)
Sep 05 #Javascript
vuejs点击class变化的实例
Sep 05 #Javascript
jQuery滑动效果实现方法分析
Sep 05 #jQuery
vue+springboot实现项目的CORS跨域请求
Sep 05 #Javascript
jquery判断滚动条距离顶部的距离方法
Sep 05 #jQuery
jQuery实现基本淡入淡出效果的方法详解
Sep 05 #jQuery
You might like
php gd2 上传图片/文字水印/图片水印/等比例缩略图/实现代码
2010/05/15 PHP
php中的注释、变量、数组、常量、函数应用介绍
2012/11/16 PHP
PHP实现简单的模板引擎功能示例
2017/09/02 PHP
JS连接SQL数据库与ACCESS数据库的方法实例
2013/11/21 Javascript
Javascript中的五种数据类型详解
2014/12/26 Javascript
纯JavaScript代码实现移动设备绘图解锁
2015/10/16 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
2016/12/27 Javascript
js实现3D图片环展示效果
2017/03/09 Javascript
利用纯JS实现像素逐渐显示的方法示例
2017/08/14 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
2017/09/07 Javascript
Vue v2.5 调整和更新不完全问题
2017/10/24 Javascript
angular4 JavaScript内存溢出问题
2018/03/06 Javascript
详解Vue.js项目API、Router配置拆分实践
2018/03/16 Javascript
解决Layui数据表格中checkbox位置不居中的方法
2018/08/15 Javascript
vue form 表单提交后刷新页面的方法
2018/09/04 Javascript
nodejs实现聊天机器人功能
2019/09/19 NodeJs
JavaScript图片旋转效果实现方法详解
2020/06/28 Javascript
图解JS原型和原型链实现原理
2020/09/15 Javascript
vue使用video插件vue-video-player详解
2020/10/23 Javascript
总结python实现父类调用两种方法的不同
2017/01/15 Python
利用django-suit模板添加自定义的菜单、页面及设置访问权限
2018/07/13 Python
Python3爬虫爬取百姓网列表并保存为json功能示例【基于request、lxml和json模块】
2018/12/05 Python
Python常见的pandas用法demo示例
2019/03/16 Python
Windows下pycharm创建Django 项目(虚拟环境)过程解析
2019/09/16 Python
如何利用Python写个坦克大战
2020/11/18 Python
基于Django集成CAS实现流程详解
2020/11/28 Python
css3动画事件—webkitAnimationEnd与计时器time事件
2013/01/31 HTML / CSS
CSS代码检查工具stylelint的使用方法详解
2021/03/27 HTML / CSS
董事长职责范文
2013/11/08 职场文书
人事主管岗位职责范本
2013/12/04 职场文书
2014乡镇机关党员个人对照检查材料思想汇报
2014/10/09 职场文书
民主生活会发言材料
2014/10/20 职场文书
检查机关领导群众路线教育实践活动个人整改措施
2014/10/28 职场文书
自荐信格式范文
2015/03/04 职场文书
2015夏季作息时间调整通知
2015/04/24 职场文书
php远程请求CURL案例(爬虫、保存登录状态)
2021/04/01 PHP