修改轨迹回放错误问题

src/components/trackPlayback.vue

@@ -7,20 +7,20 @@
       lock-scroll
       width="80%">
     <div id="container" v-if="dialogVisible"></div>
-<!--    <div class="input-card" style="right: 10.3%;bottom: 10.3%" v-if="this.lineArr.length>0">-->
-<!--      <h4>轨迹回放控制</h4>-->
-<!--      <div class="input-item">-->
-<!--        <input type="button" class="btn" value="开始动画" id="start" @click="startAnimation()"/>-->
-<!--        <input type="button" class="btn" value="暂停动画" id="pause" @click="pauseAnimation()"/>-->
-<!--      </div>-->
-<!--      <div class="input-item">-->
-<!--        <input type="button" class="btn" value="继续动画" id="resume" @click="resumeAnimation()"/>-->
-<!--        <input type="button" class="btn" value="停止动画" id="stop" @click="stopAnimation()"/>-->
-<!--      </div>-->
-<!--    </div>-->
-<!--    <div class="input-card" style="right: 10.3%;bottom: 10.3%" v-else>-->
-<!--      <span style="color: red">暂无该车辆轨迹信息</span>-->
-<!--    </div>-->
+    <div class="input-card" style="right: 10.3%;bottom: 10.3%" v-if="this.lineArr.length>0">
+      <h4>轨迹回放控制</h4>
+      <div class="input-item">
+        <input type="button" class="btn" value="开始动画" id="start" @click="startAnimation()"/>
+        <input type="button" class="btn" value="暂停动画" id="pause" @click="pauseAnimation()"/>
+      </div>
+      <div class="input-item">
+        <input type="button" class="btn" value="继续动画" id="resume" @click="resumeAnimation()"/>
+        <input type="button" class="btn" value="停止动画" id="stop" @click="stopAnimation()"/>
+      </div>
+    </div>
+    <div class="input-card" style="right: 10.3%;bottom: 10.3%" v-else>
+      <span style="color: red">暂无该车辆轨迹信息</span>
+    </div>
   </el-dialog>
 </template>
 
@@ -58,16 +58,6 @@ export default {
         image: 'https://trade.tubaosoft.com/file/bladex/000000/1123598821738675201/che.png',
         imageSize: new AMap.Size(52, 26), // 根据所设置的大小拉伸或压缩图片
       });
-      this.marker = new AMap.Marker({
-        map: this.map,
-        position: this.lineArr.length >0 ?this.lineArr[this.lineArr.length - 1]:[120.382891,36.066460],
-        // icon: "https://webapi.amap.com/images/car.png",
-        icon: icon,
-        markerMeta: new AMap.Size(28, 28),
-        offset: new AMap.Pixel(-26, -15),
-        autoRotation: true,
-        angle: -15
-      });
       // 绘制轨迹
       let polyline = new AMap.Polyline({
         map: this.map,
@@ -95,8 +85,6 @@ export default {
             position: this.parkingPoint[i].location,
             map: this.map
           });
-          // (this.parkingPoint[i].ete - this.parkingPoint[i].bte)
-          // console.log(this.fun(this.parkingPoint[i].bte, this.parkingPoint[i].ete));
           let fun = this.fun(this.parkingPoint[i].bte, this.parkingPoint[i].ete)==='获取失败'?'':this.fun(this.parkingPoint[i].bte, this.parkingPoint[i].ete)
           this.marker.content = '<div style="width: 300px;">'
               + '<p style="font-size: 22px;font-weight: bold;background-color: #2d8cf0;color: #fff;">' + fun + '</p>'
@@ -107,6 +95,16 @@ export default {
           this.marker.emit('click', {target: this.marker});
         }
       }
+      this.marker = new AMap.Marker({
+        map: this.map,
+        position: this.lineArr.length >0 ?this.lineArr[this.lineArr.length - 1]:[120.382891,36.066460],
+        // icon: "https://webapi.amap.com/images/car.png",
+        icon: icon,
+        markerMeta: new AMap.Size(28, 28),
+        offset: new AMap.Pixel(-26, -15),
+        autoRotation: true,
+        angle: -15
+      });
       this.map.setFitView();
     },
     fun(startTime,endTime) {