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