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 相关文章推荐
键盘控制事件应用教程大全
Nov 24 Javascript
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
Mar 10 Javascript
用dom+xhtml+css制作的一个相册效果代码打包下载
Jan 24 Javascript
从盛大通行证上摘下来的身份证验证js代码
Jan 11 Javascript
jQuery动态修改字体大小的方法【测试可用】
Sep 09 Javascript
JavaScript中in和hasOwnProperty区别详解
Aug 04 Javascript
解决Angular4项目部署到服务器上刷新404的问题
Aug 31 Javascript
微信小程序之几种常见的弹框提示信息实现详解
Jul 11 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
layer弹出层取消遮罩的方法
Sep 25 Javascript
node.js爬虫框架node-crawler初体验
Oct 29 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
Nov 03 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
超级实用的7个PHP代码片段分享
2012/01/05 PHP
php+mysqli预处理技术实现添加、修改及删除多条数据的方法
2015/01/30 PHP
yii分页组件用法实例分析
2015/12/28 PHP
CodeIgniter配置之database.php用法实例分析
2016/01/20 PHP
Ajax和PHP正则表达式验证表单及验证码
2016/09/24 PHP
PHP实现十进制数字与二十六进制字母串相互转换操作示例
2018/08/10 PHP
如何取得中文输入的真实长度?
2006/06/24 Javascript
WordPress 照片lightbox效果的运用几点
2009/06/22 Javascript
jquery实现简单的无缝滚动
2015/04/15 Javascript
jquery mobile开发常见问题分析
2016/01/21 Javascript
Seajs是什么及sea.js 由来,特点以及优势
2016/10/13 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
2016/12/25 Javascript
详解微信小程序开发之城市选择器 城市切换
2017/01/17 Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
2017/12/04 Javascript
jQuery+CSS实现的table表格行列转置功能示例
2018/01/08 jQuery
JavaScript如何对图片进行黑白化
2018/04/10 Javascript
Vue.js 实现数据展示全部和收起功能
2018/09/05 Javascript
基于React Native 0.52实现轮播图效果
2020/08/25 Javascript
JS中的函数与对象的创建方式
2019/05/12 Javascript
如何用原生js写一个弹窗消息提醒插件
2019/05/24 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
2019/08/28 Javascript
小程序怎样让wx.navigateBack更好用的方法实现
2019/11/01 Javascript
微信小程序实现文件预览
2020/10/22 Javascript
简单文件操作python 修改文件指定行的方法
2013/05/15 Python
使用Python下的XSLT API进行web开发的简单教程
2015/04/15 Python
python日志记录模块实例及改进
2017/02/12 Python
python网络编程调用recv函数完整接收数据的三种方法
2017/03/31 Python
Python中eval带来的潜在风险代码分析
2017/12/11 Python
Python爬虫获取整个站点中的所有外部链接代码示例
2017/12/26 Python
python正则表达式之对号入座篇
2018/07/24 Python
钉钉群自定义机器人消息Python封装的实例
2019/02/20 Python
python 使用plt画图,去除图片四周的白边方法
2019/07/09 Python
2014年党员个人工作总结
2014/12/02 职场文书
工厂员工辞职信范文
2015/05/12 职场文书
教师网络培训心得体会
2016/01/09 职场文书
div与span之间的区别与使用介绍
2021/12/06 HTML / CSS