vue3中使用高德地图进行轨迹绘制及播放

1、定义地图容器及操作按钮

 <div class="gaode-map">
    <div id="container"></div>
    <div class="option-btn">
      <el-button @click="handleStartDraw">开始绘制</el-button>
      <el-button @click="handleSave">保存路径</el-button>
      <el-button @click="handleMove">开始动画</el-button>
      <el-button @click="handlePause" v-if="!showStatus && start">暂停动画</el-button>
      <el-button @click="handleResume" v-if="showStatus && start">继续动画</el-button>
      <el-button @click="handleStop" v-if="start">停止动画</el-button>
    </div>
  </div>

2、引入高德地图，轨迹绘制及播放方法实现

<script setup>

import AMapLoader from '@amap/amap-jsapi-loader';
import {ref,onMounted,nextTick} from "vue";
const path = ref([]);
const current_position = ref([]);

let AMap = ref(null)
let map = ref(null)
let search = ref('')
let polyline = ref(null)
let marker = ref(null)
let polyLineList = ref(null)
let markerMove = ref(null)
let lineArr = ref([])
let passedPolyline = ref(null)
let showStatus = ref(false)
let speedIn = ref(3000)

let start = ref(false)

let initMap = async () => {
  // window._AMapSecurityConfig = {
  //     securityJsCode: '', // 申请的高德Key相对应的密钥
  // }
  AMap.value = await AMapLoader.load({
    key:"", // 申请好的Web端开发者Key，首次调用 load 时必填
    version:"2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    // plugins:[''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
  map.value = new AMap.value.Map("container",{  // 设置地图容器id
    viewMode:"3D",    // 是否为3D地图模式
    zoom:13,           // 初始化地图级别
    // center:[113.808299,34.791787], // 初始化地图中心点位置，不设置的时候默认展示当前位置
  });
  // 添加插件
  AMap.value.plugin(["AMap.ToolBar", "AMap.Scale","AMap.MoveAnimation", "AMap.HawkEye","AMap.Geolocation","AMap.MapType","AMap.MouseTool"],  () => {
      //异步同时加载多个插件
      // 添加地图插件
      // map.value.addControl(new AMap.value.ToolBar()); // 工具条控件;范围选择控件
      // map.value.addControl(new AMap.value.Scale()); // 显示当前地图中心的比例尺
      // map.value.addControl(new AMap.value.HawkEye()); // 显示缩略图
      // map.value.addControl(new AMap.value.Geolocation()); // 定位当前位置
      // map.value.addControl(new AMap.value.MapType()); // 实现默认图层与卫星图,实时交通图层之间切换

      // // 以下是鼠标工具插件
      // const mouseTool = new AMap.value.MouseTool(map.value);
      // mouseTool.rule();// 用户手动绘制折线图,测量距离
      // mouseTool.measureArea(); // 测量面积
  });
}

onMounted(()=>{
  initMap()
})

let mapClick = () => {
  // 单击
  map.value.on('click',(e) => {
    current_position.value = [e.lnglat.lng,e.lnglat.lat];
    path.value.push([e.lnglat.lng,e.lnglat.lat]);
    addPolyLine();
  })
}

// 开始绘制
let handleStartDraw = () => {
  mapClick()
}
// 数据保存
let handleSave = () => {
  // console.log(polyLineList.value);
  if(polyLineList.value == null){
    return ElMessage({
      showClose: true,
      message: '请先点击开始绘制进行路径绘制',
      type: 'warning',
    })
  }
  for (let i = 0; i < polyLineList.value.length; i++) {
    let obj = [polyLineList.value[i].lng,polyLineList.value[i].lat]
    lineArr.value[i] = obj
  }
  AMap.value.plugin('AMap.MoveAnimation', () => {
      start.value = true
      marker.value = new AMap.value.Marker({
          map: map.value,
          // position: [116.478935,39.997761],
          icon: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png", // 可自定义图标
          offset: new AMap.value.Pixel(-13, -26),
      });
      // 轨迹运动的线
      passedPolyline.value = new AMap.value.Polyline({
        map: map.value,
        strokeColor: "#AF5",  //线颜色
        strokeWeight: 10,      //线宽
      });
      // 点标记的运动
      marker.value.on('moving',  (e) => {
        // console.log("e",e);
        passedPolyline.value.setPath(e.passedPath);
        map.value.setCenter(e.target.getPosition(),true)
      });

      map.value.setFitView();
  });
}

// 开始动画
let handleMove = () => {
  if(!start.value){
    ElMessage({
      showClose: true,
      message: '请先保存路径',
      type: 'warning',
    })
    return
  }
  // JSAPI2.0 使用覆盖物动画必须先加载动画插件
  marker.value.moveAlong(lineArr.value, {
    // 每一段的时长
    duration: speedIn,//可根据实际采集时间间隔设置
    // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
    autoRotation: true,
  });
}
// 暂停
let handlePause = () => {
  showStatus.value = true
  marker.value.pauseMove();
}
// 停止
let handleStop = () => {
  showStatus.value = false
  marker.value.stopMove();
}
// 继续
let handleResume = () => {
  showStatus.value = false
  marker.value.resumeMove();
}
let addPolyLine = () => {
  // console.log("-=->",AMap.value);
  polyline.value = new AMap.value.Polyline({
    map: map.value,
    path: path.value,
    // isOutline: true,
    // outlineColor: "#ffeeff",
    borderWeight: 1,
    strokeColor: "#3366FF",
    // strokeOpacity: 1,
    // strokeWeight: 5,
    // // 折线样式还支持 'dashed'
    // strokeStyle: "solid",
    // strokeStyle是dashed时有效
    // strokeDasharray: [10, 5],
    // lineJoin: "round",
    // lineCap: "round",
    // zIndex: 50,
  });
  polyLineList.value = polyline.value.getPath()
  map.value.add([polyline.value]);  
}

</script>

3、界面样式

<style lang="scss" scoped>
.gaode-map{
  width: 100%;
  height: 100%;
  position: relative;
  #container{
    width: 100%;
    height: 100%;
  }
  .option-btn{
    position: absolute;
    top: 50px;
    right: 50px;
    // border: 1px solid blue;
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    .el-button{
      display: flex;
      margin-left: 0px;
    }
  }
}
</style>

注意：使用高德地图没有key，或者未设置高德地图容器的大小时，高德地图不会显示

高德地图API：轨迹回放-点标记-示例中心-JS API 2.0 示例 | 高德地图API (amap.com)（需要自己注册获取key）

轨迹绘制及播放使用高德地图的API，若有不足之处时帮忙指正，谢谢