From eae6eda5268b50337542d6ff5b9d0519c9eb01f2 Mon Sep 17 00:00:00 2001
From: Shikong <919411476@qq.com>
Date: Fri, 19 May 2023 09:10:29 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B0=8F=E8=BD=A6=E5=8A=A8=E7=94=BB=E8=B7=9F?=
 =?UTF-8?q?=E9=9A=8F=20+=20=E9=80=9F=E5=BA=A6=E5=BC=B9=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/record/AMapLocation.vue          |  3 +--
 .../src/views/record/logic/play.ts             | 18 ++++++++++++++++--
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/frontend/matrix-middle-service-web/src/views/record/AMapLocation.vue b/frontend/matrix-middle-service-web/src/views/record/AMapLocation.vue
index 23a72f8..47f48b3 100644
--- a/frontend/matrix-middle-service-web/src/views/record/AMapLocation.vue
+++ b/frontend/matrix-middle-service-web/src/views/record/AMapLocation.vue
@@ -172,7 +172,7 @@ const data = {
     labelsLayer: null,
     markers: [],
     tmpMarker: null,
-    infoWindow: {},
+    infoWindow: null,
     animateMarker: null,
 }
 const view = reactive({
@@ -352,7 +352,6 @@ function clearMap(){
     view.lines = []
     map.remove(data.polylines)
     map.remove(data.markers)
-    map.remove(data.infoWindow)
 }
 
 
diff --git a/frontend/matrix-middle-service-web/src/views/record/logic/play.ts b/frontend/matrix-middle-service-web/src/views/record/logic/play.ts
index 17d75ec..d8ad42d 100644
--- a/frontend/matrix-middle-service-web/src/views/record/logic/play.ts
+++ b/frontend/matrix-middle-service-web/src/views/record/logic/play.ts
@@ -10,14 +10,26 @@ export function playAnimation(map,data,line){
         })
     }
 
+    if(!data.infoWindow){
+        data.infoWindow = new AMap.InfoWindow({
+            offset: new AMap.Pixel(6, -25),
+            content: ""
+        });
+    }
+
     let path = line.map((item) => {
         return new AMap.LngLat(item.longitude, item.latitude)
     })
 
     let index = 0
     data.animateMarker.stopMove();
-    data.animateMarker.on("movealong",()=>{
-        // map.add(data.animateMarker)
+    data.animateMarker.on("movealong",()=>{})
+    data.animateMarker.on("moving",(e)=>{
+        let lastLocation = e.passedPath[e.passedPath.length - 1];
+        data.infoWindow.setPosition(lastLocation);
+        let speed = ((line[e.index].speed||0) * 3.6).toFixed(2)
+        data.infoWindow.setContent(`${speed} km/h`);
+        map.setCenter(e.target.getPosition(),true)
     })
     data.animateMarker.on("moveend",()=>{
         index++
@@ -25,6 +37,7 @@ export function playAnimation(map,data,line){
         if(index === line.length-1){
             setTimeout(()=>{
                 map.remove(data.animateMarker)
+                data.infoWindow.close()
             },100)
         }
     })
@@ -35,4 +48,5 @@ export function playAnimation(map,data,line){
         duration: 1000/60,
         autoRotation: true
     });
+    data.infoWindow.open(map, data.animateMarker.getPosition())
 }