heatmapjs怎么在vue中使用-创新互联
heatmapjs怎么在vue中使用?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
我们注重客户提出的每个要求,我们充分考虑每一个细节,我们积极的做好成都网站设计、网站建设、外贸网站建设服务,我们努力开拓更好的视野,通过不懈的努力,创新互联赢得了业内的良好声誉,这一切,也不断的激励着我们更好的服务客户。 主要业务:网站建设,网站制作,网站设计,微信平台小程序开发,网站开发,技术开发实力,DIV+CSS,PHP及ASP,ASP.Net,SQL数据库的技术开发工程师。代码如下。
需要引入的js在https://github.com/pa7/heatmap.js 获取。
vue中使用heatmapjs
百度地图怎么使用就不说了,主要讲讲这个heatmap,直接贴代码了,注释挺详细的
//vue组件中 data(){ return{ heatmapOverlay:"" } }, mounted() { //引用heatmap.js //你也可以在index.html中直接插个 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); }); }, }
效果图:
看完上述内容,你们掌握heatmapjs怎么在vue中使用的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!
本文标题:heatmapjs怎么在vue中使用-创新互联
文章起源:http://myzitong.com/article/gsopo.html