vue3 uses Gaode map for track drawing and playback code example

 <div class="gaode-map">
    <div ></div>
    <div class="option-btn">
      <el-button @click="handleStartDraw">Start drawing</el-button>
      <el-button @click="handleSave">Save the path</el-button>
      <el-button @click="handleMove">Start animation</el-button>
      <el-button @click="handlePause" v-if="!showStatus && start">Pause animation</el-button>
      <el-button @click="handleResume" v-if="showStatus && start">Continue the animation</el-button>
      <el-button @click="handleStop" v-if="start">Stop animation</el-button>
    </div>
  </div>

<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: '', // The corresponding key of the applied Gaode Key  // }
   = await ({
    key:"", // Apply for a web developer Key, it is required to fill in the first call to load    version:"2.0", // Specify the version of JSAPI to load, by default, default is 1.4.15    // plugins:[''], // list of plugins to use, such as scale '', etc.  })
   = new ("container",{  // Set the map container id    viewMode:"3D",    // Is it in 3D map mode?    zoom:13,           // Initialize map level    // center:[113.808299,34.791787], // Initialize the center point position of the map. When not set, the current position is displayed by default.  });
  // Add plug-in  (["", "","", "","","",""],  () => {
      //Load multiple plug-ins asynchronously      // Add map plugin      // (new ()); // Toolbar control; Range selection control      // (new ()); // Show the scale of the current map center      // (new ()); // Show thumbnails      // (new ()); // Position the current position      // (new ()); // Implement the default layer and satellite image, and switch between real-time traffic layers
      // // The following is the mouse tool plugin      // const mouseTool = new ();
      // ();// User manually draws line charts and measures distance      // (); // Measurement area  });
}

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

let mapClick = () => {
  // Click  ('click',(e) => {
    current_position.value = [,];
    ([,]);
    addPolyLine();
  })
}

// Start drawinglet handleStartDraw = () => {
  mapClick()
}
// Data savinglet handleSave = () => {
  // ();
  if( == null){
    return ElMessage({
      showClose: true,
      message: 'Please click to start drawing first for path drawing',
      type: 'warning',
    })
  }
  for (let i = 0; i < ; i++) {
    let obj = [[i].lng,[i].lat]
    [i] = obj
  }
  ('', () => {
       = true
       = new ({
          map: ,
          // position: [116.478935,39.997761],
          icon: "/jsapi_demos/static/demo-center-v2/", // Customizable icons          offset: new (-13, -26),
      });
      // The line of track movement       = new ({
        map: ,
        strokeColor: "#AF5", //Line Color strokeWeight: 10, //Line Width      });
      // Movement of point mark      ('moving',  (e) => {
        // ("e",e);
        ();
        ((),true)
      });

      ();
  });
}

// Start animationlet handleMove = () => {
  if(!){
    ElMessage({
      showClose: true,
      message: 'Please save the path first',
      type: 'warning',
    })
    return
  }
  // JSAPI2.0 must first load the animation plug-in to use overlay animation  (, {
    // The duration of each period    duration: speedIn,//It can be set according to the actual acquisition time interval    // Whether to automatically set the angle of JSAPI2.0 to extend the road?    autoRotation: true,
  });
}
// pauselet handlePause = () => {
   = true
  ();
}
// stoplet handleStop = () => {
   = false
  ();
}
// continuelet handleResume = () => {
   = false
  ();
}
let addPolyLine = () => {
  // ("-=->",);
   = new ({
    map: ,
    path: ,
    // isOutline: true,
    // outlineColor: "#ffeeff",
    borderWeight: 1,
    strokeColor: "#3366FF",
    // strokeOpacity: 1,
    // strokeWeight: 5,
    // // Polyline style also supports 'dashed'    // strokeStyle: "solid",
    // strokeStyle is valid when dashed    // strokeDasharray: [10, 5],
    // lineJoin: "round",
    // lineCap: "round",
    // zIndex: 50,
  });
   = ()
  ([]);  
}

</script>

<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>