订单轨迹回放-增加时间显示

ruoyi-admin/src/main/java/com/ruoyi/orders/controller/ZcOrderMainController.java

@@ -202,6 +202,48 @@ public class ZcOrderMainController extends BaseController
             mmap.put("orderTrajectoryPointList", trajectoryPoints);
             mmap.put("orderTrajectoryPointLen", trajectoryPoints.size()-1);
         }
+
+
+//        List<TrajectoryPoint> trajectoryPoints = new ArrayList<>();
+//        double[][] testData = {
+//                {112.925285, 27.900163}, {112.925285, 27.900163}, {112.925285, 27.900163},
+//                {112.925285, 27.900163}, {112.925285, 27.900163}, {112.925285, 27.900163},
+//                {112.925285, 27.900163}, {112.925285, 27.900163}, {112.925285, 27.900163},
+//                {112.925285, 27.900163}, {112.925285, 27.900163}, {112.925285, 27.900163},
+//                {112.925285, 27.900163}, {112.925285, 27.900163}, {112.925285, 27.900163},
+//                {112.925285, 27.900163}, {112.925285, 27.900163}, {112.925855, 27.898977},
+//                {112.925745, 27.898878}, {112.9261, 27.898802}, {112.926718, 27.898633},
+//                {112.927295, 27.898673}, {112.92779, 27.898652}, {112.928342, 27.898685},
+//                {112.928483, 27.89868}, {112.929135, 27.898667}, {112.9299, 27.898445},
+//                {112.930225, 27.898263}, {112.93024, 27.898233}, {112.930213, 27.898052},
+//                {112.929905, 27.897193}, {112.929437, 27.895972}, {112.929417, 27.895775},
+//                {112.929483, 27.895702}, {112.929832, 27.895443}, {112.929875, 27.89528},
+//                {112.930153, 27.894773}, {112.930123, 27.894712}, {112.929758, 27.894537},
+//                {112.929558, 27.894395}, {112.929668, 27.894208}, {112.929712, 27.89416},
+//                {112.930053, 27.893827}, {112.930018, 27.89383}, {112.930027, 27.893798},
+//                {112.930027, 27.893798}, {112.930027, 27.893798}, {112.93002, 27.893797},
+//                {112.93002, 27.893797}, {112.93002, 27.893797}, {112.929775, 27.89305},
+//                {112.929775, 27.89305}, {112.92978, 27.893495}, {112.92978, 27.893495}
+//        };
+//        // 创建轨迹点列表
+//        for (int i = 0; i < testData.length; i++) {
+//
+//            TrajectoryPoint point = new TrajectoryPoint();
+//            point.setLng(testData[i][0]);  // 经度
+//            point.setLat(testData[i][1]);  // 纬度
+//            // 时间戳可以按需添加
+//            double[] gcj02 = CoordinateTransformUtil.wgs84ToGcj02(point.getLat(), point.getLng());
+//            point.setLat(gcj02[0]);  // 纬度
+//            point.setLng(gcj02[1]);  // 经度
+//            point.setTs("2025-10-17 12:12:12");  // 经度
+//            trajectoryPoints.add(point);
+//        }
+//        // 设置中心点和轨迹点列表
+//        if (!trajectoryPoints.isEmpty()) {
+//            mmap.put("centerPoint", trajectoryPoints.get(0));
+//            mmap.put("orderTrajectoryPointList", trajectoryPoints);
+//            mmap.put("orderTrajectoryPointLen", trajectoryPoints.size()-1);
+//        }
         return prefix + "/orderTrajectory";
     }
 

ruoyi-admin/src/main/resources/templates/orders/order/orderTrajectory.html

@@ -94,12 +94,75 @@
         // 设置地图中心点（注意腾讯地图 LatLng 构造函数参数顺序是纬度,经度）
         center = new TMap.LatLng(lat, lng);
     }
+
+    // 创建一个用于显示坐标点的样式
+    var pointMarkers = [];
+    var pointInfos = []; // 存储每个点的信息
+
+    if (orderTrajectoryPointList && orderTrajectoryPointList.length > 0) {
+        orderTrajectoryPointList.forEach(function(point, index) {
+            pointMarkers.push({
+                id: 'point-' + index,
+                styleId: 'point-style',
+                position: new TMap.LatLng(point.lat, point.lng)
+            });
+            // 存储每个点的时间信息
+            pointInfos['point-' + index] = '时间: ' + point.ts;
+        });
+    }
+
+
     // 初始化地图
     var map = new TMap.Map('container', {
         zoom: 16,
         center
     });
 
+    // 添加坐标点标记到地图---------开始-------------------
+    var pointMarkerLayer = new TMap.MultiMarker({
+        map: map,
+        styles: {
+            'point-style': new TMap.MarkerStyle({
+                width: 12,
+                height: 12,
+                anchor: { x: 6, y: 6 },
+                src: 'https://mapapi.qq.com/web/miniprogram/demoCenter/images/marker-point.png'
+            })
+        },
+        geometries: pointMarkers
+    });
+
+    // 在变量声明区域添加信息窗口实例变量
+    var currentInfoWindow = null;
+
+    // 修改鼠标悬停事件监听
+    pointMarkerLayer.on('mouseover', function(evt) {
+        var markerId = evt.geometry.id;
+        if (pointInfos[markerId]) {
+            // 如果已有信息窗口，先关闭它
+            if (currentInfoWindow) {
+                currentInfoWindow.setMap(null);
+            }
+            // 创建信息窗口显示时间信息
+            currentInfoWindow = new TMap.InfoWindow({
+                map: map,
+                position: evt.geometry.position,
+                content: pointInfos[markerId]
+            });
+        }
+    });
+
+    // 修改鼠标离开事件监听
+    pointMarkerLayer.on('mouseout', function(evt) {
+        // 关闭信息窗口
+        if (currentInfoWindow) {
+            currentInfoWindow.setMap(null);
+            currentInfoWindow = null;
+        }
+    });
+    // 添加坐标点标记到地图---------结束-------------------
+
+
     var isMoving = false;
     var roation;
     var position;
@@ -329,6 +392,8 @@
         document.querySelectorAll('.info p')[1].innerHTML =
             '当前限制小车最大移动距离：' + limitDistance + '米';
     };
+
+
 </script>
 </body>
 </html>