Vue中使用高德地图实现单人实时轨迹(方式二)--运动后留下运动轨迹

#Vue中使用高德地图实现单人实时轨迹(方式二)–运动后留下运动轨迹

达到效果：现在是第二种实现实时轨迹的方式，效果大概是这个人的轨迹在地图上来回划线，同时会留下运动后的轨迹。基于轨迹回放做的效果

思路：思路大概就是这个人的轨迹在地图上来回划线，两点之间不断绘制轨迹直至下一个点在此请求过来，这样不断的1-2，2-3，3-4这样运动，留下运动的轨迹。

如果你还不知道如何引入和配置高德地图请参考本人博客：https://lbs.amap.com/api/javascript-api/example/marker/replaying-historical-running-data

data中的数据

      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]
      ],
      marker: {},
      map: {},
      markers:[],//点的集合  用来清除点标记
      firstArr: [120.11296645567579, 30.290059843858472],
      polyline: {},
      passedPolyline: {},

methods中的方法：

首先 初始化地图发送请求给后端得到数据。

   //初始化地图
    initMap() {
      this.map = new AMap.Map("container", {
        resizeEnable: true,
        center: this.firstArr,
        zoom: 20
      });

      this.marker = new AMap.Marker({
        map: this.map,
        position: this.firstArr,
        icon: pic
        // offset: new AMap.Pixel(-25, 0),
        // autoRotation: true,
        // angle: 0
      });
      //覆盖物的圈圈
      this.circle = new AMap.Circle({
        center: this.firstArr,
        map: this.map,
        radius: 100,
        fillColor: "blue",
        strokeWeight: 1,
        strokeColor: "white",
        fillOpacity: 0.1
      });
      this.circle1 = new AMap.Circle({
        center: this.firstArr,
        map: this.map,
        radius: 150,
        fillColor: "blue",
        strokeWeight: 1,
        strokeColor: "white",
        fillOpacity: 0.05
      });
      // 绘制轨迹
      this.polyline = new AMap.Polyline({
        map: this.map,
        path: this.lineArr,
        showDir: true,
        strokeColor: "#28F", //线颜色
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6 //线宽
        // strokeStyle: "solid"  //线样式
      });
      // 设置鼠标划过点标记显示的文字提示
      // this.marker.setTitle("我是marker的title");

      // 设置label标签
      // label默认蓝框白底左上角显示，样式className为：amap-marker-label
      this.marker.setLabel({
        offset: new AMap.Pixel(50, 0), //设置文本标注偏移量
        content: `<div class='info'>${this.pName}</div>`, //设置文本标注内容
        direction: "top" //设置文本标注方位
      });
      var passedPolyline = new AMap.Polyline({
        map: this.map,
        strokeColor: "#AF5", //线颜色
        //path: this.lineArr,
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6 //线宽
        // strokeStyle: "solid"  //线样式
      });
      this.marker.on("moving", function(e) {
        passedPolyline.setPath(e.passedPath);
      });
      this.map.setFitView();
    },
   //实时轨迹
   currentAnimation(val) {
      this.flag = false;
      this.speedCount = 1;
      // this.marker.pauseMove();
      this.map.remove(this.marker);
      this.pName=val.person_name;
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
      (后台的请求).then(data => {
        if (data.statusCode == 200) {
          if (data.result.length > 0) {
            this.h3tit = "实时人员轨迹";
            this.lineArr = [];
            this.firstArr = [];
            data.result.forEach(item => {
              this.lineArr.push([item.lng, item.lat]);
              this.firstArr.push(data.result[0].lng, data.result[0].lat);
            });
            this.initMap();
            this.startAnimation();
            if (this.firstArr.length > 0) {
              this.timer = setInterval(() => {
                (后台的请求).then(data => {
                  if (data.statusCode == 200) {
                    this.lineArr = [];
                    data.result.forEach(item => {
                      this.lineArr.push([item.lng, item.lat]);
                    });
                    this.initroad();
                    this.startAnimation();
                  }
                });
              }, 2000);
            }
          } else {
            this.$message({
              message: "该人员没有安全帽实时数据",
              type: "warning"
            });
            this.firstArr = [120.11296645567579, 30.290059843858472];
            this.map = new AMap.Map("container", {
              resizeEnable: true,
              center: this.firstArr,
              zoom: 20
            });
            this.marker = new AMap.Marker({
              map: this.map,
              position: this.firstArr,
              icon: pic
            });
          }
        }
      });
    }

**最后：**别忘了清除定时

  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  },

效果图