百度地图 路书

<template>
  <div class="map-body">
      <div ref="map" class="map" style="width: 100%;min-height:600px;min-height:90vh;"></div>
      <div class="map-time">    
          <!-- <el-form ref="form" size="mini" label-width="60px">
            <el-form-item label="请选择">
                <el-date-picker
                    style='width:100%'
                    v-model="dateForm"
                      range-separator="至"
                    type="datetimerange"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change='onSearchTrip'
                >
                </el-date-picker>
            </el-form-item>
             <el-form-item>
                <el-button type="primary" @click="onSearchTrip">确定</el-button>
            </el-form-item>
          </el-form> -->
          <el-form ref="form" size="mini" :model='form' label-width="60px">
            <el-form-item label="日期">
                <el-date-picker
                  v-model="form.day"
                  type="date"
                  :picker-options={disabledDate:setvalidDate}
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="时间">
                    <el-time-picker
                      is-range
                      v-model="form.time"
                      range-separator="至"
                      start-placeholder="开始时间"
                      end-placeholder="结束时间"
                      placeholder="选择时间范围">
                    </el-time-picker>
            </el-form-item>
             <el-form-item class="btn-sure">
                <el-button type="primary" @click="onSearchTrip">确定</el-button>
            </el-form-item>
          </el-form>
    </div>
  </div>
</template>

<script>
import Api from "@/api/claims";
import moment from "moment";

const { BMap, BMapLib } = window;

