vue整合百度地图BMapGL

最新推荐文章于 2024-10-14 17:26:33 发布

Y小凤

最新推荐文章于 2024-10-14 17:26:33 发布

阅读量2.6k

点赞数 1

分类专栏：笔记文章标签： vue

本文链接：https://blog.csdn.net/weixin_44906807/article/details/123794013

版权

笔记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

现在index.html中添加script

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.0&type=webgl&ak=你的ak"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/TrackAnimation/src/TrackAnimation_min.js"></script>

钩子函数来调init（），切记生命周期，元素的class应写为ref
script里的函数调用，我是写了一个按钮来出发路径动画的start（）

<script>
export default {
  name: "home",
  data(){
    return {
      map,
      pl
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      // GL版命名空间为BMapGL
      // 按住鼠标右键，修改倾斜角和角度
      var bmap = new BMapGL.Map(this.$refs.allmap);    // 创建Map实例
      bmap.centerAndZoom(new BMapGL.Point(116.297611, 40.047363), 17);  // 初始化地图,设置中心点坐标和地图级别
      bmap.enableScrollWheelZoom(true);     // 开启鼠标滚轮缩放
      var path = [{
        'lng': 116.297611,
        'lat': 40.047363
      }, {
        'lng': 116.302839,
        'lat': 40.048219
      }, {
        'lng': 116.308301,
        'lat': 40.050566
      }, {
        'lng': 116.305732,
        'lat': 40.054957
      }, {
        'lng': 116.304754,
        'lat': 40.057953
      }, {
        'lng': 116.306487,
        'lat': 40.058312
      }, {
        'lng': 116.307223,
        'lat': 40.056379
      }];
      var point = [];
      for (var i = 0; i < path.length; i++) {
        point.push(new BMapGL.Point(path[i].lng, path[i].lat));
      }
      this.pl = new BMapGL.Polyline(point);
      setTimeout('start()', 3000);
      this.map = bmap
    },
    start () {
    let trackAni = new BMapGLLib.TrackAnimation(this.map, this.pl, {
    overallView: true,
    tilt: 30,
    duration: 20000,
    delay: 300
  });
  trackAni.start();
}
  }
}
</script>