实时轨迹代码更新

src/views/allCar/catMessage.vue

@@ -250,7 +250,7 @@ export default {
       map: null,
       marker: null,
       passedPolyline: null,
-      lineArr: [[116.478935, 39.997761]],
+      lineArr: [],
       arr: []
     }
   },
@@ -308,8 +308,6 @@ export default {
     delListCar() {},
 
 
-
-
     // 实时轨迹 跳转这个表 carVinId
     handleShi(vin) {
       this.flag = true;
@@ -317,7 +315,15 @@ export default {
       this.socket.onopen = this.handleOpen
       this.socket.onmessage = this.handleMessage
       this.socket.onerror = this.handleError
-      this.initMap();
+      setTimeout( () => {
+        this.initMap();
+      },500)
+    },
+
+    handleClose(){
+      if(this.socket){
+        this.socket.close()
+      }
     },
 
     handleOpen() {
@@ -326,16 +332,17 @@ export default {
     // 前端接收数据
     handleMessage(event) {
       let lastArr = []
-      this.arr = JSON.parse(event.data)
+      var data = JSON.parse(event.data)
+      this.arr = JSON.parse(data)
+      console.log(this.arr)
       const len = this.lineArr.length
       if (len !== 0) {
         lastArr = this.lineArr[len - 1]
         this.lineArr.length = 0
         this.lineArr.push(lastArr)
       }
-      console.log(this.lineArr)
       this.lineArr.push(this.arr) // 添加新的点数据
-      console.log(this.lineArr)
+      // console.log(this.lineArr)
       this.startAnimation()
     },
     handleError(error) {
@@ -378,15 +385,16 @@ export default {
 
     // 开始动画
     startAnimation() {
-      this.marker.setPosition(this.arr)
+      console.log("实时轨迹开始")
+      this.marker.setPosition(this.lineArr[0])
       this.marker.on('moving', (e) => {
-        this.passedPolyline.setPath(e.passedPath)
+        // this.passedPolyline.setPath(e.passedPath)
-        this.$AMap.setCenter(e.target.getPosition(), true)
+        this.map.setCenter(e.target.getPosition(), true)
       })
-
       this.marker.moveAlong(this.lineArr,
         {
-          duration: 200
+          duration: 200,
+          autoRotation: true
         })
     },
 
@@ -486,7 +494,12 @@ export default {
 }
 </script>
 <style>
+@import "../MapStyle.css";
  .el-input{
    width: 200px;
  }
+ #container {
+   width: 80%;
+   height: 500px;
+ }
 </style>