脚本宝典收集整理的这篇文章主要介绍了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（结合百度地图）全部内容，希望文章能够帮你解决vue中使用heatmapjs（结合百度地图）所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。