Vue to achieve trajectory replay of Amap

Step 2: Complete code

<template>
  <div class="trackquery">
   <div id="container" class="map" :style="styleSize"></div> 
   <div class="contbtn" v-if="lineArr.length > 0">   
   <div class="flex-demo">      
  <el-button v-if="starshow" class="btncol" type="primary" @click="starmove"</el-button> </div> <div class= start animation"flex-demo">        <el-button          :disabled="btndisabled"          v-if="endshow ==true"          class="btncol"          type="danger"          @click="endmove"</el-button> <el-button :disabled="btndisabled"          v-if="endshow ==false"          class="btncol"          type="success"          @click="resumeAnimation"> continue to play < / el - button > < / div > < / div > < / div > < / template > < script >export default { 
 data() {  
  return {       
   styleSize: {
  height: "",     
   width: ""    
  },    
  btndisabled: true,   
   starshow: true,   
   endshow: true,  
    map: "",   
   lineArr: [],   
   lineArrlast: [],  
    lineArrPre: [],  
    marker: "",  
    k: 0   
 }; 
 },  
created() {window.adDeventListener () {window.addeventListener ();"resize", this.getHeight);  
  this.getHeight(); 
 }, 
 mounted() {   
 setTimeout(() => { this.getmap(); }, 1000); // map initialization}, methods: {getHeight() {    
  this.styleSize.height = window.innerHeight + "px";   
   this.styleSize.width = window.innerWidth + "px";     
    },   
 getmap() {// Test data this.linearr = ["37.8733379449, 112.55877766927 | 37.8732877604, 112.55876600477 | 37.8733064779, 112.5587516276 | 37.8732354058, 112.55877929688 | 37.8731488715, 112.55866102431 | 37.8730938043 and 112.55855604384 | 37.8729125977, 112.55849093967 | 37.872827691, 112.55837158203 | 3 7.8727848307, 112.55822238498 | 37.8727718099 and 112.55802517361 | 37.8728314887, 112.55778184679 | 37.8729033746, 112.55748616536 | 3 7.8728721788, 112.5572781033 | 37.8728428819 and 112.55718641493 | 37.8728192817, 112.55690456814 | 37.872827691, 112.55672688802 | 37. 112.55644504123, 37.8727517361 | | 37.8728849284 8728881836112556717309, 112.55618109809 | 37.8724210612, 112.55612792969 | 37. 112.55603135851, 37.8721443685 | | 37.8721343316 8722357856112556132125, 112.5558710395 | 37.8721072049, 112.5559375 | 37.87204 112.55630886502, 37.8722734918 | | 37.8722252062 86111112556731538, 112.5563031684 | 37.8730498589, 112.55625108507,"      ];
 let self = this;    
  let polylineX, nColorLength,
 currentLen, 
latlonarr, 
pointList;  
    let colors = [     
   "#3366cc"."#dc3912"."# 109618"."# 990099"."#0099c6"."#dd4477"."#66aa00"."# 316395"."# 994499"."#22aa99"."#6633cc"."# 329262"."#5574a6"."#3b3eac"    
  ];   
   this.map = new AMap.Map("container", {     
   resizeEnable: true, center: [112.588043, 37.860335], zoom: 12});if (this.lineArr.length > 0) {     
   for (let j = 0; j < this.lineArr.length; j++) {      
    polylineX = "polyline"+ j; Colorlength = color.length; currentLen = 0;if (j > nColorLength) {      
      currentLen = j % 14;     
     } else {       
     currentLen = j;       
   }      
    latlonarr = this.lineArr[j].split("|");      
    if (latlonarr.length > 0) {      
      if (j < this.lineArr.length - 1) {     
         this.lineArrPre = [];       
       for (let i = 0; i < latlonarr.length; i++) {    
            pointList = latlonarr[i].split(",");      
          if (pointList.length > 0) {       
           this.lineArrPre.push(         
           new AMap.LngLat(pointList[1], pointList[0])       
           );             
   }          
    }       
       polylineX = new AMap.Polyline({         
       map: this.map,     
           path: this.lineArrPre,   
             showDir: true,     
           strokeColor: colors[currentLen], //线颜色      
          strokeWeight: 6 //线宽        
      });         
   } else{// The last trace draws the movement tracefor (let i = 0; i < latlonarr.length; i++) {       
         pointList = latlonarr[i].split(",");     
           if (pointList.length > 0) {       
           this.lineArrlast.push(        
            new AMap.LngLat(pointList[1], pointList[0])      
            );        
        }       
       }        
      polylineX = new AMap.Polyline({       
         map: this.map,         
       path: this.lineArrlast,       
         showDir: true,           
     strokeColor: colors[currentLen], //线颜色       
         strokeWeight: 6 //线宽     
         });           
   if (this.lineArrlast.length > 0) {    
            this.marker = new AMap.Marker({        
          map: this.map,          
        position: [this.lineArrlast[0].lng, this.lineArrlast[0].lat],     
             icon: "https://webapi.amap.com/images/car.png",     
             offset: new AMap.Pixel(-26, -13),      
            autoRotation: true,            
      angle: -90            
    });         
     }         
     var passedPolyline = new AMap.Polyline({        
        map: this.map,      
          // path: lineArr,     
           strokeColor: "#AF5", // line color: 1, // line opacity: 6 // line width // strokeStyle:"solid"// line style}); this.marker.on("moving".function(e) { passedPolyline.setPath(e.passedPath); }); } } } } this.map.setFitView(); }, // Start playingstarmove() {     
 this.endshow = true;   
   this.starshow = true;  
    this.btndisabled = false; this.marker.moveAlong(this.lineArrlast, 500); }, // Pause playbackendmove() {  
    this.endshow = false; this.marker.pauseMove(); }, // Continue playingresumeAnimation() {   
   this.endshow = true; this.marker.resumeMove(); }, // Stop playingstopAnimation() {   
   this.marker.stopMove(); 
  }  }};
</script>
<style scoped>
.contbtn { 
 position: fixed; 
 top: 15%; 
 left: 12%;  
min-height: 130px; 
 min-width: 200px; 
 background: rgba(0, 0, 0, 0.5); 
 display: flex; 
 flex-direction: column; 
 justify-content: center; 
 align-items: center;
}
.btncol { 
 margin: 10px 0;
}
</style>Copy the code