Vue中使用高德地图历史轨迹回放（三）-中途加速不回到开始位置

Vue中使用高德地图历史轨迹回放-中途加速不回到开始位置

思路：要想轨迹运动途中点击加速还得不回到原来位置，说明点击加速之后运动轨迹的数组lineArr里面的坐标数量变了=>而且变了之后还得把原来运动过的轨迹画成和之前运动过的轨迹同样的颜色，而后续未运动的点继续照着原来的方法执行=>在继续加速的时候你还得这么做同样的事情。这样就找到一个关键的地方，找到你点击加速时车子运动到的哪个坐标点的位置。

首先：

看一下要用到的参数有那些

      data里面的数据
      marker: {
   },
      map: {
   },
      firstArr: [116.478935, 39.997761],
      polyline: {
   }, //最原始
      passedPolyline: {
   }, //最原始
      newPolyline: {
   }, //速度改变后新轨迹
      newPassedPolyline: {
   }, //速度改变后的新轨迹
      markerSpeed: 200, //运动速度
      speedCount: 1, //速度计数
      havePassedLine: [], //已经运动的点
      NoPassedLine: [], //未运动的点

其次：(关键)

关键的一步在绘制轨迹的时候里面的this.marker.on(“moving”，e=>{})方法

initroad() {
   
      // 绘制轨迹
      this.polyline = new AMap.Polyline({
   
        map: this.map,
        path: this.lineArr,
        showDir: true,
        strokeColor: "#28F", //线颜色
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6 //线宽
        // strokeStyle: "solid"  //线样式
      });
      //绘制路过了的轨迹
      var passedPolyline = new AMap.Polyline({
   
        map: this.map,
        strokeColor: "#AF5", //线颜色
        //path: this.lineArr,
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6 //线宽
        // strokeStyle: "solid"  //线样式
      });
      this.marker.on("moving", e => {
   
        //获取已经经过点的长度
        this.passedLineLength = e.