1. 现在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>
  1. 钩子函数来调init(),切记生命周期,元素的class应写为ref
    在这里插入图片描述
  2. 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>
  1. 结果图
    在这里插入图片描述
    详细可以去看百度地图给的API
    https://lbs.baidu.com/index.php?title=jspopularGL/guide/trackAnimation
Logo

前往低代码交流专区

更多推荐