高德地图轨迹巡航，带进度条

先下载elementUI

效果图

开始巡航效果图

直达终点效果图

销毁巡航器，清除轨迹路线效果图

引入高德

全部代码，可复制直接使用

<template>
  <div class="dashboard">
    <div id="map"
         :style="'height:'+mapHeight+'px'"></div>
    <div class="operation">
      <el-card class="box-card">
        <div slot="header"
             class="clearfix">
          <span>操作栏</span>
        </div>
        <el-row class="t-flex t-around">
          <div class="textCenter">
            <el-button type="primary"
                       icon="el-icon-arrow-left"
                       @click="playTrack(0)"
                       circle></el-button>
            <p class="lineH24">快退</p>
          </div>
          <div class="textCenter"
               v-if="isPlay == 1">
            <el-button type="info"
                       icon="el-icon-video-play"
                       @click="playTrack(1)"
                       circle></el-button>
            <p class="lineH24">开始</p>
          </div>
          <div class="textCenter"
               v-if="isPlay == 2">
            <el-button type="success"
                       icon="el-icon-video-pause"
                       @click="playTrack(2)"
                       circle></el-button>
            <p class="lineH24">暂停</p>
          </div>
          <div class="textCenter">
            <el-button type="danger"
                       icon="el-icon-arrow-right"
                       @click="playTrack(3)"
                       circle></el-button>
            <p class="lineH24">快进</p>
          </div>
          <div class="textCenter">
            <el-button type="danger"
                       icon="el-icon-delete-solid"
                       @click="playTrack(4)"
                       circle></el-button>
            <p class="lineH24">回到起点</p>
          </div>
          <div class="textCenter">
            <el-button type="primary"
                       icon="el-icon-s-promotion"
                       @click="playTrack(5)"
                       circle></el-button>
            <p class="lineH24">直达终点</p>
          </div>
          <div class="textCenter">
            <el-button type="danger"
                       icon="el-icon-switch-button"
                       @click="playTrack(6)"
                       circle></el-button>
            <p class="lineH24">销毁</p>
          </div>
        </el-row>
        <el-row>
          <el-progress :percentage="percentage"></el-progress>
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters(['name']),
  },
  data() {
    return {
      trackFlag: false,
      map: null,
      pathSimplifierIns: null,
      mapHeight: document.body.clientHeight - 50,
      lineData: [],
      //   巡航器移动速度
      moveSpeed: 30000,
      //   开始暂停快进快推继续结束标识
      isPlay: 1,
      //   开始暂停标识符
      isPause: 0,
      latlng: [],
      //   巡航器
      navg: null,
      //   巡航是否结束
      isEnd: false,
      percentage: 0,
    }
  },
  methods: {
    initMap() {
      this.map = new AMap.Map('map', {
        zoom: 4,
      })
      //   销毁巡航器
    },
    drawLine(list) {
      let that = this
      //   清除轨迹路线
      if (window.pathSimplifierIns) {
        this.pathSimplifierIns.setData([])
      }
      AMapUI.load(
        ['ui/misc/PathSimplifier', 'lib/$'],
        function (PathSimplifier, $) {
          if (!PathSimplifier.supportCanvas) {
            alert('当前环境不支持 Canvas！')
            return
          }
          that.pathSimplifierIns = new PathSimplifier({
            zIndex: 100,
            //autoSetFitView:false,
            map: that.map, //所属的地图实例
            getPath: function (pathData, pathIndex) {
              return pathData.path
            },
            getHoverTitle: function (pathData, pathIndex, pointIndex) {
              if (pointIndex >= 0) {
                //point
                return (
                  pathData.name +
                  '，点：' +
                  pointIndex +
                  '/' +
                  pathData.path.length
                )
              }
              return pathData.name + '，点数量' + pathData.path.length
            },
            renderOptions: {
              renderAllPointsIfNumberBelow: 100, //绘制路线节点，如不需要可设置为-1
            },
          })
          window.pathSimplifierIns = that.pathSimplifierIns
          //设置数据
          that.pathSimplifierIns.setData([
            {
              name: '路线0',
              path: list,
            },
          ])
          that.trackFlag = true
          var navg = that.pathSimplifierIns.createPathNavigator(0, {
            loop: false, //循环播放
            speed: 10000, //巡航速度，单位千米/小时-默认70，动态设置
            dirToPosInMillsecs: 0,
          })
          var p1 = list[0]
          var p2 = list[list.length - 1]
          navg.on('move', function () {
            let idx = navg.getCursor().idx //走到了第几个点
            let tail = navg.getCursor().tail //至下一个节点的比例位置
            let totalIdx = idx + tail
            var distance = Math.round(AMap.GeometryUtil.distance(p1, p2) / 1000)
            if (idx === list.length - 1) {
              that.isPlay = 1
              that.percentage = 100
            } else {
              // 根据走过的距离计算进度
              that.percentage = Math.round(
                (this.getMovedDistance() / 1000 / distance) * 100
              )
              //   根据走过的点数计算进度
              //   that.percentage = parseInt(
              //     (totalIdx / that.dataList.length) * 100
              //   )
            }
            that.latlng = [navg.getPosition().lat, navg.getPosition().lng]
          })
          that.navg = navg
        }
      )
    },
    // 播放控制
    playTrack(type) {
      if (this.trackFlag) {
        if (type === 4) {
          //回到起点
          this.isPlay = 1
          this.navg.destroy()
          this.drawLine(this.lineData)
          this.navg.setSpeed(this.moveSpeed)
          this.percentage = 0
        } else if (type === 6) {
          //销毁
          this.isPlay = 1
          this.percentage = 0
          this.trackFlag = false
          if (this.lineData.length > 0) {
            this.navg.destroy()
          }
          if (window.pathSimplifierIns) {
            this.pathSimplifierIns.setData([])
            // this.map.remove(this.markers)
          }
          this.$message({
            message: '销毁巡航器，清除轨迹路线',
            type: 'success',
          })
        } else if (type === 1) {
          if (this.isPlay === 1 && !this.isEnd && this.isPause === 1) {
            this.navg.resume()
            this.navg.setSpeed(this.moveSpeed)
          } else {
            this.navg.start()
            this.isEnd = false
            this.navg.setSpeed(this.moveSpeed)
          }
          this.$message({
            message: '开始巡航',
            type: 'success',
          })
          this.isPlay = 2
          this.isPause = 0
        } else if (type === 2) {
          //暂停
          this.navg.pause()
          this.isPlay = 1
          this.isPause = 1
          this.$message({
            message: '暂停巡航',
            type: 'warning',
          })
        } else if (type === 5) {
          //回到终点
          this.navg.stop()
          this.navg.moveToPoint(this.navg.getPathEndIdx())
          this.isPlay = 1
          this.isEnd = true
          this.latlng = [
            this.lineData[this.lineData.length - 1][0],
            this.lineData[this.lineData.length - 1][1],
          ]
          this.$message({
            message: '回到终点',
            type: 'warning',
          })
          this.percentage = 100
        } else if (type === 0) {
          //快退
          if (this.moveSpeed > 10000) {
            this.moveSpeed -= 10000
            this.navg.setSpeed(this.navg.getSpeed() - 10000)
            this.$message({
              message: '×' + this.moveSpeed / 10000,
            })
          } else {
            this.$message({
              message: '已经是最低速度！',
              type: 'warning',
            })
          }
        } else if (type === 3) {
          //快进
          if (this.moveSpeed < 50000) {
            this.moveSpeed += 10000
            this.navg.setSpeed(this.navg.getSpeed() + 10000)
            this.$message({
              message: '×' + this.moveSpeed / 10000,
            })
          } else {
            this.$message({
              message: '已经是最高速度！',
              type: 'warning',
            })
          }
        }
        this.playType = type
      } else {
        this.$message({
          message: '请先绘制轨迹',
          type: 'warning',
        })
      }
    },
  },
  mounted() {
    this.initMap()
    ;(this.lineData = [
      [116.405289, 39.904987],
      [113.964458, 40.54664],
      [111.47836, 41.135964],
      [108.949297, 41.670904],
      [106.380111, 42.149509],
      [103.774185, 42.56996],
      [101.135432, 42.930601],
      [98.46826, 43.229964],
      [95.777529, 43.466798],
      [93.068486, 43.64009],
      [90.34669, 43.749086],
      [87.61792, 43.793308],
    ]),
      this.drawLine(this.lineData)
  },
}
</script>

<style lang="scss" scoped>
#map {
  width: 100%;
}
.dashboard {
  position: relative;
}
.operation {
  position: fixed;
  left: 248px;
  top: 98px;
  width: 720px;
}
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>