小车动画跟随 + 速度弹窗

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

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",()=>{
+    data.animateMarker.on("movealong",()=>{})
-        // map.add(data.animateMarker)
+    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())
 }