icore-pass/src/views/sale/components/offSiteTransportation/checkGPS.vue

<template>
  <div class="container">
    <!-- 车辆轨迹 -->
    <div id="amap-container"></div>
    <div class="controller">
      <div class="btnx">
        <el-button type="primary" class="" @click="openInfo"
          >打开信息窗体</el-button
        >
        <el-button type="primary" class="" @click="closeinfo"
          >关闭信息窗口</el-button
        >
      </div>
      <div class="in_transit_information">
        <span class="item_details">车牌号:</span>
        <el-input
          style="width: 120px;"
          class="inputStyle"
          v-model.trim="carNumber"
          clearable
        >
        </el-input>
      </div>
      <div class="in_transit_information2">
        <span class="item_details">时间段:</span>
        <el-date-picker
          style="width:200px"
          class="date_picker_style"
          v-model="time[0]"
          @change="changeTime"
          type="time"
          format="yyyy-MM-dd HH:mm:ss"
          placeholder="开始日期"
        >
        </el-date-picker>
        <el-date-picker
          style="width:200px"
          class="date_picker_style"
          v-model="time[1]"
          @change="changeTime"
          type="time"
          format="yyyy-MM-dd HH:mm:ss"
          placeholder="结束日期"
        >
        </el-date-picker>
        <!-- <el-date-picker
          class="date_picker_style"
          v-model="time"
          @change="changeTime"
          type="datetimerange"
          format="yyyy-MM-dd HH:mm:ss"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker> -->
        <el-button type="primary" class="searchstyle" @click="initData"
          >查询</el-button
        >
      </div>
      <div class="in_transit_information2">
        <span class="item_details">查询地址:</span>
        <el-input
          style="width: 300px;"
          class="inputStyle"
          v-model.trim="address"
          clearable
        >
        </el-input>
         <el-button type="primary" class="searchstyle" @click="initLocation"
          >查询</el-button
        >
      </div>
      <div class="driving_information">
        <span class="item_details2">时间:{{ runRoute.gtm }}</span>
        <br />
        <span class="item_details2">车速:{{ runRoute.spd }}千米/小时</span>
        <br />
      </div>
      <div class="map-control">
        <!--播放暂停按钮-->
        进度:
        <Icon
          v-if="!isPlay"
          class="play-icon play"
          type="ios-play"
          @click="
            isPlay = true;
            play();
          "
        />
        <Icon
          v-else
          class="play-icon pause"
          type="ios-pause"
          @click="
            isPlay = false;
            stop();
            navgControl('pause');
          "
        />
        <Icon
          class="play-icon quickly"
          type="ios-play"
          @click="addProgress()"
        />
        <div class="mySlider">
          <Slider
            class="map-slider"
            v-model="sliderVal"
            :tip-format="hideFormat"
            :step="0.0001"
          ></Slider>
        </div>
        <!--速度-->
        <div class="mySlider2">
          <el-slider v-model="speedVal" show-input></el-slider>
        </div>
      </div>
      <div class="in_transit_information3" v-if="listPath.length > 0">
        <span class="item_details">停车时长:</span>
        <el-select
          style="width:100px"
          @change="changeParkingTime"
          v-model="parkingTime"
          placeholder="停车"
        >
          <el-option
            v-for="item in parkingOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="in_transit_information3" v-if="listPath.length > 0">
        <span class="item_details">离线时长:</span>
        <el-select
          style="width:100px"
          @change="changeLeaveTime"
          v-model="leaveTime"
          placeholder="离线"
        >
          <el-option
            v-for="item in parkingOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <el-row>
      <el-button type="primary" @click="slow">慢速</el-button>
      <el-button type="success" @click="middle">中速</el-button>
      <el-button type="danger" @click="fast">快速</el-button>
      <el-button type="success" @click="addProgress" plain>快进</el-button>
      <el-button type="danger" @click="stop" plain>暂停</el-button>
      <el-button type="success" @click="play" plain>开始</el-button>
    </el-row>
  </div>
