加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

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

发布时间:2020-12-16 23:38:39 所属栏目:百科 来源:网络整理
导读:业务需求:将heatmap引入页面中,做成一个可引入的框架,使用于所有页面。代码如下。 input id=yyy type=hidden value="" input id="array" type="button" value="点击查看数组内容" onclick="getindex()"/ div class="demo-wrapper" div class="heatmap" st

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

<input id=yyy type=hidden value="">
<input id="array" type="button" value="点击查看数组内容" onclick="getindex()"/>
<div class="demo-wrapper">
<div class="heatmap" style="position: relative;">

<script src="js/heatmap.min.js">

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

vue中使用heatmapjs

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

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);
});

},}

效果图:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读