export default {
  data() {
    return {
      map: null,
      interval: null,
      vcu: "",
      form:{
        day:new Date(moment(1, "HH")),//当天
        time:[new Date(moment({ hour: 0, minute: 0 ,seconds:0})), new Date(moment({ hour: 23, minute: 59 ,seconds:59}))],
      },
    };
  },
  beforeDestroy() {
    clearInterval(this.interval);
  },
  methods: {
    // init map
    init(points) {
      this.map = new BMap.Map(this.$refs.map);
      let map = this.map;
      map.enableScrollWheelZoom(true);
      let arrPois = [];
      let length = points.length >> 1;
      let lushu = null;

      let carImg = require("assets/map/riding.png");
      let startImg = require("assets/map/start.png");
      let endImg = require("assets/map/end.png");

      points.forEach(poi => {
        arrPois.push(new BMap.Point(poi.lng, poi.lat));
      });

      map.centerAndZoom();
      // 实例化一个驾车导航用来生成路线
      //  var drv = new BMap.DrivingRoute('北京', {
      //     onSearchComplete: function(res) {
      //        if (drv.getStatus() == BMAP_STATUS_SUCCESS) {
      //  var plan = res.getPlan(0);
      // var arrPois =[];
      //                for(var j=0;j<plan.getNumRoutes();j++){
      //   var route = plan.getRoute(j);
      //   arrPois= arrPois.concat(route.getPath());
      // }

      //    map.addOverlay(new BMap.Polyline(arrPois, {strokeColor: '#111'})); //不画线
      map.setViewport(arrPois);
      let marker1 = new BMap.Marker(arrPois[0], {
        icon: new BMap.Icon(startImg, new BMap.Size(64, 64), {
          imageOffset: new BMap.Size(15, 0) //图片的偏移量。为了是图片底部中心对准坐标点。
        })
      });
      let marker2 = new BMap.Marker(arrPois[points.length - 1], {
        icon: new BMap.Icon(endImg, new BMap.Size(64, 64), {
          imageOffset: new BMap.Size(15, 0) //图片的偏移量。为了是图片底部中心对准坐标点。
        })
      });
      // var label = new BMap.Label("粤A30780", { offset: new BMap.Size(0, -30) });
      // label.setStyle({
      //   border: "1px solid rgb(204, 204, 204)",
      //   color: "rgb(0, 0, 0)",
      //   borderRadius: "10px",
      //   padding: "5px",
      //   background: "rgb(255, 255, 255)"
      // });
      // marker.setLabel(label);

      map.addOverlay(marker1);
      map.addOverlay(marker2);
      BMapLib.LuShu.prototype._move = function(initPos, targetPos, effect) {
        var pointsArr = [initPos, targetPos]; //点数组
        var me = this,
          //当前的帧数
          currentCount = 0,
          //步长，米/秒
          timer = 10,
          step = this._opts.speed / (1000 / timer),
          //初始坐标
          init_pos = this._projection.lngLatToPoint(initPos),
          //获取结束点的(x,y)坐标
          target_pos = this._projection.lngLatToPoint(targetPos),
          //总的步长
          count = Math.round(me._getDistance(init_pos, target_pos) / step);
        //显示折线 syj201607191107
        this._map.addOverlay(
          new BMap.Polyline(pointsArr, {
            strokeColor: "#1729cf",
            strokeWeight: 5,
            strokeOpacity: 0.8
          })
        ); // 画线
        //如果小于1直接移动到下一点
        if (count < 1) {
          me._moveNext(++me.i);
          return;
        }
        me._intervalFlag = setInterval(function() {
          //两点之间当前帧数大于总帧数的时候，则说明已经完成移动
          if (currentCount >= count) {
            clearInterval(me._intervalFlag);
            //移动的点已经超过总的长度
            if (me.i > me._path.length) {
              return;
            }
            //运行下一个点
            me._moveNext(++me.i);
          } else {
            currentCount++;
            var x = effect(init_pos.x, target_pos.x, currentCount, count),
              y = effect(init_pos.y, target_pos.y, currentCount, count),
              pos = me._projection.pointToLngLat(new BMap.Pixel(x, y));
            //设置marker
            if (currentCount == 1) {
              var proPos = null;
              if (me.i - 1 >= 0) {
                proPos = me._path[me.i - 1];
              }
              if (me._opts.enableRotation == true) {
                me.setRotation(proPos, initPos, targetPos);
              }
              if (me._opts.autoView) {
                if (!me._map.getBounds().containsPoint(pos)) {
                  me._map.setCenter(pos);
                }
              }
            }
            //正在移动
            me._marker.setPosition(pos);
            //设置自定义overlay的位置
            // me._setInfoWin(pos);
          }
        }, timer);
      };
      this.drawLine(arrPois)
      lushu = new BMapLib.LuShu(map, arrPois, {
        autoView: true, //是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
        icon: new BMap.Icon(carImg, new BMap.Size(64, 64), {
          imageOffset: new BMap.Size(0, 5) //图片的偏移量。为了是图片底部中心对准坐标点。
        }),
        speed: 1500,
        enableRotation: true //是否设置marker随着道路的走向进行旋转
      });

        lushu.start();
  
      /* 
      let myP1 = arrPois[0]; //起点
      let myP2 = arrPois[points.length - 1]; //终点
      let carImg = require('assets/map/riding.png');
      let myIcon = new BMap.Icon(
         carImg,
        new BMap.Size(32, 70),
        {
            //小车图片
          // offset: new BMap.Size(0, -5),    //相当于CSS精灵
          imageOffset: new BMap.Size(0, 15) //图片的偏移量。为了是图片底部中心对准坐标点。
        }
      );
      var driving2 = new BMap.WalkingRoute(map, {
        renderOptions: { map: map, autoViewport: true }
      }); //驾车实例
      driving2.search(myP1, myP2); //显示一条公交线路
   
      window.run = function() {
          console.log(33333)
        var driving = new BMap.WalkingRoute(map); //驾车实例
        driving.search(myP1, myP2);
        driving.setSearchCompleteCallback(function() {
          var pts = driving
            .getResults()
            .getPlan(0)
            .getRoute(0)
            .getPath(); //通过驾车实例，获得一系列点的数组
          var paths = pts.length; //获得有几个点

          var carMk = new BMap.Marker(pts[0], { icon: myIcon });
          map.addOverlay(carMk);
          let i = 0;
          function resetMkPoint(i) {
            carMk.setPosition(pts[i]);
            if (i < paths) {
              setTimeout(function() {
                i++;
                resetMkPoint(i);
              }, 600);
            }
          }
          setTimeout(function() {
            resetMkPoint(5);
          }, 100);
        });
      };
      setTimeout(function() {
        window.run();
      },500); */

      // 转百度坐标 -- api限制10个
      // const convertor = new BMap.Convertor();
      // convertor.translate(arrPois, 1, 5, this.startDraw)

      //   this.startDraw(arrPois);
    },
    // 划线
    drawLine(arr) {
      const lineOP = {
        strokeColor: "blue",
        strokeWeight: 1,
        strokeOpacity: 0.5
      };
      const polyline = new BMap.Polyline(arr, lineOP);
      this.map.addOverlay(polyline);
    },
    // 定时调用划线
    startDraw(arr) {
      this.map.setViewport(arr);
      let i = 2;
      const len = arr.length;
      this.interval = setInterval(() => {
        const points = [...arr];
        points.length = i;
        i++;
        this.drawLine(points);
        if (i === len) {
          clearInterval(this.interval);
        }
      }, 500);
    },
    getLine(startTime, endTime) {
      const loading = this.$loading({
        lock: true,
        text: "正在加载..."
      });
      let query = {
        startTime: startTime || moment(0, "HH").unix() * 1000,
        endTime: endTime || moment({ hour: 23, minute: 59 }).unix() * 1000,
        vcuNo: this.vcu
      };
      let that = this;
      Api.getTripTrack(query)
        .then(res => {
          console.log("trip:", res);
          if (res.items.length == 0) {
            that.$alert("该车辆当天时间段内没有行程", "提示", {
              confirmButtonText: "确定"
            });
          } else {
            that.init(res.items);
          }
          loading.close();
        })
        .catch(err => {
          loading.close();
        });
    },
    setvalidDate(value){
      return new Date(value)>new Date()
    },
    
    // 搜索
    onSearchTrip() {
      let {day,time:[startTime,endTime]}=this.form
      console.log(startTime,endTime)
      console.log(this.getTimestamp(day,startTime),this.getTimestamp(day,endTime))
      this.getLine(this.getTimestamp(day,startTime),this.getTimestamp(day,endTime));
    },
    getTimestamp(day,time){
      let date=moment(new Date(day)).format('YYYY-MM-DD')+' '+moment(new Date(time)).format('HH:mm:ss')
      return new Date(date).getTime()
    }
  },
  mounted() {
    this.vcu = this.$route.params.vcu;
    this.getLine();
  }
};
</script>
<style scoped>
.map-body {
  position: relative;
}
.map-time {
  position: absolute;
  top: 50px;
  right: 150px;
  background-color: #fff;
  padding: 15px;
  /* width: 450px; */
  border-radius: 10px;
}
.line {
  text-align: center;
}
.map {
  width: 100%;
  min-height: 600px;
  min-height: 90vh;
  background-color: #999;
}
.btn-sure{
  text-align: right;
}
</style>