vue中使用百度地图轨迹动画

这是我参与11月更文挑战的第10天，活动详情查看：2021最后一次更文挑战

不知不觉已经是第11天更文了，加油哟

本篇文章主要讲述, 如何在vue项目中集成百度地图

1.首先找到你项目底下的index.html入口文件,这个根据不同的版本,所以存在的位置是不同的,具体如下:

a.路径如下: 项目名/public/index.html

b.路径如下: 项目名/index.html

找到index文件后,导入百度地图:
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>

2.接着到你想要使用地图的页面中,写地图的容器,代码如下:

<template>
  <div class="patrol_area">
    <div id="allmap" style="height:600px;"></div>
  </div>
</template>

注意容器的id,以及要给容器设置固定的高度,否则地图出不来

3.接着导入script模块的代码,具体如下:

<script>
export default {
  name: 'Dashboard',
  data(){
    return {
    }
  },
  mounted(){
    this.createMpa()
  },
  methods:{
    createMpa(){
         // GL版命名空间为BMapGL
        // 按住鼠标右键，修改倾斜角和角度
	     var map = new BMapGL.Map("allmap");    // 创建Map实例
	    map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
     }
  }
}
</script>

注意此处的代码需要在组件挂在完成之后再创建地图, 注意vue的生命周期

这个时候运行你的代码,地图就引入成功了

接着继续说说如何在vue项目中使用轨迹动画

在项目开发过程中,比如你需要实时的观察一个人的行走路线,行走过程. 这个时候我们就需要在地图上使用轨迹动画了,根据不同的坐标点来设置人物或者车辆的行走轨迹.

具体代码如下:

<template>
  <div class="patrol_area">
    <div id="allmap" style="height:600px;margin-top:5px;"></div>
  </div>
</template>
 
<script>
import { mapGetters } from 'vuex'
export default {
  name: 'Dashboard',
  data(){
    return {
      path : [{
        'lng': 121.814224,
        'lat': 31.156484
        }, {
          'lng': 121.808547,
          'lat': 31.165754
        }, {
          'lng': 121.796186,
          'lat': 31.184848
        }, {
          'lng': 121.788353,
          'lat': 31.192015
        }, {
          'lng': 121.771752,
          'lat': 31.194734
        },
        {
          'lng':  121.74969,
          'lat': 31.189791
        },
        {
          'lng': 121.754217,
          'lat': 31.179658
        }, {
          'lng': 121.757523,
          'lat': 31.167794
        }],
        maps:'',
        pls:''
 
    }
  },
  mounted(){
    this.pathStart()
   
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  methods:{
   
    // 创建地图实例,并给设置移动路径
      pathStart(){
          // GL版命名空间为BMapGL
      // 按住鼠标右键，修改倾斜角和角度
        var map = new BMapGL.Map("allmap");    // 创建Map实例
        map.centerAndZoom(new BMapGL.Point(121.814224,31.156484), 17);  // 初始化地图,设置中心点坐标和地图级别
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
  
          var point = [];
          for (var i = 0; i < this.path.length; i++) {
              point.push(new BMapGL.Point(this.path[i].lng, this.path[i].lat));
          }
        var pl = new BMapGL.Polyline(point);
        
        this.maps = map
        this.pls = pl
        setTimeout(this.start, 3000);
   
         map.setHeading(64.5);
         map.setTilt(73);
      },
      // 创建个轨迹动画对象，并配置参数
      start (){
        var trackAni = new BMapGLLib.TrackAnimation(this.maps, this.pls, {
              overallView: true,
              tilt: 30,
              duration: 20000,
              delay: 300
          });
          trackAni.start();
      }
      
  }
}
</script>
 
<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>

因为百度api中的方法是是不适用于vue项目的,所以我将其进行了改动, maps和pls是用来存储map对象和pl对象的,因为在我们的start中也是要用到的. 刚开始,我是使用了参数进行传值,就是setTimeout(this.start(map,pl), 3000);.可是如果这样写,start方法则会立刻执行,那我们设置的setTimeout也就无用了.所以换了现在的方法.path是一个个位置点

这个就是地图中的轨迹动画

欢迎指正, 希望对您有所帮助,欢迎探讨

一直学习,一直踩坑中

vue中使用 百度地图 轨迹动画

vue中使用百度地图轨迹动画