地图播放轨迹

vue—等待数据请求，异步操作，等待数据画路线，画完路线异步实例lushu，实例好lushu后开始播放。在每次播放前都清除一次_marker和polyline

.catch(err => {
          console.log(err);
        })

接住，
methods中的方法

methods:{
    //播放轨迹
    playTrack(isRun, beisuValue) {
      this.beisuValue = beisuValue;
      let map = this.bmap;
      if (this.newPolyline) {
        this.newPolyline.hide();
        map.removeOverlay(this.newPolyline);
        this.newPolyline = null;
      }
      if (this.lushu) {
        map.removeOverlay(this.lushu._marker);
        this.lushu.stop();
        this.lushu = null;
      }

      if (isRun) {
        let start = parseInt(
          new Date(
            `${this.startOptions.startDate} ${this.startOptions.startHour}:${
              this.startOptions.startMinute
            }:${this.startOptions.startSecond}`
          ).getTime() / 1000
        );

        let end = parseInt(
          new Date(
            `${this.endOptions.endDate} ${this.endOptions.endHour}:${
              this.endOptions.endMinute
            }:${this.endOptions.endSecond}`
          ).getTime() / 1000
        );
        let vehicle_id = this.carDetail.vehicle_id;
        // console.log(vehicle_id);
        // console.log(start);
        // console.log(end);
        this.TbBusinessQyClwzByVIdAndTime({
          vehicle_id,
          start,
          end
          // vehicle_id: 20170652,
          // start: 1525622413,
          // end: 1525646815
        });
      }
    },
    watchplayTrack() {
      let map = this.bmap;
      // var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
      //   scale: 0.5, //图标缩放大小
      //   strokeColor: "#fff", //设置矢量图标的线填充颜色
      //   strokeWeight: "2" //设置线宽
      // });
      // let iconSequence = new BMap.IconSequence(sy, "10", "25");
      new Promise((res, rej) => {
        var pointArr = this.tracksData;
        // console.log(this.tracksData);
        if (pointArr && pointArr.length > 0) {
          let arrPois = pointArr.map(val => {
            let opo = new BMap.Point(val.longitude, val.latitude);
            return opo;
          });
          let newPolyline = new BMap.Polyline(arrPois, {
            strokeColor: "#d4237a",
            strokeWeight: "8", //折线的宽度，以像素为单位
            strokeOpacity: 0.8 //折线的透明度，取值范围0 - 1
            // icons: [iconSequence]
          });
          this.newPolyline = newPolyline;
          map.setViewport(arrPois);
          map.addOverlay(newPolyline);
          res(arrPois);
        } else {
          throw "没有数据";
        }
      })
        .then(arrPois => {
          if (arrPois && arrPois.length > 0) {
            let lushu = new BMapLib.LuShu(map, arrPois, {
              autoView: true, //是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
              icon: new BMap.Icon(
                "http://lbsyun.baidu.com/jsdemo/img/car.png",
                new BMap.Size(52, 26),
                { anchor: new BMap.Size(27, 13) }
              ),
              speed: 5000 * this.beisuValue,
              enableRotation: true, //是否设置marker随着道路的走向进行旋转
              landmarkPois: []
            });

            this.lushu = lushu;
            this.lushu.start();
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
}

watch中的代码

watch:{
    tracksData() {
      this.watchplayTrack();
    },
}

转载自：https://blog.csdn.net/weixin_42029487/article/details/81353169