Vue中使用高德地图实现多人实时轨迹

Vue中使用高德地图实现多人实时轨迹

思路: 多人实时的思路和单人实时的思路差不多，都是通过不断的向后台请求，进行点标记添加与清除。

首先

引入与配置高德地图可参考本人之前写得博客：https://blog.csdn.net/jinglianglove/article/details/102483714

接下来

直接看代码把 关键就是 this.markers.push(this.marker);

data中的数据

data() {
    return {
      h3tit: "人员轨迹",
      timer: null,
      manyTime:null,
      markerSpeed: 200,
      speedCount: 1,
      pName:'---',
      lineArr: [
        [116.478935, 39.997761],
        [116.478939, 39.997825],
        [116.478912, 39.998549],
        [116.478912, 39.998549],
        [116.478998, 39.998555],
        [116.478998, 39.998555],
        [116.479282, 39.99856],
        [116.479658, 39.998528],
        [116.480151, 39.998453],
        [116.480784, 39.998302],
        [116.480784, 39.998302],
        [116.481149, 39.998184],
        [116.481573, 39.997997],
        [116.481863, 39.997846],
        [116.482072, 39.997718],
        [116.482362, 39.997718],
        [116.483633, 39.998935],
        [116.48367, 39.998968],
        [116.484648, 39.999861]
      ],
      marker: {},
      map: {},
      markers:[],//点的集合  用来清除点标记
      firstArr: [120.11296645567579, 30.290059843858472],
      polyline: {},
      passedPolyline: {},
      flag: false, //轨迹回放操作按钮的出现
      circle: {}, //圈圈
      circle1: {},
      total: 1,
      currentPage: 1,
      pageSize: 10,
      ptableData: [], //列表
      // ptableDataItem: [],
      loading: false,
      card_no: null //卡号用来区分是谁得轨迹运动
    };
  },
      

methods里面方法（关键）

//多人实时封装
    manyPersonWays(){
      if (this.manyTime) {
        clearInterval(this.manyTime);
        this.manyTime = null;
      }
      this.manyTime =setInterval(() => {
        this.removemarker()
        this.manyPersonData()
      }, 2000);
    },
//多人实时数据接口
    manyPersonData(){
      getPersonPosition([("appId"), {
          page: this.currentPage,
          rows: this.pageSize}]).then(res => {
        if(res.statusCode==200){
          if(res.result.length==1){
            return false;
          }else{
             res.result.forEach(item=>{
             this.addPositiion(item);
            })
          }
        }
      });
    },
//添加点标记
    addPositiion(data) {
      this.marker = new AMap.Marker({
        map: this.map,
        position: [Number(data.lng), Number(data.lat)],
        icon: pic,
        offset: new AMap.Pixel(0, 0),
      });
      this.marker.setTitle(`${data.person_name}`);
      this.marker.setLabel({
        offset: new AMap.Pixel(50, 0), //设置文本标注偏移量
        content: `<div class='info'>${data.person_name}</div>`, //设置文本标注内容
        direction: "top" //设置文本标注方位
      });
      this.markers.push(this.marker);
      this.map.setFitView()
    },
   
    //移出点标记 
    removemarker() {
      this.map.remove(this.markers);//清除所有点标记
      this.markers = [];
    },

###最后在切换页面的时候清除定时器