</template>
<script>
import { shallowRef } from "@vue/reactivity";
import { lazyAMapApiLoaderInstance } from "vue-amap";
import { sjTime, stringToDate } from "@/utils/sharedJsFile";
import Slider from "./slider.vue";
Vue.use(Slider);
import Vue from "vue";
var infoWindow;
export default {
  name: "PathView",
  setup() {
    const map = shallowRef(null);
    return {
      map
    };
  },
  watch: {
    speedVal: {
      deep: true,
      handler(val, oldVal) {
        let that = this;
        if (that.pathNavigator != null) {
          that.pathNavigator.setSpeed(100 * val);
        }
      }
    }
  },
  data() {
    return {
      address:null,
      //一、 查询相关
      //选择时间区间
      time: [],
      //查询车牌号
      carNumber: "",
      //选择停车时长
      parkingTime: null,
      //停车时长选择区间
      parkingOptions: [
        {
          value: 600000,
          label: "10分钟"
        },
        {
          value: 1200000,
          label: "20分钟"
        },
        {
          value: 1800000,
          label: "30分钟"
        },
        {
          value: 2400000,
          label: "40分钟"
        },
        {
          value: 3000000,
          label: "50分钟"
        },
        {
          value: 3600000,
          label: "60分钟"
        },
        {
          value: 36000000,
          label: "关闭"
        }
      ],
      //选择离线时长
      leaveTime: null,
      //离线时长选择区间
      leaveOptions: [
        {
          value: 600000,
          label: "10分钟"
        },
        {
          value: 1200000,
          label: "20分钟"
        },
        {
          value: 1800000,
          label: "30分钟"
        },
        {
          value: 2400000,
          label: "40分钟"
        },
        {
          value: 3000000,
          label: "50分钟"
        },
        {
          value: 3600000,
          label: "60分钟"
        },
        {
          value: 36000000,
          label: "关闭"
        }
      ],
      //二、 展示相关
      //离线图标
      leaveMark: [],
      //停车图标
      parkMark: [],
      //开始地址
      startPointName: "",
      //结束地址
      endPointName: "",
      //小车行驶当前点所在的位置
      runRoute: {
        //正北方向夹角
        agl: "0",
        //当前的时间
        gtm: "0",
        //海拔
        hgt: "0",
        //进度
        lat: "0",
        //纬度
        lon: "0",
        //累计行驶距离（是车辆GPS安装开始到现在的距离,如果你想要查询范围内的行驶距离，用开始的累计距离和结束点累计距离相减）
        mil: "0",
        //这个时间的速度
        spd: "0"
      },
      //小车行驶当前点下标
      point: "",
      //三、 播放相关
      //是否暂停
      isPlay: true,
      //播放进度值
      sliderVal: 0,
      //播放速度值
      speedVal: 10,
      //四、组件相关
      //自定义窗体信息
      // ctmarkes:{
      //     lat:"33.015888071433764",
      //     lon : "115.96995235868168",
      //     title:"豫SE8888",
      //     details:"安徽省阜阳市颍东区阜阳舜岳水泥公司,西北方向,155.1米"
      // },
      //五、返回值相关
      //返回值集合
      listPath: [],
      //六、地图组件相关值
      //创建轨迹
      pathSimplifierIns: {},
      //巡回器
      pathNavigator: {},
      //初始化巡回器速度
      speed: 1000,
      //地图解析
      geocoder: null
    };
  },
  created() {},
  mounted() {},
  methods: {
    //停车时间改变
    changeParkingTime() {
      let that = this;
      //清除之前的停车点
      that.hideParkingMark();
      //计算时间的点
      let calculationPoint = null;
      that.listPath[0].runRoute.forEach(function(item, indexOf) {
        if (indexOf + 1 < that.listPath[0].runRoute.length) {
          //判断calculationPoint是否为空，如果是空的说明当前没有在计算停车时间
          if (calculationPoint == null && item.spd == "0.0") {
            calculationPoint = item;
          } else if (calculationPoint != null && item.spd != "0.0") {
            let beforeTime = that.stringToDate(calculationPoint.gtm);
            let item2 = that.listPath[0].runRoute[indexOf];
            let afterTime = that.stringToDate(item2.gtm);
            let second = afterTime - beforeTime;
            if (second > that.parkingTime) {
              let message = "停车:" + second / 60000;
              that.initParkingMarkes(
                20,
                35,
                require("@/assets/img/park.png"),
                calculationPoint.lon,
                calculationPoint.lat,
                message.split(".")[0] + "分钟"
              );
            }
            calculationPoint = null;
          }
        }
      });
    },
    //停车所有离线图标
    hideParkingMark() {
      let that = this;
      that.parkMark.forEach(function(item, indexOf) {
        item.hide();
      });
    },
    //离线时间改变时获得超过时间的点信息
    changeLeaveTime() {
      let that = this;
      //关闭所有图标
      that.hideLeaveMark();
      that.listPath[0].runRoute.forEach(function(item, indexOf) {
        if (indexOf + 1 < that.listPath[0].runRoute.length) {
          let beforeTime = that.stringToDate(item.gtm);
          let item2 = that.listPath[0].runRoute[indexOf + 1];
          let afterTime = that.stringToDate(item2.gtm);
          let second = afterTime - beforeTime;
          if (second > that.leaveTime) {
            let message = "离线:" + second / 60000;
            that.initLeaveMarkes(
              20,
              35,
              require("@/assets/img/leave.png"),
              item2.lon,
              item2.lat,
              message.split(".")[0] + "分钟"
            );
          }
        }
      });
    },
    //关闭所有离线图标
    hideLeaveMark() {
      let that = this;
      that.leaveMark.forEach(function(item, indexOf) {
        item.hide();
      });
    },
    //字符串转为Date
    stringToDate(dateString) {
      let dateStr = dateString
        .replace("年", "-")
        .replace("月", "-")
        .replace("日", "");
      return Date.parse(dateStr);
    },
    //校验查询时间
    changeTime() {},
    //速度慢
    slow() {
      console.log("slow");
      let that = this;
      that.pathNavigator.setSpeed(1000);
    },
    //速度中
    middle() {
      console.log("middle");
      let that = this;
      that.pathNavigator.setSpeed(10000);
    },
    //速度快
    fast() {
      console.log("fast");
      let that = this;
      that.pathNavigator.setSpeed(100000);
    },
    //启动
    play() {
      let that = this;
      that.pathNavigator.resume();
    },
    //停止
    stop() {
      let that = this;
      that.pathNavigator.pause();
    },
    //添加进度
    addProgress() {
      let that = this;
      let increment = that.listPath[0].runPath.length * 0.1;
      that.pathNavigator.start(
        (that.point + increment) % that.listPath[0].runPath.length
      );
    },
    //进度监听
    hideFormat(value) {
      let that = this;
      that.sliderVal = value;
    },
    //获得开始地址
    getStartPointName(lnglatXY) {
      let that = this;
      console.log("start", that.geocoder);
      that.geocoder.getAddress(lnglatXY, function(status, result) {
        if (status === "complete" && result.info === "OK") {
          that.startPointName = result.regeocode.formattedAddress;
        }
      });
    },
    //获得结束地址
    getEndPointName(lnglatXY) {
      let that = this;
      that.geocoder.getAddress(lnglatXY, function(status, result) {
        if (status === "complete" && result.info === "OK") {
          that.endPointName = result.regeocode.formattedAddress;
          setInterval(
            //设置自定义窗体
            that.initCustomMarkes(
              that.carNumber,
              that.formatDate(that.time[0], "yyyy-MM-dd") +
                "至" +
                that.formatDate(that.time[1], "yyyy-MM-dd") +
                "起点：" +
                that.startPointName +
                "<br/>" +
                "终点：" +
                that.endPointName +
                "<br/>" +
                "距离：" +
                that.listPath[0].miled+
                "<br/>" +
                "时间范围：" +
                that.formatDate(that.time[0],"yyyy-MM-dd hh:mm")+"至"+that.formatDate(that.time[1],"yyyy-MM-dd hh:mm") +
                "<br/>"
                ,
              lnglatXY[0],
              lnglatXY[1]
            ),
            500
          );
        }
      });
    },
    //查询地址并画点
    initLocation(){
      console.log("address:",this.address);
      if(this.address && this.address!=""){
        this.axios.get("/api/v1/otms/getLocationForAddress?address="+this.address).then((res)=>{
        console.log("res:",res);
        if(res.data.code=="0"){
          //画点
          this.initMap2([res.data.data.lon,res.data.data.lat],res.data.data.title,res.data.data.address);
        }else{
          this.$message({
            message:res.data.data,
            type:"warning",
            offset:100,
            showClose:true
          });
        }
      });
      }
      
    },
    //校验车牌号
    isVehicleNumber(vehicleNumber) {
      // console.log(vehicleNumber);
      var result = false;
      if (vehicleNumber.length == 7) {
        var express = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使场领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/;
        result = express.test(vehicleNumber);
      }else if(vehicleNumber.length == 8){
        var express = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼]{1}[A-HJ-NP-Z]{1}(([A-HJ-NP-Z0-9]{5})|([0-9]{6}|[A-HJ-NP-Z]{1}[0-9]{5}|[0-9]{5}[A-HJ-NP-Z]{1}|[A-HJ-NP-Z]{2}[0-9]{4}))$/;
        result = express.test(vehicleNumber);
      }
      return result;
    },
    //初始化数据
    initData() {
      let that = this;
      that.listPath = [];
      if (that.carNumber == "") {
        this.$message({
          message:"车牌号不能为空！",
          offset:100,
          type:"warning",
          showClose:true
        });
        return;
      }else if(!that.isVehicleNumber(that.carNumber)){
        this.$message({
          message:"车牌号格式错误！",
          offset:100,
          type:"warning",
          showClose:true
        });
        return;
      }
      if (that.time == null && that.time.length != 2) {
        this.$message.error("请选择时间");
        return;
      }
      if (that.time != null && that.time.length == 2) {
        if (that.time[1].getTime() - that.time[0].getTime() > 86400000 * 3) {
          this.$message.error("时间查询范围不能超过3天");
          // that.time = [];
          return;
        } else if (that.time[1].getTime() < that.time[0].getTime()) {
          this.$message.error("开始时间要大于结束时间,请重新选择！");
          // that.time = [];
          return;
        }
      }
      that.axios
        .post("/api/v1/otms/fullPathVisualizationByCarNumber", {
          capacityNumber: that.carNumber,
          startTime: that.formatDate(that.time[0], "yyyy-MM-dd hh:mm:ss"),
          endTime: that.formatDate(that.time[1], "yyyy-MM-dd hh:mm:ss")
        })
        .then(res => {
          if (res.data.data == "-1") {
            this.$message.error("运输订单未关闭,自提车辆无权查看!");
          } else if (res.data.data.startAndEndRoutes) {
            console.log("res.data.data:",res.data.data);
            that.listPath = res.data.data.startAndEndRoutes;
            that.initMap([105.602725, 37.076636]);
          } else {
            this.$message({
              message:"车辆没有开启GPS或尚未注册！",
              offset:100,
              type:"warning",
              showClose:true
            });
          }
        });
    },
    //初始化地图
    initMap(lonlat) {
      lazyAMapApiLoaderInstance.load().then(() => {
        let that = this;
        that.map = new AMap.Map("amap-container", {
          //设置地图容器id
          viewMode: "2D", //是否为2D地图模式
          zoom: 10, //初始化地图级别
          center: lonlat //初始化地图中心点位置
        });
        //初始化
        that.initGeocoder();
        //初始化巡航轨迹和巡航器
        that.initPathSimplifier();
        //初始化起点、当前点、当前点
        that.initThreeMarker();
        //初始化当前点标记
        //that.initCustomMarkes(that.carNumber+"("+that.listPath[0].miled+")",that.listPath[0].currentPointName,that.listPath[0].currentPoint.lon,that.listPath[0].currentPoint.lat)
        that.initEndline();
      });
    },
    initMap2(lonlat,title,address){
      lazyAMapApiLoaderInstance.load().then(() => {
        let that = this;
        if(!that.map){
           that.map = new AMap.Map("amap-container", {
            //设置地图容器id
            viewMode: "2D", //是否为2D地图模式
            zoom: 10, //初始化地图级别
            center: lonlat //初始化地图中心点位置
          });
          //初始化
          that.initGeocoder();
        }
        that.initMarkes( 20,25, require("@/assets/img/end.png"),lonlat[0],lonlat[1],title);
        //自定义窗体内容
        let content = [
          "<div  style='top:1px;width: 200px; background-color:  rgba(22, 160, 133, 1);' ><font color='white'>位置："+
          address
          +"</font>",
          "<div style='background-color:rgba(22, 160, 133, 1);'><font color='white'>名称：" +
            title +
            "</font></div></div>"
        ];
        // 创建 infoWindow 实例
        infoWindow = new AMap.InfoWindow({
          content: content.join("<br>") //传入 dom 对象，或者 html 字符串
        });
        // 打开信息窗体
        infoWindow.open(that.map, lonlat);
        });
    },
    //结束点
    initEndline() {
      let that = this;
      that.initPolyline(that.listPath[0].estimatePath, "#FF0000");
    },
    //创建起点终点当前点
    initThreeMarker() {
      let that = this;
      that.listPath.forEach((element, index) => {
        //起点名称
        that.getStartPointName([
          element.runRoute[0].lon,
          element.runRoute[0].lat
        ]);

        //开始标记点
        if (element.startPoint.lon != "" && element.startPoint.lat != "") {
          that.initMarkes(
            20,
            35,
            require("@/assets/img/start.png"),
            element.startPoint.lon,
            element.startPoint.lat,
            "起点"
          );
        }
        //结束标记点
        if (
          element.endPoint != {} &&
          element.endPoint != "" &&
          element.endPoint != null
        ) {
          that.initMarkes(20,35,require('@/assets/img/end.png'),element.endPoint.lon,element.endPoint.lat,'终点');
          //终点名称
          that.getEndPointName([element.endPoint.lon, element.endPoint.lat]);
        } else {
          that.initMarkes(20,35,require('@/assets/img/end.png'),element.runRoute[element.runRoute.length-1].lon,element.runRoute[element.runRoute.length-1].lat,'终点');
          //终点名称
          that.getEndPointName([
            element.runRoute[element.runRoute.length - 1].lon,
            element.runRoute[element.runRoute.length - 1].lat
          ]);
        }
      });
    },
    //初始化窗体
    initCustomMarkes(title, details, lon, lat) {
      let that = this;
      //自定义窗体内容
      var content = [
        "<div  style='top:1px;width: 200px; background-color:  rgba(22, 160, 133, 1);' ><font color='white'>" +
          title +
          "</font>",
        "<div style='background-color:rgba(22, 160, 133, 1);'><font color='white'>" +
          details +
          "</font></div></div>"
      ];
      // 创建 infoWindow 实例
      infoWindow = new AMap.InfoWindow({
        content: content.join("<br>") //传入 dom 对象，或者 html 字符串
      });
      // 打开信息窗体
      infoWindow.open(that.map, [lon, lat]);
    },
    //初始化预计轨迹
    initPolyline(path, color) {
      let that = this;
      console.log("path:",path);
      //预计轨迹
      var endLine = new AMap.Polyline({
        map: that.map, //地图组件
        path: path, //预计轨迹
        isOutline: true,
        outlineColor: color, //轨迹颜色
        borderWeight: 0,
        strokeColor: "#FF0000",
        strokeOpacity: 1,
        strokeWeight: 5,
        // 折线样式还支持 'dashed'
        strokeStyle: "solid",
        // strokeStyle是dashed时有效
        strokeDasharray: [10, 5],
        lineJoin: "round",
        lineCap: "round",
        zIndex: 50
      });
      that.map.setFitView([[endLine]]);
    },
    initParkingMarkes(weight, height, image, lon, lat, title) {
      let that = this;
      //图标标记点
      let pointicon = new AMap.Icon({
        size: new AMap.Size(weight, height), // 图标尺寸
        image: image, // Icon的图像
        imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
        imageSize: new AMap.Size(weight, height) // 根据所设置的大小拉伸或压缩图片
      });
      // 创建一个 Marker 实例：
      var pointmarker = new AMap.Marker({
        position: new AMap.LngLat(lon, lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        icon: pointicon,
        title: title
      });
      that.parkMark.push(pointmarker);
      // 将创建的点标记添加到已有的地图实例：
      that.map.add(pointmarker);
    },
    //创建离线和停车的标记
    initLeaveMarkes(weight, height, image, lon, lat, title) {
      let that = this;
      //图标标记点
      let pointicon = new AMap.Icon({
        size: new AMap.Size(weight, height), // 图标尺寸
        image: image, // Icon的图像
        imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
        imageSize: new AMap.Size(weight, height) // 根据所设置的大小拉伸或压缩图片
      });
      // 创建一个 Marker 实例：
      var pointmarker = new AMap.Marker({
        position: new AMap.LngLat(lon, lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        icon: pointicon,
        title: title
      });
      that.leaveMark.push(pointmarker);
      // 将创建的点标记添加到已有的地图实例：
      that.map.add(pointmarker);
    },
    //创建简单的标记
    initMarkes(weight, height, image, lon, lat, title) {
      let that = this;
      //图标标记点
      let pointicon = new AMap.Icon({
        size: new AMap.Size(weight, height), // 图标尺寸
        image: image, // Icon的图像
        imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
        imageSize: new AMap.Size(weight, height) // 根据所设置的大小拉伸或压缩图片
      });
      // 创建一个 Marker 实例：
      var pointmarker = new AMap.Marker({
        position: new AMap.LngLat(lon, lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        icon: pointicon,
        title: title
      });
      // 将创建的点标记添加到已有的地图实例：
      that.map.add(pointmarker);
    },
    //创建轨迹和巡航器
    initPathSimplifier() {
      let that = this;
      // ...你的操作
      new AMapUI.load(["ui/misc/PathSimplifier"], PathSimplifier => {
        if (!PathSimplifier.supportCanvas) {
          alert("当前环境不支持 Canvas！");
          return;
        }
        //创建轨迹和巡航器
        // 创建组件实例
        that.pathSimplifierIns = new PathSimplifier({
          map: that.map,
          zIndex: 100, // 图层叠加顺序
          data: that.listPath, // 巡航路径
          // 获取巡航路径中的路径坐标数组
          getPath: (pathData, pathIndex) => {
            return pathData.runPath;
          },
          //鼠标悬浮停时显示消息
          getHoverTitle: function(pathData, pathIndex, pointIndex) {
            //返回鼠标悬停时显示的信息
            if (pointIndex >= 0) {
              if (pathData.runRoute[pointIndex].gtm !== "undefined") {
                //鼠标悬停在某个轨迹节点上
                return (
                  pathData.runRoute[pointIndex].gtm +
                  "，速度" +
                  pathData.runRoute[pointIndex].spd +
                  "千米/小时"
                );
              }
            }
          },
          //设置轨迹样式
          renderOptions: {
            //轨迹线的样式
            pathLineStyle: {
              strokeStyle: "black", //路径颜色
              lineWidth: 6,
              dirArrowStyle: true
            }
          }
        });
        // 创建巡航器
        that.pathNavigator = that.pathSimplifierIns.createPathNavigator(0, {
          loop: true, // 是否循环
          speed: that.speed, // 速度(km/h)
          pathNavigatorStyle: {
            width: 20, //车辆图片宽度
            height: 40, //车辆图片高度
            content: PathSimplifier.Render.Canvas.getImageContent(
              require("@/assets/img/smallcar.png"),
              onload,
              onerror
            ), //车辆图片
            strokeStyle: null,
            fillStyle: null
          }
        });
        //开启巡航
        that.pathNavigator.start();

        //开始事件监听
        that.pathNavigator.on("start resume", function() {});

        //暂停事件监听
        that.pathNavigator.on("stop pause", function() {});

        //移动事件监听
        that.pathNavigator.on("move", function(data, value) {
          that.updateLable(value);
        });
      });
    },
    //实时展示
    updateLable(value) {
      let that = this;
      that.point = value.dataItem.pointIndex;
      that.runRoute = value.dataItem.pathData.runRoute[that.point];
      that.sliderVal =
        (value.dataItem.pointIndex / value.dataItem.pathData.runRoute.length) *
        100;
    },
    //逆解码函数
    initGeocoder() {
      let that = this;
      console.log("initGeocoder");
      AMap.plugin("AMap.Geocoder", function() {
        that.geocoder = new AMap.Geocoder({
          radius: 1000,
          extensions: "all"
        });

        console.log(that.geocoder);
      });
    },
    // 关闭信息窗口
    closeinfo() {
      infoWindow.close();
    },
    openInfo() {
      let lon = null;
      let lat = null;
      this.listPath.forEach(e => {
        if (e.endPoint != {} && e.endPoint != "" && e.endPoint != null) {
          lon = e.endPoint.lon;
          lat = e.endPoint.lat;
        } else {
          lon = e.runRoute[e.runRoute.length - 1].lon;
          lat = e.runRoute[e.runRoute.length - 1].lat;
        }
      });
      infoWindow.open(this.map, [lon, lat]);
    },
    //时间格式转换
    formatDate(date, fmt) {
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(
          RegExp.$1,
          (date.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
      }
      let o = {
        "M+": date.getMonth() + 1,
        "d+": date.getDate(),
        "h+": date.getHours(),
        "m+": date.getMinutes(),
        "s+": date.getSeconds()
      };
      for (let k in o) {
        if (new RegExp(`(${k})`).test(fmt)) {
          let str = o[k] + "";
          fmt = fmt.replace(
            RegExp.$1,
            RegExp.$1.length === 1 ? str : ("00" + str).substr(str.length)
          );
        }
      }
      return fmt;
    }
  }
};
</script>
<style>
.inputStyle {
  position: absolute;
  width: 200px;
  left: 50px;
}
.controller {
  width: 100%;
  height: 70px;
  background: white;
  position: absolute;
  z-index: 99;
  top: 0;
  left: 0;
}
.in_transit_information {
  width: 220px;
  float: left;
  height: 40px;
}
.in_transit_information3 {
  float: right;
  height: 40px;
  width: 180px;
}
.in_transit_information2 {
  height: 40px;
  float: left;
  width: 580px;
}
.container {
  width: 100%;
  height: 100%;
}
span.item_details2 {
  position: relative;
  top: 20px;
}
.date_picker_style {
  position: relative;
  left: 50px;
}
.item_details {
  position: relative;
  top: 5px;
  height: 0px;
  left: 0px;
}
#amap-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  font-family: "微软雅黑";
}

/* 进度条 */
.mySlider {
  width: 150px;
  height: 20px;
  display: inline-block;
  position: relative;
  left: 32px;
}
/* 进度条 */
.mySlider2 {
  width: 400px;
  height: 20px;
  display: inline-block;
  position: relative;
  left: 32px;
}
.play {
  position: relative;
  left: 28px;
}
.quickly {
  float: right;
  position: relative;
  left: -20px;
  top: 10px;
}
.pause {
  position: relative;
  left: 28px;
}
.passed-time {
  position: relative;
  left: 5px;
}
.end-time {
  position: relative;
  left: 5px;
}
.map-times {
  position: relative;
  width: 40px;
}
.searchstyle {
  position: relative;
  left: 5px;
}
.map-control {
  float: left;
  width: 270px;
}
.driving_information {
  height: 40px;
  width: 240px;
  float: left;
}
</style>
<style lang="scss" scoped>
.btnx {
  z-index: 1000;
  position: fixed;
  bottom: 10px;
  right: 10px;
}
</style>