diff --git a/backend/src/main/java/com/taxi/controller/OrderController.java b/backend/src/main/java/com/taxi/controller/OrderController.java
index 75554369..cd069900 100644
--- a/backend/src/main/java/com/taxi/controller/OrderController.java
+++ b/backend/src/main/java/com/taxi/controller/OrderController.java
@@ -46,7 +46,7 @@ public class OrderController {
     public Result<Long> createOrder(@RequestBody CreateOrderRequest request) {
         System.out.println("=== 订单创建请求到达控制器 ===");
         System.out.println("请求参数: " + request);
-        
+
         try {
             System.out.println("=== 创建实时订单请求 ===");
             System.out.println("接收到的请求数据:");
@@ -56,28 +56,28 @@ public Result<Long> createOrder(@RequestBody CreateOrderRequest request) {
             System.out.println("  预估距离: " + request.getEstimatedDistance());
             System.out.println("  预估时长: " + request.getEstimatedDuration());
             System.out.println("  预估费用: " + request.getEstimatedFare());
-            
+
             Order order = new Order();
             order.setOrderNumber(generateOrderNumber());
             order.setPassengerId(request.getPassengerId());
             order.setPickupAddress(request.getPickupAddress());
             order.setPickupLatitude(request.getPickupLatitude());
             order.setPickupLongitude(request.getPickupLongitude());
-            
+
             order.setDestinationAddress(request.getDestinationAddress());
             order.setDestinationLatitude(request.getDestinationLatitude());
             order.setDestinationLongitude(request.getDestinationLongitude());
-            
+
             // 设置距离、时长和费用信息
             order.setEstimatedDistance(request.getEstimatedDistance());
             order.setEstimatedDuration(request.getEstimatedDuration());
             order.setEstimatedFare(request.getEstimatedFare());
-            
+
             System.out.println("设置到Order对象的数据:");
             System.out.println("  预估距离: " + order.getEstimatedDistance());
             System.out.println("  预估时长: " + order.getEstimatedDuration());
             System.out.println("  预估费用: " + order.getEstimatedFare());
-            
+
             order.setOrderType("REAL_TIME");
             order.setCreatedAt(LocalDateTime.now());
             order.setUpdatedAt(LocalDateTime.now());
@@ -85,7 +85,7 @@ public Result<Long> createOrder(@RequestBody CreateOrderRequest request) {
             System.out.println("准备调用 orderService.createOrder");
             orderService.createOrder(order);
             System.out.println("orderService.createOrder 调用成功");
-            
+
             // 返回订单ID而不是订单号，前端需要用ID来进行后续操作
             return Result.success(order.getId());
         } catch (Exception e) {
@@ -104,35 +104,35 @@ public Result<String> acceptOrder(@PathVariable Long orderId, @RequestParam Long
             if (order == null) {
                 return Result.error("订单不存在");
             }
-            
+
             if (!"PENDING".equals(order.getStatus())) {
                 return Result.error("订单状态不允许接单，当前状态: " + order.getStatus());
             }
-            
+
             // 查询司机
             Driver driver = driverMapper.selectById(driverId);
             if (driver == null) {
                 return Result.error("司机不存在");
             }
-            
+
             if (!driver.getIsOnline()) {
                 return Result.error("司机不在线");
             }
-            
+
             // 检查司机是否已有进行中的订单
             List<Order> driverOrders = orderMapper.selectByDriverId(driverId);
             boolean hasActiveOrder = driverOrders.stream()
-                .anyMatch(o -> "ASSIGNED".equals(o.getStatus()) || "PICKUP".equals(o.getStatus()) || "IN_PROGRESS".equals(o.getStatus()));
-            
+                    .anyMatch(o -> "ASSIGNED".equals(o.getStatus()) || "PICKUP".equals(o.getStatus()) || "IN_PROGRESS".equals(o.getStatus()));
+
             if (hasActiveOrder) {
                 return Result.error("司机正在处理其他订单");
             }
-            
+
             // 分配订单给司机
             order.setDriverId(driverId);
             order.setStatus("ASSIGNED");
             orderMapper.updateById(order);
-            
+
             return Result.success("接单成功");
         } catch (Exception e) {
             return Result.error("接单失败: " + e.getMessage());
@@ -187,48 +187,55 @@ public Result<String> cancelOrderByPassenger(@PathVariable Long orderId) {
         try {
             System.out.println("=== 乘客取消订单请求 ===");
             System.out.println("订单ID: " + orderId);
-            
+
             Order order = orderMapper.selectById(orderId);
             if (order == null) {
                 System.out.println("❌ 订单不存在: " + orderId);
                 return Result.error("订单不存在");
             }
-            
+
             System.out.println("✅ 找到订单: " + order.getOrderNumber() + ", 状态: " + order.getStatus());
-            
+
             // 乘客只能在行程开始前取消订单
             if ("IN_PROGRESS".equals(order.getStatus()) || "COMPLETED".equals(order.getStatus()) || "CANCELLED".equals(order.getStatus())) {
                 return Result.error("订单已开始行程或已完成，无法取消");
             }
-            
+
             // 更新订单状态
             order.setStatus("CANCELLED");
             order.setCancelReason("乘客取消");
             order.setUpdatedAt(LocalDateTime.now());
             orderMapper.updateById(order);
-            
-            // 如果订单已分配给司机，需要释放司机
+
+            // 如果订单已分配给司机，需要释放司机并通知
             if (order.getDriverId() != null) {
+                System.out.println("✅ 订单已分配给司机 " + order.getDriverId() + "，开始释放司机并发送通知");
+
+                // 释放司机状态
                 driverRedisService.markDriverFree(order.getDriverId());
-                
-                // 通知司机订单已被乘客取消
+                System.out.println("✅ 司机 " + order.getDriverId() + " 状态已释放");
+
+                // 通知司机订单已被乘客取消（增强版通知）
                 webSocketNotificationService.notifyDriverOrderCancelled(
-                    order.getDriverId(), 
-                    orderId, 
-                    "乘客已取消订单"
+                        order.getDriverId(),
+                        orderId,
+                        "乘客已取消订单，请清理路线规划"
                 );
+                System.out.println("✅ 已通知司机 " + order.getDriverId() + " 订单取消");
+            } else {
+                System.out.println("📋 订单未分配给司机，无需释放司机状态");
             }
-            
+
             // 推送取消状态给乘客
             if (order.getPassengerId() != null) {
                 webSocketNotificationService.notifyPassengerOrderStatusChange(
-                    order.getPassengerId(), 
-                    orderId, 
-                    "CANCELLED", 
-                    "订单已取消"
+                        order.getPassengerId(),
+                        orderId,
+                        "CANCELLED",
+                        "订单已取消"
                 );
             }
-            
+
             return Result.success("订单取消成功");
         } catch (Exception e) {
             return Result.error("取消订单失败: " + e.getMessage());
@@ -243,43 +250,43 @@ public Result<String> cancelOrderByDriver(@PathVariable Long orderId, @RequestPa
             if (order == null) {
                 return Result.error("订单不存在");
             }
-            
+
             // 验证司机权限
             if (!driverId.equals(order.getDriverId())) {
                 return Result.error("无权取消此订单");
             }
-            
+
             // 司机只能在行程开始前取消订单
             if ("IN_PROGRESS".equals(order.getStatus()) || "COMPLETED".equals(order.getStatus()) || "CANCELLED".equals(order.getStatus())) {
                 return Result.error("订单已开始行程或已完成，无法取消");
             }
-            
+
             // 更新订单状态为待重新分配
             order.setDriverId(null); // 清除司机分配
             order.setStatus("PENDING"); // 重新设为待分配状态
             order.setCancelReason("司机取消，重新分配中");
             order.setUpdatedAt(LocalDateTime.now());
             orderMapper.updateById(order);
-            
+
             // 释放司机状态
             driverRedisService.markDriverFree(driverId);
-            
+
             // 将该司机加入此订单的黑名单，避免重复分配
             driverRedisService.addDriverToOrderBlacklist(orderId, driverId);
-            
+
             // 通知乘客订单正在重新分配
             if (order.getPassengerId() != null) {
                 webSocketNotificationService.notifyPassengerOrderStatusChange(
-                    order.getPassengerId(), 
-                    orderId, 
-                    "PENDING", 
-                    "司机已取消，正在为您重新寻找司机..."
+                        order.getPassengerId(),
+                        orderId,
+                        "PENDING",
+                        "司机已取消，正在为您重新寻找司机..."
                 );
             }
-            
+
             // 重新进入订单分派队列
             orderDispatchService.dispatchOrder(orderId);
-            
+
             return Result.success("订单已取消并重新分配");
         } catch (Exception e) {
             return Result.error("取消订单失败: " + e.getMessage());
@@ -292,28 +299,28 @@ public Result<String> payOrder(@PathVariable Long orderId, @RequestParam String
         try {
             System.out.println("=== 乘客支付订单请求 ===");
             System.out.println("订单ID: " + orderId + ", 支付方式: " + paymentMethod);
-            
+
             Order order = orderMapper.selectById(orderId);
             if (order == null) {
                 return Result.error("订单不存在");
             }
-            
+
             if (!"COMPLETED".equals(order.getStatus())) {
                 return Result.error("订单未完成，无法支付");
             }
-            
+
             if ("PAID".equals(order.getPaymentStatus())) {
                 return Result.error("订单已支付，请勿重复支付");
             }
-            
+
             // 更新支付状态
             order.setPaymentStatus("PAID");
             order.setPaymentMethod(paymentMethod);
             order.setUpdatedAt(LocalDateTime.now());
             orderMapper.updateById(order);
-            
+
             System.out.println("✅ 订单支付成功: " + order.getOrderNumber());
-            
+
             return Result.success("支付成功");
         } catch (Exception e) {
             System.err.println("❌ 订单支付失败: " + e.getMessage());
@@ -327,14 +334,14 @@ public Result<List<Order>> getPassengerOrderHistory(@PathVariable Long passenger
         try {
             System.out.println("=== 获取乘客历史订单 ===");
             System.out.println("乘客ID: " + passengerId);
-            
+
             List<Order> orders = orderMapper.selectByPassengerId(passengerId);
-            
+
             // 按创建时间倒序排列
             orders.sort((o1, o2) -> o2.getCreatedAt().compareTo(o1.getCreatedAt()));
-            
+
             System.out.println("✅ 找到 " + orders.size() + " 个历史订单");
-            
+
             return Result.success(orders);
         } catch (Exception e) {
             System.err.println("❌ 获取历史订单失败: " + e.getMessage());
@@ -347,11 +354,11 @@ public Result<List<Order>> getPassengerOrderHistory(@PathVariable Long passenger
     public Result<Boolean> checkUnpaidOrders(@PathVariable Long passengerId) {
         try {
             List<Order> orders = orderMapper.selectByPassengerId(passengerId);
-            
+
             boolean hasUnpaid = orders.stream()
-                .anyMatch(order -> "COMPLETED".equals(order.getStatus()) && 
-                                 !"PAID".equals(order.getPaymentStatus()));
-            
+                    .anyMatch(order -> "COMPLETED".equals(order.getStatus()) &&
+                            !"PAID".equals(order.getPaymentStatus()));
+
             return Result.success(hasUnpaid);
         } catch (Exception e) {
             return Result.error("检查未支付订单失败: " + e.getMessage());
@@ -367,11 +374,11 @@ public Result<List<Order>> getUnpaidOrders(HttpServletRequest request) {
             if (token != null && token.startsWith("Bearer ")) {
                 token = token.substring(7);
             }
-            
+
             // 这里应该从token中解析用户ID，简化处理
             // 实际项目中需要实现JWT解析
             System.out.println("=== 获取未支付订单列表 ===");
-            
+
             // 临时方案：从请求参数或header中获取passengerId
             String passengerIdStr = request.getParameter("passengerId");
             if (passengerIdStr == null) {
@@ -379,15 +386,15 @@ public Result<List<Order>> getUnpaidOrders(HttpServletRequest request) {
                 // 这里需要根据实际的用户认证机制来获取当前用户ID
                 return Result.error("无法获取用户信息");
             }
-            
+
             Long passengerId = Long.parseLong(passengerIdStr);
             List<Order> allOrders = orderMapper.selectByPassengerId(passengerId);
-            
+
             List<Order> unpaidOrders = allOrders.stream()
-                .filter(order -> "COMPLETED".equals(order.getStatus()) && 
-                               !"PAID".equals(order.getPaymentStatus()))
-                .collect(Collectors.toList());
-            
+                    .filter(order -> "COMPLETED".equals(order.getStatus()) &&
+                            !"PAID".equals(order.getPaymentStatus()))
+                    .collect(Collectors.toList());
+
             System.out.println("找到 " + unpaidOrders.size() + " 个未支付订单");
             return Result.success(unpaidOrders);
         } catch (Exception e) {
@@ -403,25 +410,25 @@ public Result<Order> getCurrentOrder(@PathVariable Long passengerId) {
         try {
             System.out.println("=== 获取乘客当前进行中的订单 ===");
             System.out.println("乘客ID: " + passengerId);
-            
+
             List<Order> orders = orderMapper.selectByPassengerId(passengerId);
-            
+
             // 查找进行中的订单（状态为SCHEDULED, PENDING, ASSIGNED, PICKUP, IN_PROGRESS）
             Order currentOrder = orders.stream()
-                .filter(order -> "SCHEDULED".equals(order.getStatus()) ||
-                               "PENDING".equals(order.getStatus()) || 
-                               "ASSIGNED".equals(order.getStatus()) ||
-                               "PICKUP".equals(order.getStatus()) ||
-                               "IN_PROGRESS".equals(order.getStatus()))
-                .findFirst()
-                .orElse(null);
-            
+                    .filter(order -> "SCHEDULED".equals(order.getStatus()) ||
+                            "PENDING".equals(order.getStatus()) ||
+                            "ASSIGNED".equals(order.getStatus()) ||
+                            "PICKUP".equals(order.getStatus()) ||
+                            "IN_PROGRESS".equals(order.getStatus()))
+                    .findFirst()
+                    .orElse(null);
+
             if (currentOrder != null) {
                 System.out.println("找到进行中的订单: " + currentOrder.getId() + ", 状态: " + currentOrder.getStatus());
             } else {
                 System.out.println("没有找到进行中的订单");
             }
-            
+
             return Result.success(currentOrder);
         } catch (Exception e) {
             System.err.println("获取当前订单失败: " + e.getMessage());
@@ -438,26 +445,26 @@ public Result<String> confirmPickup(@PathVariable Long orderId) {
             if (order == null) {
                 return Result.error("订单不存在");
             }
-            
+
             if (!"ASSIGNED".equals(order.getStatus())) {
                 return Result.error("订单状态不正确，当前状态: " + order.getStatus());
             }
-            
+
             order.setStatus("PICKUP");
             order.setPickupTime(LocalDateTime.now());
             order.setUpdatedAt(LocalDateTime.now());
             orderMapper.updateById(order);
-            
+
             // 推送确认到达状态给乘客
             if (order.getPassengerId() != null) {
                 webSocketNotificationService.notifyPassengerOrderStatusChange(
-                    order.getPassengerId(), 
-                    orderId, 
-                    "PICKUP", 
-                    "司机已到达上车点，请准备上车"
+                        order.getPassengerId(),
+                        orderId,
+                        "PICKUP",
+                        "司机已到达上车点，请准备上车"
                 );
             }
-            
+
             return Result.success("确认到达成功");
         } catch (Exception e) {
             return Result.error("确认到达失败: " + e.getMessage());
@@ -472,25 +479,25 @@ public Result<String> startTrip(@PathVariable Long orderId) {
             if (order == null) {
                 return Result.error("订单不存在");
             }
-            
+
             if (!"PICKUP".equals(order.getStatus())) {
                 return Result.error("订单状态不正确，当前状态: " + order.getStatus());
             }
-            
+
             order.setStatus("IN_PROGRESS");
             order.setUpdatedAt(LocalDateTime.now());
             orderMapper.updateById(order);
-            
+
             // 推送行程开始状态给乘客
             if (order.getPassengerId() != null) {
                 webSocketNotificationService.notifyPassengerOrderStatusChange(
-                    order.getPassengerId(), 
-                    orderId, 
-                    "IN_PROGRESS", 
-                    "行程已开始，请系好安全带"
+                        order.getPassengerId(),
+                        orderId,
+                        "IN_PROGRESS",
+                        "行程已开始，请系好安全带"
                 );
             }
-            
+
             return Result.success("行程开始成功");
         } catch (Exception e) {
             return Result.error("开始行程失败: " + e.getMessage());
@@ -505,37 +512,37 @@ public Result<String> completeTrip(@PathVariable Long orderId) {
             if (order == null) {
                 return Result.error("订单不存在");
             }
-            
+
             if (!"IN_PROGRESS".equals(order.getStatus())) {
                 return Result.error("订单状态不正确，当前状态: " + order.getStatus());
             }
-            
+
             order.setStatus("COMPLETED");
             order.setCompletionTime(LocalDateTime.now());
             order.setUpdatedAt(LocalDateTime.now());
-            
+
             // 计算实际费用（这里简化处理，使用预估费用）
             if (order.getActualFare() == null) {
                 order.setActualFare(order.getEstimatedFare());
             }
-            
+
             orderMapper.updateById(order);
-            
+
             // 标记司机为空闲状态
             if (order.getDriverId() != null) {
                 driverRedisService.markDriverFree(order.getDriverId());
             }
-            
+
             // 推送订单完成状态给乘客，提示需要支付
             if (order.getPassengerId() != null) {
                 webSocketNotificationService.notifyPassengerOrderStatusChange(
-                    order.getPassengerId(), 
-                    orderId, 
-                    "COMPLETED", 
-                    "行程已完成，请完成支付"
+                        order.getPassengerId(),
+                        orderId,
+                        "COMPLETED",
+                        "行程已完成，请完成支付"
                 );
             }
-            
+
             return Result.success("订单完成成功");
         } catch (Exception e) {
             return Result.error("完成订单失败: " + e.getMessage());
diff --git a/backend/target/classes/com/taxi/controller/OrderController.class b/backend/target/classes/com/taxi/controller/OrderController.class
index 4d438b6b..46408844 100644
Binary files a/backend/target/classes/com/taxi/controller/OrderController.class and b/backend/target/classes/com/taxi/controller/OrderController.class differ
diff --git a/backend/uploads/avatars/AliPay.jpg b/backend/uploads/avatars/AliPay.jpg
new file mode 100644
index 00000000..8764c426
Binary files /dev/null and b/backend/uploads/avatars/AliPay.jpg differ
diff --git a/backend/uploads/avatars/Visa.jpg b/backend/uploads/avatars/Visa.jpg
new file mode 100644
index 00000000..6c47082d
Binary files /dev/null and b/backend/uploads/avatars/Visa.jpg differ
diff --git a/backend/uploads/avatars/WeChat.jpg b/backend/uploads/avatars/WeChat.jpg
new file mode 100644
index 00000000..71f8ddfb
Binary files /dev/null and b/backend/uploads/avatars/WeChat.jpg differ
diff --git a/backend/uploads/avatars/car.png b/backend/uploads/avatars/car.png
new file mode 100644
index 00000000..22af165c
Binary files /dev/null and b/backend/uploads/avatars/car.png differ
diff --git a/frontend/PASSENGER_MAP_FIXES.md b/frontend/PASSENGER_MAP_FIXES.md
new file mode 100644
index 00000000..00110d1f
--- /dev/null
+++ b/frontend/PASSENGER_MAP_FIXES.md
@@ -0,0 +1,303 @@
+# 🗺️ 乘客端地图修复总结
+
+## 🎯 修复的问题
+
+### 1. 页面切换后起始点和终点图标消失
+**问题描述**: 从其他页面切换回乘客地图页面时，上车点和目的地标记消失，只剩下路线。
+
+**根本原因**: 页面激活时没有恢复地图标记，只检查了订单状态。
+
+**修复方案**: 
+- 在`initializePassengerMap`函数中添加标记恢复逻辑
+- 新增`restoreMapMarkers`函数来恢复所有地图标记
+- 在页面重新激活时调用标记恢复函数
+
+### 2. 取消订单后旧路径没有清除
+**问题描述**: 取消订单后，地图上仍然显示司机路径和乘客路径，没有被清理干净。
+
+**根本原因**: `resetOrderState`函数的清理逻辑不够彻底，只清理了部分路径。
+
+**修复方案**:
+- 增强`resetOrderState`函数，添加完整的路径清理逻辑
+- 清理所有红色司机路径（通过颜色识别）
+- 恢复乘客路径为蓝色
+
+### 3. 司机位置更新后旧路径没有清除
+**问题描述**: 司机位置更新时，旧的司机路径没有被清除，导致地图上出现多条路径。
+
+**根本原因**: `updateDriverLocation`函数在更新位置时没有先清理旧路径。
+
+**修复方案**:
+- 在`updateDriverLocation`函数开始时调用`clearAllDriverRoutes`
+- 新增`clearAllDriverRoutes`函数来彻底清理所有司机路径
+- 确保先清理再规划新路径的顺序
+
+## 🔧 修复代码
+
+### 1. 标记恢复函数
+```javascript
+// 恢复地图标记（修复页面切换后标记消失的问题）
+const restoreMapMarkers = () => {
+  console.log('🔄 恢复地图标记...');
+  
+  if (!map) {
+    console.log('⚠️ 地图未初始化，跳过标记恢复');
+    return;
+  }
+  
+  // 恢复上车点标记
+  if (currentPosition.value && !pickupMarker) {
+    console.log('📍 恢复上车点标记');
+    pickupMarker = new window.AMap.Marker({
+      position: [currentPosition.value.lng, currentPosition.value.lat],
+      map,
+      icon: new window.AMap.Icon({
+        image: 'https://webapi.amap.com/theme/v1.3/markers/n/start.png',
+        size: new window.AMap.Size(25, 34),
+        imageSize: new window.AMap.Size(25, 34)
+      }),
+      title: '上车点',
+      draggable: !currentOrder.value
+    });
+    
+    // 重新绑定拖拽事件
+    pickupMarker.on("dragend", handlePickupDrag);
+  }
+  
+  // 恢复目的地标记
+  if (destinationPosition.value && !destMarker) {
+    console.log('🎯 恢复目的地标记');
+    destMarker = new window.AMap.Marker({
+      position: [destinationPosition.value.lng, destinationPosition.value.lat],
+      map,
+      icon: new window.AMap.Icon({
+        image: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png',
+        size: new window.AMap.Size(25, 34),
+        imageSize: new window.AMap.Size(25, 34)
+      }),
+      title: '目的地'
+    });
+  }
+  
+  // 恢复司机标记（如果有当前订单）
+  if (currentOrder.value && driverInfo.value && !driverMarker) {
+    console.log('🚗 恢复司机标记');
+    driverMarker = new window.AMap.Marker({
+      position: [driverInfo.value.longitude, driverInfo.value.latitude],
+      map,
+      icon: new window.AMap.Icon({
+        image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
+        size: new window.AMap.Size(25, 34),
+        imageSize: new window.AMap.Size(25, 34)
+      }),
+      title: '司机位置'
+    });
+  }
+  
+  console.log('✅ 地图标记恢复完成');
+};
+```
+
+### 2. 路径清理函数
+```javascript
+// 清理所有司机路径（修复司机位置更新后旧路径没有清除的问题）
+const clearAllDriverRoutes = () => {
+  console.log('🧹 清理所有司机路径...');
+  
+  // 清理全局司机路径变量
+  if (window.driverRouteLine) {
+    map.remove(window.driverRouteLine);
+    window.driverRouteLine = null;
+    console.log('🗑️ 清理了全局司机路径变量');
+  }
+  
+  // 清理所有红色路径（司机路径）
+  const allOverlays = map.getAllOverlays();
+  let cleanedCount = 0;
+  
+  allOverlays.forEach(overlay => {
+    if (overlay.CLASS_NAME === 'AMap.Polyline') {
+      try {
+        const options = overlay.getOptions();
+        if (options && options.strokeColor === '#FF6B6B') {
+          map.remove(overlay);
+          cleanedCount++;
+        }
+      } catch (error) {
+        // 忽略错误
+      }
+    }
+  });
+  
+  console.log(`🗑️ 清理了 ${cleanedCount} 条红色司机路径`);
+};
+```
+
+### 3. 增强的订单重置函数
+```javascript
+// 重置订单状态（增强版 - 修复取消订单后旧路径没有清除的问题）
+const resetOrderState = () => {
+  console.log("🔄 重置订单状态");
+
+  orderStore.clearOrderState();
+  stopDriverTracking();
+
+  // 清理司机标记
+  if (driverMarker) {
+    map.remove(driverMarker);
+    driverMarker = null;
+    console.log('🗑️ 已清理司机标记');
+  }
+
+  // 清理所有司机路径
+  clearAllDriverRoutes();
+
+  // 恢复乘客路径为蓝色
+  if (routeLine) {
+    routeLine.setOptions({
+      strokeColor: "#409EFF",
+      strokeWeight: 6,
+      strokeOpacity: 0.8,
+    });
+    console.log('🔄 乘客路径已恢复为蓝色');
+  }
+
+  // 重置状态
+  window.routeInitialized = false;
+  canOrder.value = true;
+  isCalling.value = false;
+
+  // 恢复上车点标记的可拖拽状态
+  updatePickupMarkerDraggable();
+
+  // 重新检查未支付订单
+  orderStore.checkUnpaidOrders();
+  
+  console.log('✅ 订单状态重置完成');
+};
+```
+
+### 4. 增强的司机位置更新函数
+```javascript
+const updateDriverLocation = (data) => {
+  console.log("📍 更新司机位置:", data);
+
+  if (data.driverId === driverInfo.value?.id) {
+    // 先清理所有旧的司机路径（修复司机位置更新后旧路径没有清除的问题）
+    clearAllDriverRoutes();
+    
+    // 通过store更新司机位置信息
+    if (driverInfo.value) {
+      const updatedDriver = {
+        ...driverInfo.value,
+        latitude: data.latitude,
+        longitude: data.longitude,
+      };
+      orderStore.setDriverInfo(updatedDriver);
+      console.log("✅ 司机位置已通过store更新");
+    }
+
+    // 更新司机标记位置
+    if (driverMarker) {
+      driverMarker.setPosition([data.longitude, data.latitude]);
+      driverMarker.setAnimation("AMAP_ANIMATION_BOUNCE");
+      setTimeout(() => {
+        if (driverMarker) {
+          driverMarker.setAnimation("AMAP_ANIMATION_NONE");
+        }
+      }, 1000);
+
+      // 重新规划路径
+      if (orderStatus.value === "IN_PROGRESS") {
+        currentPosition.value = {
+          lng: data.longitude,
+          lat: data.latitude,
+        };
+        showRoute();
+      } else {
+        updateDriverRoute(data.latitude, data.longitude);
+      }
+
+      updateSharedMapView(false);
+    } else {
+      showDriverOnMap(data.latitude, data.longitude);
+      updateSharedMapView(true);
+    }
+  }
+};
+```
+
+## 🧪 测试验证
+
+### 测试工具
+- `frontend/test-passenger-map-fixes.html` - 专门的修复测试页面
+
+### 测试场景
+
+#### 1. 页面切换测试
+1. 在乘客端创建订单，确保有起始点和终点标记
+2. 切换到其他页面（如个人资料页面）
+3. 切换回乘客地图页面
+4. **预期结果**: 所有标记都应该正确显示
+
+#### 2. 订单取消测试
+1. 创建订单，等待司机接单
+2. 确保地图上有司机路径（红色）和乘客路径（蓝色）
+3. 取消订单
+4. **预期结果**: 司机路径和司机标记被清除，乘客路径恢复为蓝色
+
+#### 3. 司机位置更新测试
+1. 有活跃订单时，观察司机路径
+2. 司机移动位置（可以通过禁用/启用位置权限模拟）
+3. **预期结果**: 旧的司机路径被清除，新的司机路径被绘制
+
+### 调试命令
+```javascript
+// 检查地图状态
+console.log('地图状态:', {
+  mapExists: !!window.map,
+  pickupMarker: !!window.pickupMarker,
+  destMarker: !!window.destMarker,
+  driverMarker: !!window.driverMarker,
+  routeLine: !!window.routeLine,
+  driverRouteLine: !!window.driverRouteLine
+});
+
+// 手动恢复标记
+if (typeof window.restoreMapMarkers === 'function') {
+  window.restoreMapMarkers();
+}
+
+// 手动清理司机路径
+if (typeof window.clearAllDriverRoutes === 'function') {
+  window.clearAllDriverRoutes();
+}
+
+// 手动重置订单状态
+if (typeof window.resetOrderState === 'function') {
+  window.resetOrderState();
+}
+```
+
+## ✅ 修复效果
+
+### 修复前的问题
+- ❌ 页面切换后标记消失
+- ❌ 取消订单后路径残留
+- ❌ 司机位置更新后路径累积
+
+### 修复后的效果
+- ✅ 页面切换后所有标记正确恢复
+- ✅ 取消订单后所有司机相关元素被清理
+- ✅ 司机位置更新时先清理旧路径再绘制新路径
+- ✅ 路径显示一致性得到保证
+- ✅ 用户体验显著改善
+
+## 🔮 后续优化建议
+
+1. **性能优化**: 考虑使用防抖机制来减少频繁的路径清理和重绘
+2. **状态管理**: 进一步完善地图状态的统一管理
+3. **错误处理**: 增加更多的错误处理和恢复机制
+4. **用户反馈**: 添加路径更新时的视觉反馈（如加载动画）
+
+这些修复确保了乘客端地图的稳定性和一致性，解决了用户体验中的关键问题。
\ No newline at end of file
diff --git a/frontend/public/avatars/AliPay.jpg b/frontend/public/avatars/AliPay.jpg
new file mode 100644
index 00000000..8764c426
Binary files /dev/null and b/frontend/public/avatars/AliPay.jpg differ
diff --git a/frontend/public/avatars/Visa.jpg b/frontend/public/avatars/Visa.jpg
new file mode 100644
index 00000000..6c47082d
Binary files /dev/null and b/frontend/public/avatars/Visa.jpg differ
diff --git a/frontend/public/avatars/WeChat.jpg b/frontend/public/avatars/WeChat.jpg
new file mode 100644
index 00000000..71f8ddfb
Binary files /dev/null and b/frontend/public/avatars/WeChat.jpg differ
diff --git a/frontend/src/config/map-fallback.js b/frontend/src/config/map-fallback.js
new file mode 100644
index 00000000..e69de29b
diff --git a/frontend/src/stores/driver.js b/frontend/src/stores/driver.js
index 476ab267..69d27b85 100644
--- a/frontend/src/stores/driver.js
+++ b/frontend/src/stores/driver.js
@@ -275,6 +275,27 @@ export const useDriverStore = defineStore("driver", () => {
     console.log("🔄 订单状态已清除");
   };
 
+  // 清除当前订单
+  const clearCurrentOrder = () => {
+    currentOrder.value = null;
+    saveDriverState();
+    console.log("🔄 当前订单已清除");
+  };
+
+  // 设置导航信息
+  const setNavigationInfo = (navInfo) => {
+    navigationInfo.value = navInfo;
+    saveDriverState();
+    console.log("🧭 导航信息已设置:", navInfo);
+  };
+
+  // 清除导航信息
+  const clearNavigationInfo = () => {
+    navigationInfo.value = null;
+    saveDriverState();
+    console.log("🔄 导航信息已清除");
+  };
+
   // 只清理待处理订单，保留当前订单
   const clearPendingOrders = () => {
     pendingOrders.value = [];
@@ -751,6 +772,9 @@ export const useDriverStore = defineStore("driver", () => {
     restoreDriverState,
     clearDriverState,
     clearOrderState,
+    clearCurrentOrder,
+    setNavigationInfo,
+    clearNavigationInfo,
     clearPendingOrders,
     initDriverState,
     getCurrentOrder,
diff --git a/frontend/src/views/DriverMap.vue b/frontend/src/views/DriverMap.vue
index d6fb40cf..fc70d952 100644
--- a/frontend/src/views/DriverMap.vue
+++ b/frontend/src/views/DriverMap.vue
@@ -152,15 +152,21 @@
       </div>
     </div>
 
-    <!-- 导航信息 -->
-    <div v-if="navigationInfo" class="navigation-panel">
-      <div class="nav-header">
-        <span>{{ navigationInfo.instruction }}</span>
-        <el-button @click="stopNavigation" size="small">停止导航</el-button>
+    <!-- 导航指示面板 -->
+    <div v-if="currentOrder && navigationInfo" class="navigation-guidance-panel">
+      <div class="current-instruction">
+        <div class="instruction-icon">{{ navigationInfo.icon || '🧭' }}</div>
+        <div class="instruction-content">
+          <div class="instruction-text">{{ navigationInfo.instruction }}</div>
+          <div class="instruction-distance">{{ navigationInfo.nextDistance || navigationInfo.distance }}</div>
+        </div>
       </div>
-      <div class="nav-details">
-        <span>距离: {{ navigationInfo.distance }}</span>
-        <span>预计: {{ navigationInfo.duration }}</span>
+      <div class="route-summary">
+        <div class="route-stats">
+          <span class="total-distance">总距离: {{ navigationInfo.distance }}</span>
+          <span class="total-time">预计: {{ navigationInfo.duration }}</span>
+        </div>
+        <el-button @click="stopNavigation" size="small" type="info" plain>停止导航</el-button>
       </div>
     </div>
   </div>
@@ -215,6 +221,95 @@ const statusLoading = ref(false)
 const cancelLoading = ref(false)
 const orderTimers = new Map() // 每个订单的倒计时定时器
 let navigationTimer = null
+let locationTimer = null // 位置上报定时器
+let frequentPushTimer = null // 频繁位置推送定时器
+
+// 定时器管理器
+const TimerManager = {
+  // 清理所有定时器
+  clearAll() {
+    console.log('🧹 清理所有定时器...')
+    
+    // 清理导航定时器
+    if (navigationTimer) {
+      clearInterval(navigationTimer)
+      navigationTimer = null
+      console.log('✅ 已清理导航定时器')
+    }
+    
+    // 清理位置定时器
+    if (locationTimer) {
+      clearInterval(locationTimer)
+      locationTimer = null
+      console.log('✅ 已清理位置定时器')
+    }
+    
+    // 清理频繁推送定时器
+    if (frequentPushTimer) {
+      clearInterval(frequentPushTimer)
+      frequentPushTimer = null
+      console.log('✅ 已清理频繁推送定时器')
+    }
+    
+    // 清理订单倒计时定时器
+    orderTimers.forEach((timer, orderId) => {
+      clearInterval(timer)
+      console.log('✅ 已清理订单定时器:', orderId)
+    })
+    orderTimers.clear()
+    
+    console.log('✅ 所有定时器清理完成')
+  },
+  
+  // 设置位置上报定时器
+  setLocationTimer(callback, interval = 30000) {
+    // 先清理旧的定时器
+    if (locationTimer) {
+      clearInterval(locationTimer)
+      locationTimer = null
+    }
+    
+    locationTimer = setInterval(callback, interval)
+    console.log(`🕐 位置上报定时器已设置: ${interval}ms`)
+    return locationTimer
+  },
+  
+  // 设置导航定时器
+  setNavigationTimer(callback, interval = 5000) {
+    // 先清理旧的定时器
+    if (navigationTimer) {
+      clearInterval(navigationTimer)
+      navigationTimer = null
+    }
+    
+    navigationTimer = setInterval(callback, interval)
+    console.log(`🧭 导航定时器已设置: ${interval}ms`)
+    return navigationTimer
+  },
+  
+  // 设置频繁推送定时器
+  setFrequentPushTimer(callback, interval = 10000) {
+    // 先清理旧的定时器
+    if (frequentPushTimer) {
+      clearInterval(frequentPushTimer)
+      frequentPushTimer = null
+    }
+    
+    frequentPushTimer = setInterval(callback, interval)
+    console.log(`📡 频繁推送定时器已设置: ${interval}ms`)
+    return frequentPushTimer
+  },
+  
+  // 获取当前定时器状态
+  getStatus() {
+    return {
+      navigationTimer: !!navigationTimer,
+      locationTimer: !!locationTimer,
+      frequentPushTimer: !!frequentPushTimer,
+      orderTimers: orderTimers.size
+    }
+  }
+}
 
 // WebSocket连接
 let stompClient = null
@@ -249,6 +344,10 @@ const initializeDriverMap = async (isReactivation = false) => {
     if (currentOrder.value) {
       console.log('🔄 检测到进行中的订单，确保导航正常...')
       restoreOrderNavigation()
+      
+      // 🔑 关键修复：恢复频繁位置推送
+      console.log('🔄 恢复频繁位置推送定时器...')
+      startFrequentLocationPush()
     }
     
     // 重新连接WebSocket（如果需要）
@@ -283,6 +382,10 @@ const initializeDriverMap = async (isReactivation = false) => {
       console.log('🔄 检测到进行中的订单，恢复路径规划...')
       console.log('📋 订单信息:', currentOrder.value)
       restoreOrderNavigation()
+      
+      // 🔑 关键修复：恢复频繁位置推送
+      console.log('🔄 恢复频繁位置推送定时器...')
+      startFrequentLocationPush()
     } else {
       console.log('📱 没有进行中的订单，无需恢复导航')
     }
@@ -317,15 +420,8 @@ onUnmounted(() => {
     console.log('✅ 已清理司机地图消息处理函数')
   }
   
-  // 清理所有订单倒计时定时器
-  orderTimers.forEach((timer) => {
-    clearInterval(timer)
-  })
-  orderTimers.clear()
-  
-  if (navigationTimer) {
-    clearInterval(navigationTimer)
-  }
+  // 使用定时器管理器清理所有定时器
+  TimerManager.clearAll()
 })
 
 // 初始化地图
@@ -344,12 +440,81 @@ const initMap = () => {
 
 const createMap = () => {
   try {
+    console.log('🗺️ 初始化司机端地图，启用所有交互功能...')
+    
     map = new window.AMap.Map('driverMapContainer', {
-      resizeEnable: true,
+      resizeEnable: true,        // 启用地图自适应
+      dragEnable: true,          // 启用拖拽 ⭐
+      zoomEnable: true,          // 启用缩放 ⭐
+      doubleClickZoom: true,     // 启用双击缩放 ⭐
+      keyboardEnable: true,      // 启用键盘操作
+      scrollWheel: true,         // 启用滚轮缩放 ⭐
+      touchZoom: true,           // 启用触摸缩放 ⭐
+      rotateEnable: false,       // 禁用旋转（避免误操作）
+      pitchEnable: false,        // 禁用倾斜（保持2D视图）
       zoom: 16,
       center: [116.397428, 39.90923],
-      mapStyle: 'amap://styles/normal'
+      mapStyle: 'amap://styles/normal',
+      viewMode: '2D'             // 确保2D视图
+    })
+    
+    console.log('✅ 司机端地图创建成功，交互功能已启用')
+    
+    // 地图加载完成事件
+    map.on('complete', function() {
+      console.log('✅ 司机端地图加载完成')
+    })
+    
+    map.on('error', function(error) {
+      console.error('❌ 地图错误:', error)
+      ElMessage.error('地图加载失败')
+    })
+    
+    // 测试地图交互（调试用）
+    map.on('dragstart', function() {
+      console.log('🖱️ 开始拖拽地图')
+    })
+    
+    map.on('dragend', function() {
+      console.log('🖱️ 结束拖拽地图')
+    })
+    
+    map.on('zoomchange', function() {
+      console.log('🔍 地图缩放级别:', map.getZoom())
+    })
+    
+    map.on('click', function(e) {
+      console.log('🖱️ 点击地图:', e.lnglat.lng, e.lnglat.lat)
     })
+    
+    // 将地图对象暴露到全局，便于调试
+    if (typeof window !== 'undefined') {
+      window.driverMap = map
+      window.TimerManager = TimerManager
+      console.log('🔧 地图对象已暴露到 window.driverMap')
+      console.log('🔧 定时器管理器已暴露到 window.TimerManager')
+      
+      // 添加调试函数
+      window.testMapInteraction = () => {
+        console.log('🧪 测试地图交互功能:')
+        console.log('- 拖拽启用:', map.getStatus().dragEnable)
+        console.log('- 缩放启用:', map.getStatus().zoomEnable)
+        console.log('- 滚轮缩放启用:', map.getStatus().scrollWheel)
+        console.log('- 双击缩放启用:', map.getStatus().doubleClickZoom)
+        console.log('- 当前缩放级别:', map.getZoom())
+        console.log('- 当前中心点:', map.getCenter())
+        return {
+          dragEnable: map.getStatus().dragEnable,
+          zoomEnable: map.getStatus().zoomEnable,
+          scrollWheel: map.getStatus().scrollWheel,
+          doubleClickZoom: map.getStatus().doubleClickZoom,
+          zoom: map.getZoom(),
+          center: map.getCenter()
+        }
+      }
+      
+      console.log('🔧 调试函数已添加: window.testMapInteraction()')
+    }
 
     // 初始化定位
     window.AMap.plugin(['AMap.Geolocation'], () => {
@@ -361,8 +526,7 @@ const createMap = () => {
       map.addControl(geolocation)
       getCurrentLocation()
       
-      // 定期更新位置
-      setInterval(getCurrentLocation, 30000)
+      // 注意：不在这里创建定时器，位置更新由startLocationTracking统一管理
     })
 
   } catch (error) {
@@ -388,7 +552,8 @@ const getCurrentLocation = () => {
       driverStore.updateCurrentPosition({ lng, lat })
       
       console.log('✅ 位置获取成功:', lng, lat)
-      
+      // const defaultLng = (Math.random() * (125.78 - 118.85) + 118.85).toFixed(6)
+      //  const defaultLat = (Math.random() * (43.26 - 38.43) + 38.43).toFixed(6)
       // 更新司机位置标记
       updateDriverMarker(lng, lat)
       
@@ -399,22 +564,22 @@ const getCurrentLocation = () => {
     } else {
       console.error('❌ 位置获取失败:', status, result)
       
-      // 如果定位失败，使用默认位置（大连理工大学）
-      const defaultLng = 121.749849
-      const defaultLat = 39.044237
+      // 如果定位失败，使用默认位置
+      // const defaultLng = (Math.random() * (125.78 - 118.85) + 118.85).toFixed(6)
+      // const defaultLat = (Math.random() * (43.26 - 38.43) + 38.43).toFixed(6)
       
-      console.log('🔄 使用默认位置:', defaultLng, defaultLat)
-      driverStore.updateCurrentPosition({ lng: defaultLng, lat: defaultLat })
+      // console.log('🔄 使用默认位置:', defaultLng, defaultLat)
+      // driverStore.updateCurrentPosition({ lng: defaultLng, lat: defaultLat })
       
-      // 更新司机位置标记
-      updateDriverMarker(defaultLng, defaultLat)
+      // // 更新司机位置标记
+      // updateDriverMarker(defaultLng, defaultLat)
       
-      // 如果在线，上报默认位置
-      if (isOnline.value) {
-        reportLocation(defaultLng, defaultLat)
-      }
+      // // 如果在线，上报默认位置
+      // if (isOnline.value) {
+      //   reportLocation(defaultLng, defaultLat)
+      // }
       
-      ElMessage.warning('定位失败，使用默认位置')
+      // ElMessage.warning('定位失败，使用默认位置')
     }
   })
 }
@@ -432,10 +597,13 @@ const updateDriverMarker = (lng, lat) => {
       position: [lng, lat],
       map,
       icon: new window.AMap.Icon({
-        size: new window.AMap.Size(32, 32),
-        image: '🚗'
+        size: new window.AMap.Size(26, 13),
+        image: 'https://webapi.amap.com/images/car.png',
+        imageSize: new window.AMap.Size(26, 13)
       }),
-      title: '我的位置'
+      offset: new AMap.Pixel(0, 0), // 相对于基点的偏移位置
+      title: '司机位置',
+      zIndex: 100
     })
     map.setCenter([lng, lat])
   }
@@ -480,7 +648,7 @@ const handleDriverOrderUpdate = (data) => {
         // 移除待处理订单
         stopOrderCountdown(data.orderId);
         
-        // 如果是当前订单被取消，重置状态
+        // 如果是当前订单被取消，重置状态并清理地图
         if (currentOrder.value) {
           const currentOrderId = currentOrder.value.orderId || currentOrder.value.id
           const cancelledOrderId = data.orderId
@@ -488,13 +656,46 @@ const handleDriverOrderUpdate = (data) => {
           console.log('比较订单ID:', currentOrderId, 'vs', cancelledOrderId)
           
           if (currentOrderId == cancelledOrderId) { // 使用 == 处理类型转换
-            console.log('✅ 当前订单被取消，重置状态')
+            console.log('✅ 当前订单被取消，重置状态并清理地图')
+            
+            // 清理地图上的订单相关元素
+            clearOrderMapElements();
+            
+            // 重置订单状态
             resetOrderState();
-            ElMessage.warning('当前订单已被取消');
+            
+            // 停止导航
+            stopNavigation();
+            
+            ElMessage({
+              message: `订单已被乘客取消：${data.reason || '乘客取消'}`,
+              type: 'warning',
+              duration: 5000,
+              showClose: true
+            });
           }
         }
       }
       break;
+    case "CLEAR_ROUTE":
+      console.log("🧹 处理清理路线请求");
+      console.log("📋 清理原因:", data.reason);
+      
+      // 强制清理所有地图元素
+      clearOrderMapElements();
+      
+      // 停止导航
+      stopNavigation();
+      
+      // 重置订单状态
+      resetOrderState();
+      
+      ElMessage({
+        message: '路线已清理，订单已取消',
+        type: 'info',
+        duration: 3000
+      });
+      break;
     case "ORDER_STATUS_CHANGE":
       console.log("📊 处理订单状态变化");
       if (data.orderId && currentOrder.value && currentOrder.value.id === data.orderId) {
@@ -587,16 +788,85 @@ const handleStatusChange = async (online) => {
 
 // 开始位置追踪
 const startLocationTracking = () => {
-  // 每30秒更新一次位置
-  if (navigationTimer) clearInterval(navigationTimer)
-  navigationTimer = setInterval(getCurrentLocation, 30000)
+  console.log('🚀 开始位置追踪...')
+  
+  // 使用定时器管理器设置位置上报定时器
+  TimerManager.setLocationTimer(getCurrentLocation, 30000)
+  
+  // 如果有当前订单，启动更频繁的WebSocket位置推送
+  if (currentOrder.value) {
+    startFrequentLocationPush()
+  }
 }
 
 // 停止位置追踪
 const stopLocationTracking = () => {
-  if (navigationTimer) {
-    clearInterval(navigationTimer)
-    navigationTimer = null
+  console.log('⏹️ 停止位置追踪...')
+  
+  // 使用TimerManager清理位置定时器
+  if (locationTimer) {
+    clearInterval(locationTimer)
+    locationTimer = null
+    console.log('✅ 已清理位置定时器')
+  }
+  
+  // 停止频繁位置推送
+  stopFrequentLocationPush()
+}
+
+// 启动频繁的位置推送（仅在有订单时）
+const startFrequentLocationPush = () => {
+  console.log('🚀 启动频繁位置推送（每10秒）')
+  
+  TimerManager.setFrequentPushTimer(() => {
+    if (currentOrder.value && currentPosition.value) {
+      pushLocationToPassenger(currentPosition.value.lng, currentPosition.value.lat)
+    } else {
+      // 如果没有订单了，停止频繁推送
+      stopFrequentLocationPush()
+    }
+  }, 10000) // 每10秒推送一次
+}
+
+// 停止频繁的位置推送
+const stopFrequentLocationPush = () => {
+  if (frequentPushTimer) {
+    clearInterval(frequentPushTimer)
+    frequentPushTimer = null
+    console.log('⏹️ 停止频繁位置推送')
+  }
+}
+
+// 向乘客推送司机位置
+const pushLocationToPassenger = (lng, lat) => {
+  if (!currentOrder.value) {
+    console.log('⚠️ 没有当前订单，跳过位置推送')
+    return
+  }
+  
+  try {
+    // 通过WebSocket向乘客推送司机位置
+    if (driverStore.isWebSocketConnected && window.driverStompClient) {
+      const locationData = {
+        orderId: currentOrder.value.id || currentOrder.value.orderId,
+        driverId: userStore.user.driverId,
+        longitude: lng,
+        latitude: lat,
+        timestamp: Date.now(),
+        type: 'DRIVER_LOCATION_UPDATE'
+      }
+      
+      window.driverStompClient.publish({
+        destination: '/app/driver/location',
+        body: JSON.stringify(locationData)
+      })
+      
+      console.log('📡 已推送司机位置给乘客:', { lng, lat, orderId: locationData.orderId })
+    } else {
+      console.log('⚠️ WebSocket未连接，无法推送位置')
+    }
+  } catch (error) {
+    console.error('❌ 推送司机位置失败:', error)
   }
 }
 
@@ -648,9 +918,8 @@ const connectWebSocket = () => {
           // 处理不同类型的通知
           if (data.type === 'ORDER_CANCELLED') {
             console.log('❌ 收到订单取消通知:', data)
-            ElMessage.warning(data.reason || '订单已被取消')
             
-            // 如果是当前订单被取消，重置状态
+            // 如果是当前订单被取消，重置状态并清理地图
             if (currentOrder.value) {
               const currentOrderId = currentOrder.value.orderId || currentOrder.value.id
               const cancelledOrderId = data.orderId
@@ -658,9 +927,32 @@ const connectWebSocket = () => {
               console.log('比较订单ID:', currentOrderId, 'vs', cancelledOrderId)
               
               if (currentOrderId == cancelledOrderId) { // 使用 == 而不是 === 来处理类型转换
-                console.log('✅ 当前订单被取消，重置状态')
-                resetOrderState()
+                console.log('✅ 当前订单被取消，开始清理状态和地图')
+                
+                // 清理地图上的订单相关元素
+                clearOrderMapElements();
+                
+                // 重置订单状态
+                resetOrderState();
+                
+                // 停止导航
+                stopNavigation();
+                
+                // 显示明确的取消通知
+                ElMessage({
+                  message: `订单已被乘客取消：${data.reason || '乘客取消订单'}`,
+                  type: 'warning',
+                  duration: 6000,
+                  showClose: true
+                });
               }
+            } else {
+              // 如果没有当前订单，只显示通知
+              ElMessage({
+                message: data.reason || '订单已被取消',
+                type: 'warning',
+                duration: 4000
+              });
             }
           } else {
             ElMessage.info(data.message || data.reason)
@@ -1029,6 +1321,77 @@ const startNavigationToPickup = () => {
   ElMessage.success('导航已开始，正在前往上车点')
 }
 
+// 清理订单相关的地图元素
+const clearOrderMapElements = () => {
+  console.log('🧹 清理订单相关的地图元素')
+  
+  try {
+    // 清理上车点标记
+    if (pickupMarker) {
+      map.remove(pickupMarker)
+      pickupMarker = null
+      console.log('✅ 已清理上车点标记')
+    }
+    
+    // 清理目的地标记
+    if (destinationMarker) {
+      map.remove(destinationMarker)
+      destinationMarker = null
+      console.log('✅ 已清理目的地标记')
+    }
+    
+    // 清理路线
+    if (routeLine) {
+      map.remove(routeLine)
+      routeLine = null
+      console.log('✅ 已清理路线')
+    }
+    
+    // 清理导航信息
+    driverStore.clearNavigationInfo()
+    
+    console.log('✅ 订单地图元素清理完成')
+  } catch (error) {
+    console.error('❌ 清理地图元素失败:', error)
+  }
+}
+
+// 重置订单状态
+const resetOrderState = () => {
+  console.log('🔄 重置司机订单状态')
+  
+  // 清理地图元素
+  clearOrderMapElements()
+  
+  // 停止频繁位置推送
+  console.log('📡 订单重置，停止频繁位置推送')
+  stopFrequentLocationPush()
+  
+  // 清理store中的订单状态
+  driverStore.clearCurrentOrder()
+  
+  // 停止导航
+  stopNavigation()
+  
+  console.log('✅ 司机订单状态重置完成')
+}
+
+// 停止导航
+const stopNavigation = () => {
+  console.log('🛑 停止导航')
+  
+  // 清理导航定时器
+  if (navigationTimer) {
+    clearInterval(navigationTimer)
+    navigationTimer = null
+  }
+  
+  // 清理导航信息
+  driverStore.clearNavigationInfo()
+  
+  console.log('✅ 导航已停止')
+}
+
 // 开始导航到目的地（确认接到乘客后调用）
 const startNavigationToDestination = () => {
   if (!currentOrder.value) {
@@ -1088,31 +1451,38 @@ const startNavigationToDestination = () => {
 const startRealTimeNavigation = () => {
   console.log('🧭 开始实时导航')
   
-  // 每5秒更新一次位置和导航信息
-  if (navigationTimer) clearInterval(navigationTimer)
-  
-  navigationTimer = setInterval(() => {
+  // 使用定时器管理器设置导航定时器
+  TimerManager.setNavigationTimer(() => {
     // 更新当前位置
     getCurrentLocation()
     
-    // 如果有当前订单，重新规划路线
+    // 更新导航指示（基于当前位置）
+    updateNavigationGuidance()
+    
+    // 如果有当前订单，检查是否需要重新规划路线
     if (currentOrder.value) {
-      if (currentOrder.value.status === 'ASSIGNED' || currentOrder.value.status === 'PICKUP') {
-        // 前往上车点（包括已到达但还未开始行程的状态）
-        const pickupPos = [currentOrder.value.pickupLongitude, currentOrder.value.pickupLatitude]
-        planRoute(
-          [currentPosition.value.lng, currentPosition.value.lat],
-          pickupPos,
-          '🚗 前往上车点接乘客'
-        )
-      } else if (currentOrder.value.status === 'IN_PROGRESS') {
-        // 前往目的地
-        const destPos = [currentOrder.value.destinationLongitude, currentOrder.value.destinationLatitude]
-        planRoute(
-          [currentPosition.value.lng, currentPosition.value.lat],
-          destPos,
-          '🎯 前往目的地'
-        )
+      // 每30秒重新规划一次路线，确保路线是最新的
+      const now = Date.now()
+      if (!window.lastRouteUpdate || now - window.lastRouteUpdate > 30000) {
+        window.lastRouteUpdate = now
+        
+        if (currentOrder.value.status === 'ASSIGNED' || currentOrder.value.status === 'PICKUP') {
+          // 前往上车点
+          const pickupPos = [currentOrder.value.pickupLongitude, currentOrder.value.pickupLatitude]
+          planRoute(
+            [currentPosition.value.lng, currentPosition.value.lat],
+            pickupPos,
+            '🚗 前往上车点接乘客'
+          )
+        } else if (currentOrder.value.status === 'IN_PROGRESS') {
+          // 前往目的地
+          const destPos = [currentOrder.value.destinationLongitude, currentOrder.value.destinationLatitude]
+          planRoute(
+            [currentPosition.value.lng, currentPosition.value.lat],
+            destPos,
+            '🎯 前往目的地'
+          )
+        }
       }
     }
   }, 5000) // 每5秒更新一次
@@ -1120,11 +1490,111 @@ const startRealTimeNavigation = () => {
 
 // 停止实时导航
 const stopRealTimeNavigation = () => {
+  console.log('⏹️ 停止实时导航...')
+  
+  // 清理导航定时器
   if (navigationTimer) {
     clearInterval(navigationTimer)
     navigationTimer = null
   }
-  console.log('⏹️ 已停止实时导航')
+}
+
+// 更新实时导航指示（基于司机当前位置）
+const updateNavigationGuidance = () => {
+  if (!currentOrder.value || !navigationInfo.value || !navigationInfo.value.steps) {
+    return
+  }
+  
+  const driverPos = [currentPosition.value.lng, currentPosition.value.lat]
+  const steps = navigationInfo.value.steps
+  const isWebAPIData = navigationInfo.value.webAPIData
+  
+  try {
+    // 找到司机当前最接近的路段
+    let closestStepIndex = 0
+    let minDistance = Infinity
+    
+    for (let i = 0; i < steps.length; i++) {
+      const step = steps[i]
+      
+      // 根据数据来源使用不同的距离计算方法
+      let stepPosition
+      if (isWebAPIData) {
+        // Web API数据：使用步骤的起始坐标
+        if (step.start_location) {
+          stepPosition = [step.start_location.lng, step.start_location.lat]
+        }
+      } else {
+        // JS API数据：使用路径点
+        if (step.path && step.path.length > 0) {
+          stepPosition = [step.path[0].lng, step.path[0].lat]
+        }
+      }
+      
+      if (stepPosition && window.AMap && window.AMap.GeometryUtil) {
+        const distance = window.AMap.GeometryUtil.distance(driverPos, stepPosition)
+        if (distance < minDistance) {
+          minDistance = distance
+          closestStepIndex = i
+        }
+      }
+    }
+    
+    // 获取下一个导航指示
+    const nextSteps = steps.slice(closestStepIndex, closestStepIndex + 2)
+    let nextInstruction = '继续直行'
+    let nextDistance = '计算中...'
+    let instructionIcon = '⬆️'
+    
+    for (const step of nextSteps) {
+      if (step.instruction) {
+        const instruction = step.instruction.toLowerCase()
+        const distance = isWebAPIData ? parseInt(step.distance) : step.distance
+        
+        if (distance > 30) {
+          if (instruction.includes('左转') || instruction.includes('左拐')) {
+            nextInstruction = `${Math.round(distance)}米后左转`
+            instructionIcon = '↖️'
+            nextDistance = `${Math.round(distance)}米`
+            break
+          } else if (instruction.includes('右转') || instruction.includes('右拐')) {
+            nextInstruction = `${Math.round(distance)}米后右转`
+            instructionIcon = '↗️'
+            nextDistance = `${Math.round(distance)}米`
+            break
+          } else if (instruction.includes('掉头') || instruction.includes('调头')) {
+            nextInstruction = `${Math.round(distance)}米后掉头`
+            instructionIcon = '🔄'
+            nextDistance = `${Math.round(distance)}米`
+            break
+          } else if (instruction.includes('进入') || instruction.includes('上')) {
+            nextInstruction = `${Math.round(distance)}米后${instruction}`
+            instructionIcon = '🛣️'
+            nextDistance = `${Math.round(distance)}米`
+            break
+          } else if (instruction.includes('出口') || instruction.includes('下')) {
+            nextInstruction = `${Math.round(distance)}米后${instruction}`
+            instructionIcon = '🚪'
+            nextDistance = `${Math.round(distance)}米`
+            break
+          }
+        }
+      }
+    }
+    
+    // 更新导航信息
+    const updatedNavigation = {
+      ...navigationInfo.value,
+      instruction: nextInstruction,
+      icon: instructionIcon,
+      nextDistance: nextDistance
+    }
+    
+    driverStore.setNavigationInfo(updatedNavigation)
+    console.log('🧭 导航指示已更新:', nextInstruction)
+  } catch (error) {
+    console.error('❌ 更新导航指示失败:', error)
+  }
 }
 
 // 显示到上车点的路线
@@ -1202,6 +1672,14 @@ const planRoute = async (origin, destination, instruction) => {
       return
     }
     
+    // 先尝试使用高德Web服务API获取详细导航信息
+    try {
+      await planRouteWithWebAPI(origin, destination, instruction)
+      return
+    } catch (error) {
+      console.log('🔄 Web API失败，使用JS API备用方案:', error.message)
+    }
+    
     // 检查AMap.Driving是否可用
     if (!window.AMap || !window.AMap.Driving) {
       console.error('❌ AMap.Driving不可用')
@@ -1223,14 +1701,11 @@ const planRoute = async (origin, destination, instruction) => {
         if (status === 'complete' && result.routes && result.routes.length > 0) {
           const route = result.routes[0]
           
-          // 显示导航信息
-          navigationInfo.value = {
-            instruction,
-            distance: (route.distance / 1000).toFixed(1) + 'km',
-            duration: Math.ceil(route.time / 60) + '分钟'
-          }
+          // 解析导航指示
+          const navigationData = parseNavigationInstructions(route, instruction)
+          driverStore.setNavigationInfo(navigationData)
           
-          console.log('✅ 导航信息已更新:', navigationInfo.value)
+          console.log('✅ 导航信息已更新:', navigationData)
           
           // 在地图上绘制路线
           if (routeLine) {
@@ -1354,6 +1829,322 @@ const useFallbackRoute = (origin, destination, instruction) => {
   }
 }
 
+// 使用高德Web服务API进行路线规划
+const planRouteWithWebAPI = async (origin, destination, instruction) => {
+  try {
+    console.log('🌐 使用高德Web服务API进行路线规划')
+    
+    const apiKey = 'de2d5b3782511b03e23a18685faccead' // 高德地图API Key
+    const originStr = `${origin[0]},${origin[1]}`
+    const destinationStr = `${destination[0]},${destination[1]}`
+    
+    // 构建API请求URL
+    const apiUrl = `https://restapi.amap.com/v3/direction/driving?` +
+      `origin=${originStr}&` +
+      `destination=${destinationStr}&` +
+      `key=${apiKey}&` +
+      `strategy=0&` + // 速度优先
+      `extensions=all&` + // 返回详细信息
+      `steps_info=1&` + // 返回步骤信息
+      `ferry=0&` + // 不走轮渡
+      `output=json`
+    
+    console.log('📞 调用高德Web API:', apiUrl)
+    
+    const response = await fetch(apiUrl)
+    const data = await response.json()
+    
+    console.log('📋 高德Web API响应:', data)
+    
+    if (data.status === '1' && data.route && data.route.paths && data.route.paths.length > 0) {
+      const path = data.route.paths[0]
+      
+      // 解析详细的导航指示
+      const navigationData = parseWebAPINavigationInstructions(path, instruction)
+      driverStore.setNavigationInfo(navigationData)
+      
+      console.log('✅ Web API导航信息已更新:', navigationData)
+      
+      // 在地图上绘制路线
+      drawRouteFromWebAPI(path)
+      
+      return true
+    } else {
+      throw new Error(`Web API返回错误: ${data.info || '未知错误'}`)
+    }
+  } catch (error) {
+    console.error('❌ 高德Web API调用失败:', error)
+    throw error
+  }
+}
+
+// 解析高德Web API返回的导航指示
+const parseWebAPINavigationInstructions = (path, baseInstruction) => {
+  try {
+    const totalDistance = (path.distance / 1000).toFixed(1) + 'km'
+    const totalDuration = Math.ceil(path.duration / 60) + '分钟'
+    
+    if (!path.steps || path.steps.length === 0) {
+      return {
+        instruction: baseInstruction,
+        distance: totalDistance,
+        duration: totalDuration,
+        icon: '🧭',
+        nextDistance: totalDistance
+      }
+    }
+    
+    // 获取第一个有意义的导航指示
+    let nextInstruction = '直行'
+    let nextDistance = '0米'
+    let instructionIcon = '⬆️'
+    
+    // 查找第一个转向指示
+    for (let i = 0; i < Math.min(path.steps.length, 3); i++) {
+      const step = path.steps[i]
+      if (step.instruction && step.distance > 50) {
+        const instruction = step.instruction
+        const distance = parseInt(step.distance)
+        
+        console.log('🔍 分析导航指示:', instruction, '距离:', distance)
+        
+        // 解析转向指示 - 高德API返回的指示格式
+        if (instruction.includes('左转') || instruction.includes('左拐')) {
+          nextInstruction = `${distance}米后左转`
+          instructionIcon = '↖️'
+          nextDistance = `${distance}米`
+          break
+        } else if (instruction.includes('右转') || instruction.includes('右拐')) {
+          nextInstruction = `${distance}米后右转`
+          instructionIcon = '↗️'
+          nextDistance = `${distance}米`
+          break
+        } else if (instruction.includes('掉头') || instruction.includes('调头')) {
+          nextInstruction = `${distance}米后掉头`
+          instructionIcon = '🔄'
+          nextDistance = `${distance}米`
+          break
+        } else if (instruction.includes('直行') && distance > 200) {
+          nextInstruction = `直行${distance}米`
+          instructionIcon = '⬆️'
+          nextDistance = `${distance}米`
+          break
+        } else if (instruction.includes('进入') || instruction.includes('上')) {
+          // 进入高速或主路
+          nextInstruction = `${distance}米后${instruction}`
+          instructionIcon = '🛣️'
+          nextDistance = `${distance}米`
+          break
+        } else if (instruction.includes('出口') || instruction.includes('下')) {
+          // 高速出口
+          nextInstruction = `${distance}米后${instruction}`
+          instructionIcon = '🚪'
+          nextDistance = `${distance}米`
+          break
+        }
+      }
+    }
+    
+    // 如果没有找到具体指示，使用第一个步骤
+    if (nextInstruction === '直行' && path.steps.length > 0) {
+      const firstStep = path.steps[0]
+      if (firstStep && firstStep.distance > 100) {
+        const distance = parseInt(firstStep.distance)
+        nextInstruction = `直行${distance}米`
+        nextDistance = `${distance}米`
+      }
+    }
+    
+    return {
+      instruction: nextInstruction,
+      distance: totalDistance,
+      duration: totalDuration,
+      icon: instructionIcon,
+      nextDistance: nextDistance,
+      steps: path.steps, // 保存所有步骤用于后续导航更新
+      webAPIData: true // 标记为Web API数据
+    }
+  } catch (error) {
+    console.error('❌ 解析Web API导航指示失败:', error)
+    return {
+      instruction: baseInstruction,
+      distance: (path.distance / 1000).toFixed(1) + 'km',
+      duration: Math.ceil(path.duration / 60) + '分钟',
+      icon: '🧭'
+    }
+  }
+}
+
+// 根据Web API数据绘制路线
+const drawRouteFromWebAPI = (path) => {
+  try {
+    // 清除旧路线
+    if (routeLine) {
+      map.remove(routeLine)
+      routeLine = null
+    }
+    
+    // 解析路径点
+    const pathPoints = []
+    
+    if (path.steps && path.steps.length > 0) {
+      path.steps.forEach(step => {
+        if (step.polyline) {
+          // 解析polyline编码的路径
+          const points = decodePolyline(step.polyline)
+          pathPoints.push(...points)
+        }
+      })
+    }
+    
+    console.log('🛣️ Web API解析到路径点数量:', pathPoints.length)
+    
+    if (pathPoints.length > 0) {
+      routeLine = new window.AMap.Polyline({
+        path: pathPoints,
+        strokeColor: '#409EFF',
+        strokeWeight: 6,
+        strokeOpacity: 0.8,
+        strokeStyle: 'solid',
+        lineJoin: 'round',
+        lineCap: 'round'
+      })
+      
+      map.add(routeLine)
+      console.log('✅ Web API路线已绘制到地图上')
+      
+      // 调整地图视野
+      adjustMapView()
+    } else {
+      console.warn('⚠️ Web API没有返回有效路径点')
+    }
+  } catch (error) {
+    console.error('❌ 绘制Web API路线失败:', error)
+  }
+}
+
+// 解码polyline编码的路径
+const decodePolyline = (encoded) => {
+  try {
+    const points = []
+    let index = 0
+    let lat = 0
+    let lng = 0
+    
+    while (index < encoded.length) {
+      let b, shift = 0, result = 0
+      do {
+        b = encoded.charCodeAt(index++) - 63
+        result |= (b & 0x1f) << shift
+        shift += 5
+      } while (b >= 0x20)
+      
+      const deltaLat = ((result & 1) ? ~(result >> 1) : (result >> 1))
+      lat += deltaLat
+      
+      shift = 0
+      result = 0
+      do {
+        b = encoded.charCodeAt(index++) - 63
+        result |= (b & 0x1f) << shift
+        shift += 5
+      } while (b >= 0x20)
+      
+      const deltaLng = ((result & 1) ? ~(result >> 1) : (result >> 1))
+      lng += deltaLng
+      
+      points.push([lng / 1e6, lat / 1e6])
+    }
+    
+    return points
+  } catch (error) {
+    console.error('❌ 解码polyline失败:', error)
+    return []
+  }
+}
+
+// 解析导航指示（JS API版本）
+const parseNavigationInstructions = (route, baseInstruction) => {
+  try {
+    const steps = route.steps || []
+    const totalDistance = (route.distance / 1000).toFixed(1) + 'km'
+    const totalDuration = Math.ceil(route.time / 60) + '分钟'
+    
+    if (steps.length === 0) {
+      return {
+        instruction: baseInstruction,
+        distance: totalDistance,
+        duration: totalDuration,
+        icon: '🧭',
+        nextDistance: totalDistance
+      }
+    }
+    
+    // 获取第一个有意义的导航指示
+    let nextInstruction = '直行'
+    let nextDistance = '0米'
+    let instructionIcon = '⬆️'
+    
+    // 查找第一个转向指示
+    for (let i = 0; i < Math.min(steps.length, 3); i++) {
+      const step = steps[i]
+      if (step.instruction && step.distance > 50) { // 距离大于50米的指示才有意义
+        const instruction = step.instruction.toLowerCase()
+        const distance = step.distance
+        
+        // 解析转向指示
+        if (instruction.includes('左转') || instruction.includes('左拐')) {
+          nextInstruction = `${Math.round(distance)}米后左转`
+          instructionIcon = '↖️'
+          nextDistance = `${Math.round(distance)}米`
+          break
+        } else if (instruction.includes('右转') || instruction.includes('右拐')) {
+          nextInstruction = `${Math.round(distance)}米后右转`
+          instructionIcon = '↗️'
+          nextDistance = `${Math.round(distance)}米`
+          break
+        } else if (instruction.includes('掉头') || instruction.includes('调头')) {
+          nextInstruction = `${Math.round(distance)}米后掉头`
+          instructionIcon = '🔄'
+          nextDistance = `${Math.round(distance)}米`
+          break
+        } else if (instruction.includes('直行') && distance > 200) {
+          nextInstruction = `直行${Math.round(distance)}米`
+          instructionIcon = '⬆️'
+          nextDistance = `${Math.round(distance)}米`
+          break
+        }
+      }
+    }
+    
+    // 如果没有找到具体指示，使用基础指示
+    if (nextInstruction === '直行' && steps.length > 0) {
+      const firstMeaningfulStep = steps.find(step => step.distance > 100)
+      if (firstMeaningfulStep) {
+        nextInstruction = `直行${Math.round(firstMeaningfulStep.distance)}米`
+        nextDistance = `${Math.round(firstMeaningfulStep.distance)}米`
+      }
+    }
+    
+    return {
+      instruction: nextInstruction,
+      distance: totalDistance,
+      duration: totalDuration,
+      icon: instructionIcon,
+      nextDistance: nextDistance,
+      steps: steps // 保存所有步骤用于后续导航更新
+    }
+  } catch (error) {
+    console.error('❌ 解析导航指示失败:', error)
+    return {
+      instruction: baseInstruction,
+      distance: (route.distance / 1000).toFixed(1) + 'km',
+      duration: Math.ceil(route.time / 60) + '分钟',
+      icon: '🧭'
+    }
+  }
+}
+
 // 确认到达
 const confirmArrival = async () => {
   try {
@@ -1474,7 +2265,8 @@ const completeOrder = async () => {
     }
   } catch (error) {
     if (error !== 'cancel') {
-    
+      console.error('❌ 完成订单网络错误:', error)
+      ElMessage.error('网络错误')
     }
   }
 }
@@ -1619,48 +2411,9 @@ const restoreOrderNavigation = () => {
   }, 2000) // 等待2秒确保地图完全初始化
 }
 
-// 重置订单状态
-const resetOrderState = () => {
-  console.log('🔄 重置订单状态...')
-  
-  // 使用store清除订单状态
-  driverStore.setCurrentOrder(null)
-  driverStore.clearOrderState() // 使用store的清理方法
-  
-  // 停止实时导航
-  stopRealTimeNavigation()
-  
-  // 清理地图标记
-  if (pickupMarker) {
-    console.log('🗑️ 清理上车点标记')
-    map.remove(pickupMarker)
-    pickupMarker = null
-  }
-  if (destinationMarker) {
-    console.log('🗑️ 清理目的地标记')
-    map.remove(destinationMarker)
-    destinationMarker = null
-  }
-  if (routeLine) {
-    console.log('🗑️ 清理路线')
-    map.remove(routeLine)
-    routeLine = null
-  }
-  
-  // 重置路线初始化标记
-  window.routeInitialized = false
-  
-  console.log('✅ 订单状态重置完成')
-}
 
-// 停止导航
-const stopNavigation = () => {
-  navigationInfo.value = null
-  if (routeLine) {
-    map.remove(routeLine)
-    routeLine = null
-  }
-}
+
+
 
 // 加载今日统计
 const loadTodayStats = async () => {
@@ -1836,6 +2589,17 @@ const playNotificationSound = () => {
   background: #f0f0f0;
   position: relative;
   z-index: 1;
+  /* 确保地图可以接收鼠标事件 */
+  pointer-events: auto;
+}
+
+/* 地图元素样式 */
+#driverMapContainer {
+  width: 100%;
+  height: 100%;
+  /* 确保地图容器可以接收所有交互事件 */
+  pointer-events: auto;
+  touch-action: none; /* 防止移动端浏览器的默认手势干扰 */
 }
 
 .order-notification {
@@ -2041,31 +2805,69 @@ const playNotificationSound = () => {
   flex: 1;
 }
 
-.navigation-panel {
+.navigation-guidance-panel {
   position: absolute;
   top: 80px;
   left: 20px;
   right: 20px;
-  background: rgba(0, 0, 0, 0.8);
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: white;
-  border-radius: 10px;
-  padding: 15px;
+  padding: 20px;
+  border-radius: 12px;
+  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
   z-index: 100;
 }
 
-.nav-header {
+.current-instruction {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  margin-bottom: 15px;
+}
+
+.instruction-icon {
+  font-size: 32px;
+  min-width: 40px;
+  text-align: center;
+}
+
+.instruction-content {
+  flex: 1;
+}
+
+.instruction-text {
+  font-size: 18px;
+  font-weight: bold;
+  margin-bottom: 5px;
+  line-height: 1.2;
+}
+
+.instruction-distance {
+  font-size: 16px;
+  opacity: 0.9;
+  color: #e8f4fd;
+}
+
+.route-summary {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 10px;
-  font-weight: 500;
+  padding-top: 15px;
+  border-top: 1px solid rgba(255,255,255,0.2);
+  font-size: 14px;
 }
 
-.nav-details {
+.route-stats {
   display: flex;
   gap: 20px;
-  font-size: 14px;
-  opacity: 0.9;
+  opacity: 0.8;
+}
+
+.total-distance,
+.total-time {
+  display: flex;
+  align-items: center;
+  gap: 5px;
 }
 
 @media (max-width: 768px) {
@@ -2081,9 +2883,29 @@ const playNotificationSound = () => {
     right: 10px;
   }
   
-  .navigation-panel {
+  .navigation-guidance-panel {
     left: 10px;
     right: 10px;
+    padding: 15px;
+  }
+  
+  .instruction-icon {
+    font-size: 28px;
+    min-width: 35px;
+  }
+  
+  .instruction-text {
+    font-size: 16px;
+  }
+  
+  .instruction-distance {
+    font-size: 14px;
+  }
+  
+  .route-stats {
+    flex-direction: column;
+    gap: 8px;
+    align-items: flex-start;
   }
   
   .earnings-info {
diff --git a/frontend/src/views/MyTrips.vue b/frontend/src/views/MyTrips.vue
index 4ee014b4..ccaa94b8 100644
--- a/frontend/src/views/MyTrips.vue
+++ b/frontend/src/views/MyTrips.vue
@@ -365,20 +365,20 @@
           <el-radio-group v-model="selectedPaymentMethod">
             <el-radio label="WECHAT" class="payment-option">
               <div class="payment-method">
-                <span class="icon">💚</span>
+                <img class="custom-icon" src="/avatars/WeChat.jpg" alt="Logo" >
                 <span>微信支付</span>
               </div>
             </el-radio>
             <el-radio label="ALIPAY" class="payment-option">
               <div class="payment-method">
-                <span class="icon">🔵</span>
-                <span>支付宝</span>
+                <img class="custom-icon" src="/avatars/AliPay.jpg" alt="Logo" >
+                <span>支付宝支付</span>
               </div>
             </el-radio>
-            <el-radio label="CASH" class="payment-option">
+            <el-radio label="CREDIT_CARD" class="payment-option">
               <div class="payment-method">
-                <span class="icon">💵</span>
-                <span>现金支付</span>
+                <img class="custom-icon" src="/avatars/Visa.jpg" alt="Logo" >
+                <span>银行卡支付</span>
               </div>
             </el-radio>
           </el-radio-group>
@@ -1281,7 +1281,7 @@ const handleCurrentChange = (page) => {
 
 .payment-option {
   width: 100%;
-  margin-bottom: 10px;
+  margin-bottom: 20px;
 }
 
 .payment-method {
@@ -1447,4 +1447,8 @@ const handleCurrentChange = (page) => {
     gap: 10px;
   }
 }
+.custom-icon {
+  width: 30px;  /* 调整宽度 */
+  height: 30px; /* 调整高度 */
+}
 </style>
\ No newline at end of file
diff --git a/frontend/src/views/PassengerMap.vue b/frontend/src/views/PassengerMap.vue
index ce491295..fbd8365b 100644
--- a/frontend/src/views/PassengerMap.vue
+++ b/frontend/src/views/PassengerMap.vue
@@ -439,6 +439,7 @@ const handleCancelOrder = async () => {
     console.log("🚫 准备取消订单:", currentOrder.value);
     console.log("🆔 订单ID:", currentOrder.value.id);
     console.log("📋 订单类型:", currentOrder.value.orderType);
+    console.log("👨‍✈️ 司机ID:", currentOrder.value.driverId);
     
     // 根据订单类型选择不同的取消接口
     const cancelUrl = currentOrder.value.orderType === "RESERVATION" 
@@ -459,9 +460,25 @@ const handleCancelOrder = async () => {
     console.log("📋 取消订单响应:", response.status, result);
 
     if (response.ok && result.code === 200) {
-      ElMessage.success("订单已取消");
+      console.log("✅ 订单取消成功，后端已通知司机");
+      
+      // 立即清理乘客端的订单状态和地图元素
       resetOrderState();
       
+      // 清理地图上的司机相关元素
+      clearAllDriverRoutes();
+      
+      // 恢复乘客路径为蓝色
+      if (routeLine && routeLine.setOptions) {
+        routeLine.setOptions({
+          strokeColor: '#1890ff',
+          strokeWeight: 6,
+          strokeOpacity: 0.8
+        });
+      }
+      
+      ElMessage.success("订单已取消，司机已收到通知");
+      
       // 刷新活跃订单状态，确保UI正确更新
       await checkActiveOrder();
     } else {
@@ -704,6 +721,11 @@ const initializePassengerMap = async (isReactivation = false) => {
     // 重新检查活跃订单
     await checkActiveOrder()
     
+    // 恢复地图标记（修复页面切换后标记消失的问题）
+    setTimeout(() => {
+      restoreMapMarkers()
+    }, 500)
+    
     // 重新连接WebSocket（如果需要）
     if (!orderStore.isWebSocketConnected) {
       console.log('🔄 重新连接WebSocket...')
@@ -837,8 +859,8 @@ function initMap() {
             updatePickupMarkerDraggable();
           }, 1000);
 
-          // 添加拖拽事件监听器
-          pickupMarker.on("dragend", (e) => {
+          // 添加拖拽事件监听器（智能吸附版本）
+          pickupMarker.on("dragend", async (e) => {
             // 如果已有订单，不允许拖拽
             if (currentOrder.value) {
               console.log("⚠️ 订单已发起，不允许修改上车点");
@@ -850,32 +872,22 @@ function initMap() {
               return;
             }
 
-            const newPosition = e.lnglat;
+            const dragPosition = e.lnglat;
             console.log(
-              "🚩 上车点被拖拽到新位置:",
-              newPosition.lng,
-              newPosition.lat
+              "🚩 上车点被拖拽到位置:",
+              dragPosition.lng,
+              dragPosition.lat
             );
 
-            // 更新当前位置
-            currentPosition.value = {
-              lng: newPosition.lng,
-              lat: newPosition.lat,
-            };
-
-            // 获取新位置的地址
-            getAddressFromLocation(newPosition.lng, newPosition.lat);
-
-            // 如果已有目的地，重新规划路线
-            if (destination.value) {
-              showRoute();
-            }
+            // 智能吸附到最近的POI
+            await snapToNearestPOI(dragPosition.lng, dragPosition.lat);
           });
 
           map.setCenter([lng, lat]);
           console.log("定位成功，当前位置:", lng, lat);
 
-          getAddressFromLocation(lng, lat);
+          // 初始定位时也使用智能吸附功能
+          snapToNearestPOI(lng, lat);
           initAutocomplete();
           
           // 🔑 关键：恢复订单相关的地图元素
@@ -957,29 +969,200 @@ const getAddressFromLocation = async (lng, lat) => {
   try {
     console.log("开始获取地址:", lng, lat);
 
-    const response = await fetch(
-      getRestApiUrl("geocode/regeo", {
-        location: `${lng},${lat}`,
-        extensions: "all",
-      })
-    );
-    const data = await response.json();
-
-    console.log("地址解析结果:", data);
-
-    if (data.status === "1" && data.regeocode) {
-      pickupAddress.value = data.regeocode.formatted_address;
-      console.log("获取到地址:", data.regeocode.formatted_address);
-    } else {
-      console.log("地址获取失败，使用备用方案");
+    // 使用Web端JS API的逆地理编码功能
+    if (!window.AMap) {
+      console.error("❌ 高德地图API未加载");
       pickupAddress.value = `位置 (${lat.toFixed(6)}, ${lng.toFixed(6)})`;
+      return;
     }
+
+    // 创建逆地理编码实例
+    const geocoder = new window.AMap.Geocoder({
+      radius: 100, // 搜索半径100米
+      extensions: "base" // 返回基础信息即可
+    });
+
+    // 执行逆地理编码
+    geocoder.getAddress([lng, lat], (status, result) => {
+      console.log("地址解析结果:", status, result);
+
+      if (status === 'complete' && result.info === 'OK' && result.regeocode) {
+        const address = result.regeocode.formattedAddress;
+        pickupAddress.value = address;
+        console.log("获取到地址:", address);
+        
+        // 更新标记标题
+        if (pickupMarker) {
+          pickupMarker.setTitle(`上车点: ${address}`);
+        }
+      } else {
+        console.log("地址获取失败，使用备用方案");
+        pickupAddress.value = `位置 (${lat.toFixed(6)}, ${lng.toFixed(6)})`;
+      }
+    });
+
   } catch (error) {
     console.error("地址获取异常:", error);
     pickupAddress.value = `位置 (${lat.toFixed(6)}, ${lng.toFixed(6)})`;
   }
 };
 
+// 智能吸附到最近的POI（使用Web端JS API）
+const snapToNearestPOI = async (lng, lat) => {
+  try {
+    console.log("🧲 开始智能吸附，查找最近的POI...");
+    ElMessage.info("正在智能匹配最近地点...");
+
+    // 使用Web端JS API的逆地理编码功能
+    if (!window.AMap) {
+      console.error("❌ 高德地图API未加载");
+      fallbackToOriginalPosition(lng, lat);
+      return;
+    }
+
+    // 创建逆地理编码实例
+    const geocoder = new window.AMap.Geocoder({
+      radius: 200, // 搜索半径200米
+      extensions: "all" // 返回详细信息
+    });
+
+    // 执行逆地理编码
+    geocoder.getAddress([lng, lat], (status, result) => {
+      console.log("🔍 POI搜索结果:", status, result);
+
+      if (status === 'complete' && result.info === 'OK' && result.regeocode) {
+        const regeocode = result.regeocode;
+        
+        // 检查是否有POI信息
+        if (regeocode.pois && regeocode.pois.length > 0) {
+          // 找到最近的POI
+          const nearestPoi = regeocode.pois[0];
+          const poiDistance = parseFloat(nearestPoi.distance);
+          
+          console.log("📍 找到最近POI:", nearestPoi.name, "距离:", poiDistance + "米");
+          
+          // 如果POI距离小于100米，则吸附到该POI
+          if (poiDistance < 100) {
+            const poiLocation = nearestPoi.location;
+            const poiLng = poiLocation.lng;
+            const poiLat = poiLocation.lat;
+            
+            console.log("🎯 吸附到POI:", nearestPoi.name, "坐标:", poiLng, poiLat);
+            
+            // 更新位置到POI的精确坐标
+            currentPosition.value = { lng: poiLng, lat: poiLat };
+            
+            // 移动地图中心到POI位置
+            if (map) {
+              map.setCenter([poiLng, poiLat]);
+              console.log("📍 地图中心已移动到POI位置");
+            }
+            
+            // 移动标记到POI位置
+            if (pickupMarker) {
+              pickupMarker.setPosition([poiLng, poiLat]);
+              pickupMarker.setTitle(`上车点: ${nearestPoi.name}`);
+            }
+            
+            // 更新地址显示为POI名称
+            pickupAddress.value = nearestPoi.name;
+            
+            // 显示吸附成功消息
+            ElMessage.success(`已自动匹配到: ${nearestPoi.name}`);
+            
+            // 如果有目的地，重新规划路线
+            if (destination.value) {
+              showRoute();
+            }
+            
+            return; // 成功吸附，直接返回
+          }
+        }
+        
+        // 如果没有找到合适的POI，使用格式化地址
+        console.log("📍 未找到合适的POI，使用格式化地址");
+        currentPosition.value = { lng, lat };
+        
+        if (pickupMarker) {
+          pickupMarker.setPosition([lng, lat]);
+        }
+        
+        // 使用逆地理编码的格式化地址
+        pickupAddress.value = regeocode.formattedAddress || `位置 (${lat.toFixed(6)}, ${lng.toFixed(6)})`;
+        
+        // 如果有目的地，重新规划路线
+        if (destination.value) {
+          showRoute();
+        }
+        
+        ElMessage.info("已更新到拖拽位置");
+        
+      } else {
+        console.error("❌ 逆地理编码失败:", status, result);
+        fallbackToOriginalPosition(lng, lat);
+      }
+    });
+    
+  } catch (error) {
+    console.error("❌ 智能吸附失败:", error);
+    fallbackToOriginalPosition(lng, lat);
+  }
+};
+
+// 回退到原始位置的处理函数
+const fallbackToOriginalPosition = (lng, lat) => {
+  console.log("📍 回退到原始位置处理");
+  
+  currentPosition.value = { lng, lat };
+  
+  if (pickupMarker) {
+    pickupMarker.setPosition([lng, lat]);
+  }
+  
+  // 使用简单的地址格式
+  pickupAddress.value = `位置 (${lat.toFixed(6)}, ${lng.toFixed(6)})`;
+  
+  if (destination.value) {
+    showRoute();
+  }
+  
+  ElMessage.warning("智能匹配失败，已使用拖拽位置");
+};
+
+// 处理起点点击事件
+const handlePickupClick = () => {
+  if (currentOrder.value) {
+    console.log("⚠️ 订单已发起，不允许修改上车点");
+    return;
+  }
+  
+  console.log("📍 重新定位上车点");
+  ElMessage.info("正在重新定位...");
+  
+  // 重新获取当前位置
+  if (map && window.AMap) {
+    const geolocation = new window.AMap.Geolocation({
+      enableHighAccuracy: true,
+      timeout: 10000,
+    });
+    
+    geolocation.getCurrentPosition(async (status, result) => {
+      if (status === "complete") {
+        const { lng, lat } = result.position;
+        console.log("🎯 重新定位成功:", lng, lat);
+        
+        // 使用智能吸附功能
+        await snapToNearestPOI(lng, lat);
+        
+        ElMessage.success("定位更新成功");
+      } else {
+        console.error("❌ 重新定位失败:", status);
+        ElMessage.error("定位失败，请检查位置权限");
+      }
+    });
+  }
+};
+
 // 目的地输入
 const handleDestinationInput = async () => {
   // 如果已有订单，不允许修改目的地
@@ -1182,14 +1365,14 @@ const showRoute = async () => {
             map.add(routeLine);
 
             // 安全地调整地图视野
-            const elements = [];
-            if (pickupMarker) elements.push(pickupMarker);
-            if (destMarker) elements.push(destMarker);
-            if (routeLine) elements.push(routeLine);
+            // const elements = [];
+            // if (pickupMarker) elements.push(pickupMarker);
+            // if (destMarker) elements.push(destMarker);
+            // if (routeLine) elements.push(routeLine);
             
-            if (elements.length > 0) {
-              map.setFitView(elements, false, [50, 50, 50, 50]);
-            }
+            // if (elements.length > 0) {
+            //   map.setFitView(elements, false, [50, 50, 50, 50]);
+            // }
           }
         } else {
           console.log("路径规划失败，使用备用方案");
@@ -1295,19 +1478,6 @@ const handleCallCar = async () => {
 
     console.log('🆔 使用乘客ID:', passengerId)
     console.log('👤 用户信息:', userStore.user)
-    
-    // 调试：验证passengerId是否有效
-    try {
-      const debugResponse = await fetch(`/api/auth/debug/user/${userStore.user.id}`, {
-        headers: {
-          'Authorization': `Bearer ${userStore.token}`
-        }
-      })
-      const debugResult = await debugResponse.json()
-      console.log('🔍 用户调试信息:', debugResult)
-    } catch (error) {
-      console.warn('⚠️ 无法获取调试信息:', error)
-    }
 
     const orderData = {
       passengerId: passengerId,
@@ -1692,6 +1862,9 @@ const updateDriverLocation = (data) => {
   console.log("📍 更新司机位置:", data);
 
   if (data.driverId === driverInfo.value?.id) {
+    // 先清理所有旧的司机路径（修复司机位置更新后旧路径没有清除的问题）
+    clearAllDriverRoutes();
+    
     // 通过store更新司机位置信息，不要直接修改computed属性
     if (driverInfo.value) {
       const updatedDriver = {
@@ -1724,7 +1897,7 @@ const updateDriverLocation = (data) => {
         // 重新规划从当前位置到目的地的路线
         showRoute();
       } else {
-        // 更新司机到上车点的路线
+        // 重新规划司机到上车点的路线
         updateDriverRoute(data.latitude, data.longitude);
       }
 
@@ -1798,37 +1971,175 @@ const handleStatusChange = (data) => {
   }
 };
 
-// 重置订单状态
+// 恢复地图标记（修复页面切换后标记消失的问题）
+const restoreMapMarkers = () => {
+  console.log('🔄 恢复地图标记...');
+  
+  if (!map) {
+    console.log('⚠️ 地图未初始化，跳过标记恢复');
+    return;
+  }
+  
+  // 恢复上车点标记
+  if (currentPosition.value && !pickupMarker) {
+    console.log('📍 恢复上车点标记');
+    pickupMarker = new window.AMap.Marker({
+      position: [currentPosition.value.lng, currentPosition.value.lat],
+      map,
+      icon: new window.AMap.Icon({
+        image: 'https://webapi.amap.com/theme/v1.3/markers/n/start.png',
+        size: new window.AMap.Size(25, 34),
+        imageSize: new window.AMap.Size(25, 34)
+      }),
+      title: '上车点',
+      draggable: !currentOrder.value
+    });
+    
+    // 重新绑定拖拽事件
+    pickupMarker.on("dragend", async (e) => {
+      if (currentOrder.value) {
+        console.log("⚠️ 订单已发起，不允许修改上车点");
+        pickupMarker.setPosition([currentPosition.value.lng, currentPosition.value.lat]);
+        return;
+      }
+      
+      const newPos = e.lnglat;
+      console.log("📍 上车点被拖拽到新位置:", newPos.lng, newPos.lat);
+      
+      currentPosition.value = { lng: newPos.lng, lat: newPos.lat };
+      
+      try {
+        const address = await reverseGeocode(newPos.lng, newPos.lat);
+        pickupAddress.value = address;
+        pickupMarker.setTitle(`上车点: ${address}`);
+        
+        if (destination.value) {
+          showRoute();
+        }
+      } catch (error) {
+        console.error("逆地理编码失败:", error);
+      }
+    });
+  }
+  
+  // 恢复目的地标记
+  if (destination.value && destination.value.location && !destMarker) {
+    console.log('🎯 恢复目的地标记');
+    
+    let destLng, destLat;
+    if (typeof destination.value.location === "string") {
+      [destLng, destLat] = destination.value.location.split(",").map(Number);
+    } else if (destination.value.location.lng && destination.value.location.lat) {
+      destLng = destination.value.location.lng;
+      destLat = destination.value.location.lat;
+    }
+    
+    if (destLng && destLat) {
+      destMarker = new window.AMap.Marker({
+        position: [destLng, destLat],
+        map,
+        icon: new window.AMap.Icon({
+          image: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png',
+          size: new window.AMap.Size(25, 34),
+          imageSize: new window.AMap.Size(25, 34)
+        }),
+        title: destination.value.name || '目的地'
+      });
+    }
+  } else if (currentOrder.value && currentOrder.value.destinationLatitude && currentOrder.value.destinationLongitude && !destMarker) {
+    // 如果destination.value不存在，但是currentOrder中有目的地信息，使用订单中的目的地
+    console.log('🎯 从订单信息恢复目的地标记');
+    destMarker = new window.AMap.Marker({
+      position: [currentOrder.value.destinationLongitude, currentOrder.value.destinationLatitude],
+      map,
+      icon: new window.AMap.Icon({
+        image: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png',
+        size: new window.AMap.Size(25, 34),
+        imageSize: new window.AMap.Size(25, 34)
+      }),
+      title: currentOrder.value.destinationAddress || '目的地'
+    });
+  }
+  
+  // 恢复司机标记（如果有当前订单）
+  if (currentOrder.value && driverInfo.value && !driverMarker) {
+    console.log('🚗 恢复司机标记');
+    driverMarker = new window.AMap.Marker({
+      position: [driverInfo.value.longitude, driverInfo.value.latitude],
+      map,
+      icon: new window.AMap.Icon({
+        image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
+        size: new window.AMap.Size(25, 34),
+        imageSize: new window.AMap.Size(25, 34)
+      }),
+      title: '司机位置'
+    });
+  }
+  
+  console.log('✅ 地图标记恢复完成');
+};
+
+// 清理所有司机路径（修复司机位置更新后旧路径没有清除的问题）
+const clearAllDriverRoutes = () => {
+  console.log('🧹 清理所有司机路径...');
+  
+  // 清理全局司机路径变量
+  if (window.driverRouteLine) {
+    map.remove(window.driverRouteLine);
+    window.driverRouteLine = null;
+    console.log('🗑️ 清理了全局司机路径变量');
+  }
+  
+  // 清理所有红色路径（司机路径）
+  const allOverlays = map.getAllOverlays();
+  let cleanedCount = 0;
+  
+  allOverlays.forEach(overlay => {
+    if (overlay.CLASS_NAME === 'AMap.Polyline') {
+      try {
+        const options = overlay.getOptions();
+        if (options && options.strokeColor === '#FF6B6B') {
+          map.remove(overlay);
+          cleanedCount++;
+        }
+      } catch (error) {
+        // 忽略错误
+      }
+    }
+  });
+  
+  console.log(`🗑️ 清理了 ${cleanedCount} 条红色司机路径`);
+};
+
+// 重置订单状态（增强版 - 修复取消订单后旧路径没有清除的问题）
 const resetOrderState = () => {
   console.log("🔄 重置订单状态");
 
   orderStore.clearOrderState();
-
   stopDriverTracking();
 
+  // 清理司机标记
   if (driverMarker) {
     map.remove(driverMarker);
     driverMarker = null;
+    console.log('🗑️ 已清理司机标记');
   }
 
-  if (window.driverRouteLine) {
-    map.remove(window.driverRouteLine);
-    window.driverRouteLine = null;
-  }
+  // 清理所有司机路径
+  clearAllDriverRoutes();
 
+  // 恢复乘客路径为蓝色
   if (routeLine) {
     routeLine.setOptions({
       strokeColor: "#409EFF",
       strokeWeight: 6,
       strokeOpacity: 0.8,
     });
+    console.log('🔄 乘客路径已恢复为蓝色');
   }
 
-  // WebSocket连接现在由全局store管理
-
   // 重置路线初始化标记
   window.routeInitialized = false;
-
   canOrder.value = true;
   isCalling.value = false;
 
@@ -1837,6 +2148,8 @@ const resetOrderState = () => {
 
   // 重新检查未支付订单
   orderStore.checkUnpaidOrders();
+  
+  console.log('✅ 订单状态重置完成');
 };
 
 
@@ -1858,6 +2171,22 @@ const restoreOrderMapElements = () => {
     return;
   }
   
+  // 🔑 关键修复：首先设置目的地信息，然后恢复标记
+  if (currentOrder.value.destinationLatitude && currentOrder.value.destinationLongitude) {
+    console.log('🎯 设置目的地信息');
+    destination.value = {
+      name: currentOrder.value.destinationAddress,
+      location: {
+        lng: currentOrder.value.destinationLongitude,
+        lat: currentOrder.value.destinationLatitude
+      }
+    };
+    destinationKeyword.value = currentOrder.value.destinationAddress;
+  }
+  
+  // 然后恢复地图标记
+  restoreMapMarkers();
+  
   console.log('📋 当前订单状态:', orderStatus.value);
   console.log('🚗 司机信息:', driverInfo.value);
   
@@ -1876,20 +2205,9 @@ const restoreOrderMapElements = () => {
     }
   }
   
-  // 如果有目的地信息，恢复路线规划
-  if (currentOrder.value.destinationLatitude && currentOrder.value.destinationLongitude) {
+  // 重新规划路线（目的地信息已在上面设置）
+  if (destination.value) {
     console.log('🗺️ 恢复路线规划');
-    
-    // 设置目的地信息
-    destination.value = {
-      name: currentOrder.value.destinationAddress,
-      location: {
-        lng: currentOrder.value.destinationLongitude,
-        lat: currentOrder.value.destinationLatitude
-      }
-    };
-    
-    // 重新规划路线
     setTimeout(() => {
       try {
         showRoute();
diff --git a/frontend/test-driver-amap-api-navigation.html b/frontend/test-driver-amap-api-navigation.html
new file mode 100644
index 00000000..e1c4df8c
--- /dev/null
+++ b/frontend/test-driver-amap-api-navigation.html
@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>司机端高德API转向提示测试</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+            background-color: #f5f5f5;
+        }
+        .container {
+            background: white;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            margin-bottom: 20px;
+        }
+        .test-section {
+            border: 1px solid #ddd;
+            border-radius: 6px;
+            padding: 15px;
+            margin: 10px 0;
+        }
+        .code {
+            background: #f8f9fa;
+            padding: 10px;
+            border-radius: 4px;
+            font-family: 'Courier New', monospace;
+            font-size: 14px;
+            border: 1px solid #e9ecef;
+            margin: 10px 0;
+            overflow-x: auto;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>🌐 司机端高德API转向提示测试</h1>
+        <p>测试司机端调用高德地图Web服务API获取详细转向提示的功能。</p>
+    </div>
+
+    <div class="container">
+        <div class="test-section">
+            <h3>📋 功能概述</h3>
+            <p><strong>主要功能：</strong>调用高德地图Web服务API获取详细的路线规划和转向指示</p>
+            <p><strong>API优势：</strong>比JS API提供更详细的导航指示和路径信息</p>
+            <p><strong>备用机制：</strong>Web API失败时自动降级到JS API</p>
+        </div>
+    </div>
+
+    <div class="container">
+        <div class="test-section">
+            <h3>🔧 实现的关键功能</h3>
+            
+            <h4>1. 高德Web服务API调用</h4>
+            <div class="code">
+// 使用高德Web服务API进行路线规划
+const planRouteWithWebAPI = async (origin, destination, instruction) => {
+  const apiKey = 'de2d5b3782511b03e23a18685faccead'
+  const originStr = `${origin[0]},${origin[1]}`
+  const destinationStr = `${destination[0]},${destination[1]}`
+  
+  const apiUrl = `https://restapi.amap.com/v3/direction/driving?` +
+    `origin=${originStr}&amp;` +
+    `destination=${destinationStr}&amp;` +
+    `key=${apiKey}&amp;` +
+    `strategy=0&amp;` +        // 速度优先
+    `extensions=all&amp;` +    // 返回详细信息
+    `steps_info=1&amp;` +      // 返回步骤信息
+    `ferry=0&amp;` +           // 不走轮渡
+    `output=json`
+  
+  const response = await fetch(apiUrl)
+  const data = await response.json()
+  
+  if (data.status === '1' && data.route.paths.length &gt; 0) {
+    const path = data.route.paths[0]
+    const navigationData = parseWebAPINavigationInstructions(path, instruction)
+    driverStore.setNavigationInfo(navigationData)
+    drawRouteFromWebAPI(path)
+    return true
+  }
+}
+            </div>
+
+            <h4>2. 转向指示识别</h4>
+            <div class="code">
+// 解析转向指示
+if (instruction.includes('左转')) {
+  nextInstruction = `${distance}米后左转`
+  instructionIcon = '↖️'
+} else if (instruction.includes('右转')) {
+  nextInstruction = `${distance}米后右转`
+  instructionIcon = '↗️'
+} else if (instruction.includes('掉头')) {
+  nextInstruction = `${distance}米后掉头`
+  instructionIcon = '🔄'
+}
+            </div>
+        </div>
+    </div>
+
+    <div class="container">
+        <div class="test-section">
+            <h3>🧪 测试步骤</h3>
+            <ol>
+                <li><strong>司机上线并接单</strong> - 触发导航功能</li>
+                <li><strong>观察控制台日志</strong> - 查看API调用过程</li>
+                <li><strong>验证转向提示</strong> - 检查导航面板显示</li>
+                <li><strong>测试实时更新</strong> - 验证位置变化时的更新</li>
+            </ol>
+        </div>
+    </div>
+
+    <div class="container">
+        <div class="test-section">
+            <h3>🔍 调试信息</h3>
+            <h4>关键日志</h4>
+            <div class="code">
+🌐 使用高德Web服务API进行路线规划
+📞 调用高德Web API: [URL]
+📋 高德Web API响应: [数据]
+✅ Web API导航信息已更新
+🧭 导航指示已更新: 300米后右转
+            </div>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/frontend/test-driver-map-interaction.html b/frontend/test-driver-map-interaction.html
new file mode 100644
index 00000000..f15ac5e7
--- /dev/null
+++ b/frontend/test-driver-map-interaction.html
@@ -0,0 +1,349 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>司机端地图交互功能测试</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+            background-color: #f5f5f5;
+        }
+        .container {
+            background: white;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            margin-bottom: 20px;
+        }
+        .test-section {
+            border: 1px solid #ddd;
+            border-radius: 6px;
+            padding: 15px;
+            margin: 10px 0;
+        }
+        .step {
+            background: #f8f9fa;
+            padding: 10px;
+            margin: 8px 0;
+            border-left: 4px solid #007bff;
+            border-radius: 4px;
+        }
+        .expected {
+            background: #d4edda;
+            border-left-color: #28a745;
+        }
+        .warning {
+            background: #fff3cd;
+            border-left-color: #ffc107;
+            color: #856404;
+        }
+        .error {
+            background: #f8d7da;
+            border-left-color: #dc3545;
+            color: #721c24;
+        }
+        .success {
+            background: #d1ecf1;
+            border-left-color: #17a2b8;
+            color: #0c5460;
+        }
+        .code {
+            background: #f8f9fa;
+            padding: 10px;
+            border-radius: 4px;
+            font-family: 'Courier New', monospace;
+            font-size: 14px;
+            border: 1px solid #e9ecef;
+            margin: 10px 0;
+        }
+        .debug-info {
+            background: #e7f3ff;
+            border: 1px solid #b3d9ff;
+            border-radius: 4px;
+            padding: 10px;
+            margin: 10px 0;
+        }
+        .debug-info h4 {
+            margin-top: 0;
+            color: #0066cc;
+        }
+        .status-indicator {
+            display: inline-block;
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            margin-right: 8px;
+        }
+        .status-success { background-color: #28a745; }
+        .status-error { background-color: #dc3545; }
+        .status-info { background-color: #17a2b8; }
+        .test-button {
+            background: #007bff;
+            color: white;
+            border: none;
+            padding: 8px 16px;
+            border-radius: 4px;
+            cursor: pointer;
+            margin: 5px;
+        }
+        .test-button:hover {
+            background: #0056b3;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>🗺️ 司机端地图交互功能测试</h1>
+        <p>测试司机端地图的拖拽、缩放等交互功能是否正常工作。</p>
+    </div>
+
+    <div class="container">
+        <div class="test-section">
+            <h3>📋 修复的问题</h3>
+            <div class="step success">
+                <strong>1. 启用了地图交互功能</strong>
+                <div class="code">
+map = new window.AMap.Map('driverMapContainer', {
+  resizeEnable: true,        // 启用地图自适应
+  dragEnable: true,          // 启用拖拽 ⭐
+  zoomEnable: true,          // 启用缩放 ⭐
+  doubleClickZoom: true,     // 启用双击缩放 ⭐
+  keyboardEnable: true,      // 启用键盘操作
+  scrollWheel: true,         // 启用滚轮缩放 ⭐
+  touchZoom: true,           // 启用触摸缩放 ⭐
+  rotateEnable: false,       // 禁用旋转（避免误操作）
+  pitchEnable: false,        // 禁用倾斜（保持2D视图）
+})
+                </div>
+            </div>
+            
+            <div class="step success">
+                <strong>2. 优化了CSS样式</strong>
+                <div class="code">
+#driverMapContainer {
+  width: 100%;
+  height: 100%;
+  pointer-events: auto;      // 确保可以接收交互事件
+  touch-action: none;        // 防止移动端手势干扰
+}
+                </div>
+            </div>
+            
+            <div class="step success">
+                <strong>3. 添加了调试功能</strong>
+                <div class="code">
+// 暴露到全局的调试函数
+window.testMapInteraction()  // 测试地图交互状态
+window.driverMap            // 地图对象引用
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="container">
+        <div class="test-section">
+            <h3>🧪 测试步骤</h3>
+            
+            <div class="step">
+                <span class="status-indicator status-info"></span>
+                <strong>步骤 1：</strong>打开司机端地图页面
+                <div class="code">
+1. 访问司机端地图页面
+2. 等待地图完全加载
+3. 观察控制台日志确认地图初始化成功
+                </div>
+            </div>
+
+            <div class="step">
+                <span class="status-indicator status-info"></span>
+                <strong>步骤 2：</strong>测试拖拽功能
+                <div class="code">
+1. 在地图上按住鼠标左键
+2. 拖拽地图到不同位置
+3. 观察控制台是否输出拖拽日志
+4. 确认地图视野确实发生了移动
+                </div>
+            </div>
+
+            <div class="step">
+                <span class="status-indicator status-info"></span>
+                <strong>步骤 3：</strong>测试缩放功能
+                <div class="code">
+1. 使用鼠标滚轮在地图上滚动
+2. 双击地图进行缩放
+3. 观察控制台的缩放级别日志
+4. 确认地图确实放大或缩小了
+                </div>
+            </div>
+
+            <div class="step">
+                <span class="status-indicator status-info"></span>
+                <strong>步骤 4：</strong>运行调试命令
+                <div class="code">
+在浏览器控制台运行以下命令：
+window.testMapInteraction()
+
+期望输出：
+{
+  dragEnable: true,
+  zoomEnable: true,
+  scrollWheel: true,
+  doubleClickZoom: true,
+  zoom: 16,
+  center: {...}
+}
+                </div>
+            </div>
+
+            <div class="step expected">
+                <span class="status-indicator status-success"></span>
+                <strong>步骤 5：</strong>验证交互功能正常
+                <div class="code">
+<strong>期望结果：</strong>
+✅ 可以拖拽地图移动视野
+✅ 可以使用滚轮缩放地图
+✅ 可以双击地图进行缩放
+✅ 控制台显示相应的交互日志
+✅ testMapInteraction()返回所有功能都为true
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="container">
+        <div class="test-section">
+            <h3>🔍 调试信息</h3>
+            
+            <div class="debug-info">
+                <h4>控制台关键日志</h4>
+                <div class="code">
+<strong>地图初始化：</strong>
+- "🗺️ 初始化司机端地图，启用所有交互功能..."
+- "✅ 司机端地图创建成功，交互功能已启用"
+- "✅ 司机端地图加载完成"
+- "🔧 地图对象已暴露到 window.driverMap"
+
+<strong>交互事件：</strong>
+- "🖱️ 开始拖拽地图"
+- "🖱️ 结束拖拽地图"
+- "🔍 地图缩放级别: 17"
+- "🖱️ 点击地图: 116.123, 39.456"
+                </div>
+            </div>
+
+            <div class="debug-info">
+                <h4>调试命令</h4>
+                <div class="code">
+<strong>测试地图交互状态：</strong>
+window.testMapInteraction()
+
+<strong>手动设置地图中心：</strong>
+window.driverMap.setCenter([116.397428, 39.90923])
+
+<strong>手动设置缩放级别：</strong>
+window.driverMap.setZoom(18)
+
+<strong>获取当前地图状态：</strong>
+window.driverMap.getStatus()
+                </div>
+            </div>
+
+            <div class="debug-info">
+                <h4>故障排除</h4>
+                <div class="step error">
+                    <strong>如果拖拽不工作：</strong>
+                    <ul>
+                        <li>检查dragEnable是否为true</li>
+                        <li>确认没有其他元素覆盖地图</li>
+                        <li>检查CSS的pointer-events设置</li>
+                        <li>验证地图容器的z-index层级</li>
+                    </ul>
+                </div>
+                <div class="step error">
+                    <strong>如果缩放不工作：</strong>
+                    <ul>
+                        <li>检查zoomEnable和scrollWheel是否为true</li>
+                        <li>确认浏览器没有禁用滚轮事件</li>
+                        <li>检查touch-action CSS属性</li>
+                        <li>验证双击缩放功能</li>
+                    </ul>
+                </div>
+                <div class="step error">
+                    <strong>如果移动端不工作：</strong>
+                    <ul>
+                        <li>检查touchZoom是否为true</li>
+                        <li>确认touch-action: none设置</li>
+                        <li>验证移动端手势识别</li>
+                        <li>检查viewport设置</li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="container">
+        <div class="test-section">
+            <h3>🎯 交互功能说明</h3>
+            
+            <div class="step success">
+                <strong>拖拽功能 (dragEnable: true)</strong>
+                <p>允许用户通过鼠标拖拽或触摸滑动来移动地图视野</p>
+            </div>
+            
+            <div class="step success">
+                <strong>缩放功能 (zoomEnable: true)</strong>
+                <p>允许用户通过各种方式缩放地图：滚轮、双击、触摸手势</p>
+            </div>
+            
+            <div class="step success">
+                <strong>滚轮缩放 (scrollWheel: true)</strong>
+                <p>允许用户使用鼠标滚轮进行地图缩放操作</p>
+            </div>
+            
+            <div class="step success">
+                <strong>双击缩放 (doubleClickZoom: true)</strong>
+                <p>允许用户双击地图进行放大操作</p>
+            </div>
+            
+            <div class="step success">
+                <strong>触摸缩放 (touchZoom: true)</strong>
+                <p>允许移动端用户使用双指手势进行缩放操作</p>
+            </div>
+            
+            <div class="step warning">
+                <strong>禁用的功能</strong>
+                <p>rotateEnable: false - 禁用旋转避免误操作<br>
+                   pitchEnable: false - 禁用倾斜保持2D视图</p>
+            </div>
+        </div>
+    </div>
+
+    <div class="container">
+        <div class="test-section success">
+            <h3>✅ 测试完成标准</h3>
+            <div class="step expected">
+                <strong>基本交互功能：</strong>
+                <ul>
+                    <li>✅ 地图可以正常拖拽移动</li>
+                    <li>✅ 滚轮缩放功能正常</li>
+                    <li>✅ 双击缩放功能正常</li>
+                    <li>✅ 移动端触摸操作正常</li>
+                </ul>
+            </div>
+            <div class="step expected">
+                <strong>调试功能：</strong>
+                <ul>
+                    <li>✅ 控制台显示交互事件日志</li>
+                    <li>✅ testMapInteraction()函数正常工作</li>
+                    <li>✅ 地图对象正确暴露到全局</li>
+                    <li>✅ 所有交互状态都为true</li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/frontend/test-driver-map-simple.html b/frontend/test-driver-map-simple.html
new file mode 100644
index 00000000..b60b9434
--- /dev/null
+++ b/frontend/test-driver-map-simple.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>司机端地图简单测试</title>
+    <style>
+        #mapContainer {
+            width: 100%;
+            height: 400px;
+            border: 1px solid #ccc;
+        }
+        .info {
+            padding: 10px;
+            margin: 10px 0;
+            background: #f0f0f0;
+            border-radius: 4px;
+        }
+    </style>
+</head>
+<body>
+    <h1>司机端地图简单测试</h1>
+    
+    <div class="info">
+        <div id="status">正在加载高德地图...</div>
+    </div>
+    
+    <div id="mapContainer"></div>
+    
+    <script>
+        // 设置安全密钥
+        window._AMapSecurityConfig = {
+            securityJsCode: '8b011259082e987043911232b625e2ca'
+        };
+        
+        const status = document.getElementById('status');
+        
+        // 加载高德地图API
+        const script = document.createElement('script');
+        script.src = 'https://webapi.amap.com/maps?v=1.4.15&key=de2d5b3782511b03e23a18685faccead&plugin=AMap.Geolocation';
+        
+        script.onload = () => {
+            status.textContent = '✅ 高德地图API加载成功，正在初始化地图...';
+            
+            try {
+                // 创建地图实例
+                const map = new AMap.Map('mapContainer', {
+                    resizeEnable: true,
+                    zoom: 15,
+                    center: [116.397428, 39.90923]
+                });
+                
+                status.textContent = '✅ 地图初始化成功！';
+                
+                // 添加定位控件
+                AMap.plugin(['AMap.Geolocation'], () => {
+                    const geolocation = new AMap.Geolocation({
+                        enableHighAccuracy: true,
+                        timeout: 10000
+                    });
+                    
+                    map.addControl(geolocation);
+                    
+                    geolocation.getCurrentPosition((status, result) => {
+                        if (status === 'complete') {
+                            console.log('定位成功:', result);
+                            document.getElementById('status').textContent = '✅ 定位成功！';
+                        } else {
+                            console.log('定位失败:', status, result);
+                            document.getElementById('status').textContent = '⚠️ 定位失败，但地图加载正常';
+                        }
+                    });
+                });
+                
+            } catch (error) {
+                status.textContent = '❌ 地图初始化失败: ' + error.message;
+                console.error('地图初始化失败:', error);
+            }
+        };
+        
+        script.onerror = (error) => {
+            status.textContent = '❌ 高德地图API加载失败';
+            console.error('高德地图API加载失败:', error);
+        };
+        
+        document.head.appendChild(script);
+    <
\ No newline at end of file
diff --git a/frontend/test-driver-navigation-simple.html b/frontend/test-driver-navigation-simple.html
new file mode 100644
index 00000000..1f8210e2
--- /dev/null
+++ b/frontend/test-driver-navigation-simple.html
@@ -0,0 +1,201 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>司机端转向提示功能测试</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            background-color: #f5f5f5;
+        }
+        .container {
+            background: white;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            margin-bottom: 20px;
+        }
+        .navigation-demo {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 20px;
+            border-radius: 12px;
+            box-shadow: 0 6px 20px rgba(0,0,0,0.2);
+            margin: 15px 0;
+        }
+        .demo-instruction {
+            display: flex;
+            align-items: center;
+            gap: 15px;
+            margin-bottom: 15px;
+        }
+        .demo-icon {
+            font-size: 32px;
+            min-width: 40px;
+            text-align: center;
+        }
+        .demo-content {
+            flex: 1;
+        }
+        .demo-text {
+            font-size: 18px;
+            font-weight: bold;
+            margin-bottom: 5px;
+            line-height: 1.2;
+        }
+        .demo-distance {
+            font-size: 16px;
+            opacity: 0.9;
+            color: #e8f4fd;
+        }
+        .demo-summary {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding-top: 15px;
+            border-top: 1px solid rgba(255,255,255,0.2);
+            font-size: 14px;
+        }
+        .demo-stats {
+            display: flex;
+            gap: 20px;
+            opacity: 0.8;
+        }
+        .step {
+            background: #f8f9fa;
+            padding: 10px;
+            margin: 8px 0;
+            border-left: 4px solid #007bff;
+            border-radius: 4px;
+        }
+        .expected {
+            background: #d4edda;
+            border-left-color: #28a745;
+        }
+        .code {
+            background: #f8f9fa;
+            padding: 10px;
+            border-radius: 4px;
+            font-family: 'Courier New', monospace;
+            font-size: 14px;
+            border: 1px solid #e9ecef;
+            margin: 10px 0;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>🧭 司机端转向提示功能测试</h1>
+        <p>测试司机端的实时导航转向提示功能。</p>
+    </div>
+
+    <div class="container">
+        <h3>🎯 导航指示面板效果预览</h3>
+        
+        <div class="navigation-demo">
+            <div class="demo-instruction">
+                <div class="demo-icon">↗️</div>
+                <div class="demo-content">
+                    <div class="demo-text">300米后右转</div>
+                    <div class="demo-distance">300米</div>
+                </div>
+            </div>
+            <div class="demo-summary">
+                <div class="demo-stats">
+                    <span>总距离: 2.5km</span>
+                    <span>预计: 8分钟</span>
+                </div>
+                <button style="background: rgba(255,255,255,0.2); color: white; border: 1px solid rgba(255,255,255,0.3); padding: 5px 10px; border-radius: 4px; cursor: pointer;">停止导航</button>
+            </div>
+        </div>
+        
+        <h4>不同转向指示示例</h4>
+        <div class="code">
+⬆️ 直行500米
+↗️ 200米后右转  
+↖️ 150米后左转
+🔄 100米后掉头
+🛣️ 进入高速公路
+🚪 高速出口
+🧭 继续按导航路线行驶
+        </div>
+    </div>
+
+    <div class="container">
+        <h3>🧪 测试步骤</h3>
+        
+        <div class="step">
+            <strong>步骤 1：</strong>司机上线并接单
+            <div class="code">
+1. 打开司机端地图页面
+2. 切换到在线状态
+3. 接收并接受一个订单
+4. 确认订单状态为 ASSIGNED
+            </div>
+        </div>
+
+        <div class="step expected">
+            <strong>步骤 2：</strong>验证导航面板显示
+            <div class="code">
+期望结果：
+✅ 页面顶部显示导航指示面板
+✅ 显示转向图标（如 ↗️）
+✅ 显示转向指示文字（如"300米后右转"）
+✅ 显示距离信息
+✅ 显示总距离和预计时间
+✅ 有停止导航按钮
+            </div>
+        </div>
+
+        <div class="step">
+            <strong>步骤 3：</strong>检查控制台日志
+            <div class="code">
+关键日志：
+- "🗺️ 开始路线规划"
+- "✅ 导航信息已更新"
+- "🧭 导航信息已设置"
+- "🧭 导航指示已更新"
+            </div>
+        </div>
+    </div>
+
+    <div class="container">
+        <h3>🔧 已修复的问题</h3>
+        
+        <div class="step expected">
+            <strong>1. 添加了缺失的parseNavigationInstructions函数</strong>
+            <p>解析高德地图API返回的路线步骤，提取转向指示信息</p>
+        </div>
+        
+        <div class="step expected">
+            <strong>2. 添加了司机store的setNavigationInfo方法</strong>
+            <p>允许设置和保存导航信息到store中</p>
+        </div>
+        
+        <div class="step expected">
+            <strong>3. 更新了导航面板模板和样式</strong>
+            <p>使用新的转向提示面板，显示图标、文字和距离信息</p>
+        </div>
+        
+        <div class="step expected">
+            <strong>4. 修复了测试页面的HTML解析错误</strong>
+            <p>解决了Vite开发服务器的HTML解析问题</p>
+        </div>
+    </div>
+
+    <div class="container">
+        <h3>🎯 功能特点</h3>
+        <ul>
+            <li><strong>智能转向识别：</strong>自动识别左转、右转、掉头等动作</li>
+            <li><strong>精确距离显示：</strong>显示到下一个转向点的准确距离</li>
+            <li><strong>美观界面设计：</strong>渐变背景，清晰的图标和文字</li>
+            <li><strong>实时更新：</strong>每5秒更新位置和导航指示</li>
+            <li><strong>多重备用方案：</strong>Web API、JS API、简化方案三重保障</li>
+        </ul>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/frontend/test-map-connection.html b/frontend/test-map-connection.html
new file mode 100644
index 00000000..b116c749
--- /dev/null
+++ b/frontend/test-map-connection.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>高德地图连接测试</title>
+  </head>
+  <body>
+    <h1>高德地图API连接测试</h1>
+    <div id="result"></div>
+
+    <script>
+      // 测试高德地图API连接
+      const testUrl =
+        "https://webapi.amap.com/maps?v=1.4.15&key=de2d5b3782511b03e23a18685faccead&plugin=AMap.Geolocation";
+
+      console.log("测试URL:", testUrl);
+
+      const script = document.createElement("script");
+      script.src = testUrl;
+      script.onload = () => {
+        document.getElementById("result").innerHTML = "✅ 高德地图API连接成功";
+        console.log("✅ 高德地图API加载成功");
+      };
+      script.onerror = (error) => {
+        document.getElementById("result").innerHTML = "❌ 高德地图API连接失败";
+        console.error("❌ 高德地图API加载失败:", error);
+      };
+      document.head.appendChild(script);
+    </script>
+  </body>
+</html>
diff --git a/frontend/test-passenger-cancel-driver-cleanup.html b/frontend/test-passenger-cancel-driver-cleanup.html
new file mode 100644
index 00000000..e19c34d0
--- /dev/null
+++ b/frontend/test-passenger-cancel-driver-cleanup.html
@@ -0,0 +1,428 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>乘客取消订单 - 司机端清理测试</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+            background-color: #f5f5f5;
+        }
+        .container {
+            background: white;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            margin-bottom: 20px;
+        }
+        .test-section {
+            border: 1px solid #ddd;
+            border-radius: 6px;
+            padding: 15px;
+            margin: 10px 0;
+        }
+        .test-section h3 {
+            margin-top: 0;
+            color: #333;
+        }
+        .step {
+            background: #f8f9fa;
+            padding: 10px;
+            margin: 8px 0;
+            border-left: 4px solid #007bff;
+            border-radius: 4px;
+        }
+        .expected {
+            background: #d4edda;
+            border-left-color: #28a745;
+        }
+        .warning {
+            background: #fff3cd;
+            border-left-color: #ffc107;
+            color: #856404;
+        }
+        .error {
+            background: #f8d7da;
+            border-left-color: #dc3545;
+            color: #721c24;
+        }
+        .success {
+            background: #d1ecf1;
+            border-left-color: #17a2b8;
+            color: #0c5460;
+        }
+        .code {
+            background: #f8f9fa;
+            padding: 10px;
+            border-radius: 4px;
+            font-family: 'Courier New', monospace;
+            font-size: 14px;
+            border: 1px solid #e9ecef;
+            margin: 10px 0;
+        }
+        .highlight {
+            background: #fff3cd;
+            padding: 2px 4px;
+            border-radius: 3px;
+        }
+        .debug-info {
+            background: #e7f3ff;
+            border: 1px solid #b3d9ff;
+            border-radius: 4px;
+            padding: 10px;
+            margin: 10px 0;
+        }
+        .debug-info h4 {
+            margin-top: 0;
+            color: #0066cc;
+        }
+        .status-indicator {
+            display: inline-block;
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            margin-right: 8px;
+        }
+        .status-pending { background-color: #ffc107; }
+        .status-success { background-color: #28a745; }
+        .status-error { background-color: #dc3545; }
+        .status-info { background-color: #17a2b8; }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>🚫 乘客取消订单 - 司机端清理测试</h1>
+        <p>测试乘客取消订单后，司机端是否正确接收通知并清理路径规划和地图标记。</p>
+    </div>
+
+    <div class="container">
+        <div class="test-section">
+            <h3>📋 测试场景</h3>
+            <div class="step">
+                <strong>场景描述：</strong>乘客发起订单，司机接单并开始导航，然后乘客取消订单
+            </div>
+            <div class="step">
+                <strong>测试目标：</strong>验证司机端能正确接收取消通知并清理所有相关状态
+            </div>
+        </div>
+    </div>
+
+    <div class="container">
+        <div class="test-section">
+            <h3>🔧 修复内容</h3>
+            
+            <div class="debug-info">
+                <h4>1. 乘客端取消订单增强</h4>
+                <div class="code">
+// 乘客取消订单时的处理逻辑
+const handleCancelOrder = async () => {
+  // ... 确认对话框 ...
+  
+  console.log("🚫 准备取消订单:", currentOrder.value);
+  console.log("👨‍✈️ 司机ID:", currentOrder.value.driverId);
+  
+  const response = await fetch(cancelUrl, {
+    method: "POST",
+    headers: { Authorization: `Bearer ${userStore.token}` }
+  });
+
+  if (response.ok && result.code === 200) {
+    console.log("✅ 订单取消成功，后端已通知司机");
+    
+    // 立即清理乘客端的订单状态和地图元素
+    resetOrderState();
+    clearAllDriverRoutes();
+    
+    // 恢复乘客路径为蓝色
+    if (routeLine && routeLine.setOptions) {
+      routeLine.setOptions({
+        strokeColor: '#1890ff',
+        strokeWeight: 6,
+        strokeOpacity: 0.8
+      });
+    }
+    
+    ElMessage.success("订单已取消，司机已收到通知");
+  }
+};
+                </div>
+            </div>
+
+            <div class="debug-info">
+                <h4>2. 后端通知司机增强</h4>
+                <div class="code">
+// 后端OrderController.java - 取消订单接口
+if (order.getDriverId() != null) {
+  System.out.println("✅ 订单已分配给司机，开始释放司机并发送通知");
+  
+  // 释放司机状态
+  driverRedisService.markDriverFree(order.getDriverId());
+  
+  // 通知司机订单已被乘客取消（增强版通知）
+  webSocketNotificationService.notifyDriverOrderCancelled(
+    order.getDriverId(), 
+    orderId, 
+    "乘客已取消订单，请清理路线规划"
+  );
+}
+                </div>
+            </div>
+
+            <div class="debug-info">
+                <h4>3. 司机端地图清理逻辑</h4>
+                <div class="code">
+// 司机端DriverMap.vue - 订单取消处理
+case "ORDER_CANCELLED":
+  console.log("❌ 处理订单取消");
+  if (data.orderId && currentOrder.value) {
+    const currentOrderId = currentOrder.value.orderId || currentOrder.value.id
+    const cancelledOrderId = data.orderId
+    
+    if (currentOrderId == cancelledOrderId) {
+      console.log('✅ 当前订单被取消，重置状态并清理地图')
+      
+      // 清理地图上的订单相关元素
+      clearOrderMapElements();
+      
+      // 重置订单状态
+      resetOrderState();
+      
+      // 停止导航
+      stopNavigation();
+      
+      ElMessage({
+        message: `订单已被乘客取消：${data.reason || '乘客取消'}`,
+        type: 'warning',
+        duration: 5000,
+        showClose: true
+      });
+    }
+  }
+  break;
+
+case "CLEAR_ROUTE":
+  console.log("🧹 处理清理路线请求");
+  clearOrderMapElements();
+  stopNavigation();
+  resetOrderState();
+  ElMessage({
+    message: '路线已清理，订单已取消',
+    type: 'info',
+    duration: 3000
+  });
+  break;
+                </div>
+            </div>
+
+            <div class="debug-info">
+                <h4>4. 司机端清理函数</h4>
+                <div class="code">
+// 清理订单相关的地图元素
+const clearOrderMapElements = () => {
+  console.log('🧹 清理订单相关的地图元素')
+  
+  // 清理上车点标记
+  if (pickupMarker) {
+    map.remove(pickupMarker)
+    pickupMarker = null
+  }
+  
+  // 清理目的地标记
+  if (destinationMarker) {
+    map.remove(destinationMarker)
+    destinationMarker = null
+  }
+  
+  // 清理路线
+  if (routeLine) {
+    map.remove(routeLine)
+    routeLine = null
+  }
+  
+  // 清理导航信息
+  driverStore.clearNavigationInfo()
+}
+
+// 停止导航
+const stopNavigation = () => {
+  // 清理导航定时器
+  if (navigationTimer) {
+    clearInterval(navigationTimer)
+    navigationTimer = null
+  }
+  
+  // 清理导航信息
+  driverStore.clearNavigationInfo()
+}
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="container">
+        <div class="test-section">
+            <h3>🧪 测试步骤</h3>
+            
+            <div class="step">
+                <span class="status-indicator status-info"></span>
+                <strong>步骤 1：</strong>乘客端创建订单
+                <div class="code">
+1. 打开乘客端地图页面
+2. 设置起点和终点
+3. 点击"立即叫车"创建订单
+4. 确认订单状态为 PENDING
+                </div>
+            </div>
+
+            <div class="step">
+                <span class="status-indicator status-info"></span>
+                <strong>步骤 2：</strong>司机接单并开始导航
+                <div class="code">
+1. 打开司机端地图页面
+2. 确保司机在线状态
+3. 接收并接受订单
+4. 确认地图上显示：
+   - 上车点标记（绿色）
+   - 目的地标记（红色）
+   - 导航路线（蓝色或红色）
+5. 确认订单状态为 ASSIGNED
+                </div>
+            </div>
+
+            <div class="step warning">
+                <span class="status-indicator status-pending"></span>
+                <strong>步骤 3：</strong>乘客取消订单
+                <div class="code">
+1. 在乘客端点击"取消订单"按钮
+2. 确认取消对话框
+3. 观察乘客端反应：
+   - 显示"订单已取消，司机已收到通知"
+   - 订单状态重置
+   - 地图清理完成
+                </div>
+            </div>
+
+            <div class="step expected">
+                <span class="status-indicator status-success"></span>
+                <strong>步骤 4：</strong>验证司机端反应
+                <div class="code">
+<strong>期望结果：</strong>
+✅ 司机收到明确的取消通知消息
+✅ 地图上的上车点标记被清除
+✅ 地图上的目的地标记被清除  
+✅ 导航路线被完全清除
+✅ 导航定时器被停止
+✅ 订单状态被重置为空
+✅ 司机可以接收新订单
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="container">
+        <div class="test-section">
+            <h3>🔍 调试信息</h3>
+            
+            <div class="debug-info">
+                <h4>浏览器控制台日志关键词</h4>
+                <div class="code">
+<strong>乘客端：</strong>
+- "🚫 准备取消订单"
+- "✅ 订单取消成功，后端已通知司机"
+- "🧹 清理司机路径"
+
+<strong>司机端：</strong>
+- "❌ 收到订单取消通知"
+- "✅ 当前订单被取消，开始清理状态和地图"
+- "🧹 清理订单相关的地图元素"
+- "🛑 停止导航"
+- "🔄 重置司机订单状态"
+                </div>
+            </div>
+
+            <div class="debug-info">
+                <h4>WebSocket消息格式</h4>
+                <div class="code">
+<strong>司机接收的取消通知：</strong>
+{
+  "type": "ORDER_CANCELLED",
+  "orderId": "订单ID",
+  "reason": "乘客已取消订单，请清理路线规划",
+  "priority": "HIGH",
+  "timestamp": 时间戳
+}
+                </div>
+            </div>
+
+            <div class="debug-info">
+                <h4>故障排除</h4>
+                <div class="step error">
+                    <strong>如果司机没有收到通知：</strong>
+                    <ul>
+                        <li>检查WebSocket连接状态</li>
+                        <li>确认司机ID匹配</li>
+                        <li>查看后端日志确认通知发送</li>
+                    </ul>
+                </div>
+                <div class="step error">
+                    <strong>如果地图没有清理：</strong>
+                    <ul>
+                        <li>检查clearOrderMapElements函数调用</li>
+                        <li>确认地图对象存在</li>
+                        <li>查看控制台错误信息</li>
+                    </ul>
+                </div>
+                <div class="step error">
+                    <strong>如果订单状态没有重置：</strong>
+                    <ul>
+                        <li>检查resetOrderState函数调用</li>
+                        <li>确认store状态更新</li>
+                        <li>验证localStorage清理</li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="container">
+        <div class="test-section success">
+            <h3>✅ 测试完成标准</h3>
+            <div class="step expected">
+                <strong>测试通过条件：</strong>
+                <ul>
+                    <li>✅ 乘客取消订单后，司机立即收到明确的通知消息</li>
+                    <li>✅ 司机端地图上的所有订单相关标记和路线被完全清除</li>
+                    <li>✅ 司机端订单状态被正确重置，可以接收新订单</li>
+                    <li>✅ 导航功能被正确停止，不再更新位置</li>
+                    <li>✅ 整个过程用户体验流畅，没有残留状态</li>
+                </ul>
+            </div>
+        </div>
+    </div>
+
+    <div class="container">
+        <div class="test-section">
+            <h3>🎯 关键改进点</h3>
+            <div class="step success">
+                <strong>1. 双重通知机制：</strong>司机端同时监听订单队列和通知队列，确保消息送达
+            </div>
+            <div class="step success">
+                <strong>2. 完整地图清理：</strong>清理上车点、目的地标记和所有路线
+            </div>
+            <div class="step success">
+                <strong>3. 明确用户反馈：</strong>显示详细的取消原因和清理状态
+            </div>
+            <div class="step success">
+                <strong>4. 状态同步：</strong>前端store和localStorage状态完全同步
+            </div>
+            <div class="step success">
+                <strong>5. 错误处理：</strong>增加多种消息类型处理，提高容错性
+            </div>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/frontend/test-passenger-map-fixes.html b/frontend/test-passenger-map-fixes.html
new file mode 100644
index 00000000..eb51fa05
--- /dev/null
+++ b/frontend/test-passenger-map-fixes.html
@@ -0,0 +1,603 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>乘客端地图修复测试</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 20px;
+            background-color: #f5f5f5;
+        }
+        
+        .container {
+            max-width: 1000px;
+            margin: 0 auto;
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            overflow: hidden;
+        }
+        
+        .header {
+            background: linear-gradient(135deg, #409eff 0%, #337ecc 100%);
+            color: white;
+            padding: 20px;
+            text-align: center;
+        }
+        
+        .content {
+            padding: 20px;
+        }
+        
+        .fix-section {
+            margin-bottom: 25px;
+            padding: 15px;
+            border: 1px solid #ddd;
+            border-radius: 6px;
+            background: #fafafa;
+        }
+        
+        .fix-section h3 {
+            margin: 0 0 15px 0;
+            color: #333;
+            font-size: 16px;
+        }
+        
+        .problem-card {
+            background: #fef2f2;
+            border: 1px solid #fca5a5;
+            border-radius: 4px;
+            padding: 12px;
+            margin: 10px 0;
+            color: #dc2626;
+        }
+        
+        .solution-card {
+            background: #f0f9ff;
+            border: 1px solid #7dd3fc;
+            border-radius: 4px;
+            padding: 12px;
+            margin: 10px 0;
+            color: #0369a1;
+        }
+        
+        .code-block {
+            background: #f4f4f4;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            padding: 10px;
+            font-family: 'Courier New', monospace;
+            font-size: 11px;
+            margin: 10px 0;
+            overflow-x: auto;
+            white-space: pre-wrap;
+        }
+        
+        .test-button {
+            background: #409eff;
+            color: white;
+            border: none;
+            padding: 8px 16px;
+            border-radius: 4px;
+            cursor: pointer;
+            margin: 5px;
+            font-size: 12px;
+        }
+        
+        .test-button:hover {
+            background: #337ecc;
+        }
+        
+        .test-button.success {
+            background: #67c23a;
+        }
+        
+        .test-button.success:hover {
+            background: #5daf34;
+        }
+        
+        .test-button.warning {
+            background: #e6a23c;
+        }
+        
+        .test-button.warning:hover {
+            background: #cf9236;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>🗺️ 乘客端地图修复测试</h1>
+            <p>修复页面切换、订单取消和司机位置更新的问题</p>
+        </div>
+        
+        <div class="content">
+            <!-- 问题1: 页面切换后标记消失 -->
+            <div class="fix-section">
+                <h3>🔧 修复1: 页面切换后起始点和终点图标消失</h3>
+                
+                <div class="problem-card">
+                    <strong>问题描述:</strong><br>
+                    从其他页面切换回乘客地图页面时，上车点和目的地标记消失，只剩下路线。
+                </div>
+                
+                <div class="solution-card">
+                    <strong>解决方案:</strong><br>
+                    在页面激活时检查并恢复所有地图标记，确保标记状态与订单状态一致。
+                </div>
+                
+                <div class="code-block">// 修复代码 - 在initializePassengerMap中添加标记恢复逻辑
+const restoreMapMarkers = () => {
+  console.log('🔄 恢复地图标记...');
+  
+  // 恢复上车点标记
+  if (currentPosition.value && !pickupMarker) {
+    pickupMarker = new window.AMap.Marker({
+      position: [currentPosition.value.lng, currentPosition.value.lat],
+      map,
+      icon: new window.AMap.Icon({
+        image: 'https://webapi.amap.com/theme/v1.3/markers/n/start.png',
+        size: new window.AMap.Size(25, 34),
+        imageSize: new window.AMap.Size(25, 34)
+      }),
+      title: '上车点',
+      draggable: !currentOrder.value
+    });
+    
+    // 重新绑定拖拽事件
+    pickupMarker.on("dragend", handlePickupDrag);
+  }
+  
+  // 恢复目的地标记
+  if (destinationPosition.value && !destMarker) {
+    destMarker = new window.AMap.Marker({
+      position: [destinationPosition.value.lng, destinationPosition.value.lat],
+      map,
+      icon: new window.AMap.Icon({
+        image: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png',
+        size: new window.AMap.Size(25, 34),
+        imageSize: new window.AMap.Size(25, 34)
+      }),
+      title: '目的地'
+    });
+  }
+  
+  // 恢复司机标记（如果有当前订单）
+  if (currentOrder.value && driverInfo.value && !driverMarker) {
+    driverMarker = new window.AMap.Marker({
+      position: [driverInfo.value.longitude, driverInfo.value.latitude],
+      map,
+      icon: new window.AMap.Icon({
+        image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
+        size: new window.AMap.Size(25, 34),
+        imageSize: new window.AMap.Size(25, 34)
+      }),
+      title: '司机位置'
+    });
+  }
+  
+  console.log('✅ 地图标记恢复完成');
+};</div>
+                
+                <button class="test-button" onclick="testMarkerRestore()">测试标记恢复</button>
+            </div>
+            
+            <!-- 问题2: 订单取消后路径没有清除 -->
+            <div class="fix-section">
+                <h3>🔧 修复2: 取消订单后旧路径没有清除</h3>
+                
+                <div class="problem-card">
+                    <strong>问题描述:</strong><br>
+                    取消订单后，地图上仍然显示司机路径和乘客路径，没有被清理干净。
+                </div>
+                
+                <div class="solution-card">
+                    <strong>解决方案:</strong><br>
+                    增强resetOrderState函数，确保清理所有路径和司机相关标记。
+                </div>
+                
+                <div class="code-block">// 修复代码 - 增强resetOrderState函数
+const resetOrderState = () => {
+  console.log("🔄 重置订单状态");
+
+  orderStore.clearOrderState();
+  stopDriverTracking();
+
+  // 清理司机标记
+  if (driverMarker) {
+    map.remove(driverMarker);
+    driverMarker = null;
+    console.log('🗑️ 已清理司机标记');
+  }
+
+  // 清理司机路径
+  if (window.driverRouteLine) {
+    map.remove(window.driverRouteLine);
+    window.driverRouteLine = null;
+    console.log('🗑️ 已清理司机路径');
+  }
+
+  // 清理所有红色路径（司机路径）
+  const allOverlays = map.getAllOverlays();
+  allOverlays.forEach(overlay => {
+    if (overlay.CLASS_NAME === 'AMap.Polyline') {
+      try {
+        const options = overlay.getOptions();
+        if (options && options.strokeColor === '#FF6B6B') {
+          map.remove(overlay);
+          console.log('🗑️ 清理了红色司机路径');
+        }
+      } catch (error) {
+        // 忽略错误
+      }
+    }
+  });
+
+  // 恢复乘客路径为蓝色
+  if (routeLine) {
+    routeLine.setOptions({
+      strokeColor: "#409EFF",
+      strokeWeight: 6,
+      strokeOpacity: 0.8,
+    });
+    console.log('🔄 乘客路径已恢复为蓝色');
+  }
+
+  // 重置状态
+  window.routeInitialized = false;
+  canOrder.value = true;
+  isCalling.value = false;
+
+  // 恢复上车点标记的可拖拽状态
+  updatePickupMarkerDraggable();
+
+  // 重新检查未支付订单
+  orderStore.checkUnpaidOrders();
+  
+  console.log('✅ 订单状态重置完成');
+};</div>
+                
+                <button class="test-button" onclick="testOrderReset()">测试订单重置</button>
+            </div>
+            
+            <!-- 问题3: 司机位置更新后旧路径没有清除 -->
+            <div class="fix-section">
+                <h3>🔧 修复3: 司机位置更新后旧路径没有清除</h3>
+                
+                <div class="problem-card">
+                    <strong>问题描述:</strong><br>
+                    司机位置更新时，旧的司机路径没有被清除，导致地图上出现多条路径。
+                </div>
+                
+                <div class="solution-card">
+                    <strong>解决方案:</strong><br>
+                    在司机位置更新时，先清除所有旧的司机路径，再规划新路径。
+                </div>
+                
+                <div class="code-block">// 修复代码 - 增强司机位置更新处理
+const updateDriverLocation = (data) => {
+  console.log("📍 更新司机位置:", data);
+
+  // 先清理所有旧的司机路径
+  clearAllDriverRoutes();
+
+  // 更新司机标记位置
+  if (driverMarker) {
+    driverMarker.setPosition([data.longitude, data.latitude]);
+    driverMarker.setAnimation("AMAP_ANIMATION_BOUNCE");
+    setTimeout(() => {
+      if (driverMarker) {
+        driverMarker.setAnimation("AMAP_ANIMATION_NONE");
+      }
+    }, 1000);
+  } else {
+    // 创建司机标记
+    driverMarker = new window.AMap.Marker({
+      position: [data.longitude, data.latitude],
+      map,
+      icon: new window.AMap.Icon({
+        image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
+        size: new window.AMap.Size(25, 34),
+        imageSize: new window.AMap.Size(25, 34)
+      }),
+      title: '司机位置'
+    });
+  }
+
+  // 根据订单状态规划新路径
+  if (currentOrder.value) {
+    if (currentOrder.value.status === 'ASSIGNED' || currentOrder.value.status === 'PICKUP') {
+      // 司机前往上车点
+      updateDriverRoute(
+        data.longitude, data.latitude,
+        currentOrder.value.pickupLongitude, currentOrder.value.pickupLatitude
+      );
+    } else if (currentOrder.value.status === 'IN_PROGRESS') {
+      // 司机前往目的地
+      updateDriverRoute(
+        data.longitude, data.latitude,
+        currentOrder.value.destinationLongitude, currentOrder.value.destinationLatitude
+      );
+    }
+  }
+};
+
+// 清理所有司机路径的函数
+const clearAllDriverRoutes = () => {
+  console.log('🧹 清理所有司机路径...');
+  
+  // 清理全局司机路径变量
+  if (window.driverRouteLine) {
+    map.remove(window.driverRouteLine);
+    window.driverRouteLine = null;
+  }
+  
+  // 清理所有红色路径
+  const allOverlays = map.getAllOverlays();
+  let cleanedCount = 0;
+  
+  allOverlays.forEach(overlay => {
+    if (overlay.CLASS_NAME === 'AMap.Polyline') {
+      try {
+        const options = overlay.getOptions();
+        if (options && options.strokeColor === '#FF6B6B') {
+          map.remove(overlay);
+          cleanedCount++;
+        }
+      } catch (error) {
+        // 忽略错误
+      }
+    }
+  });
+  
+  console.log(`🗑️ 清理了 ${cleanedCount} 条司机路径`);
+};</div>
+                
+                <button class="test-button" onclick="testDriverLocationUpdate()">测试司机位置更新</button>
+            </div>
+            
+            <!-- 综合测试 -->
+            <div class="fix-section">
+                <h3>🧪 综合测试</h3>
+                
+                <div class="solution-card">
+                    <strong>测试场景:</strong><br>
+                    1. 页面切换测试 - 切换到其他页面再回来<br>
+                    2. 订单取消测试 - 取消订单后检查路径清理<br>
+                    3. 司机位置更新测试 - 模拟司机位置变化<br>
+                    4. 综合场景测试 - 组合多个操作
+                </div>
+                
+                <button class="test-button success" onclick="runComprehensiveTest()">运行综合测试</button>
+                <button class="test-button warning" onclick="simulatePageSwitch()">模拟页面切换</button>
+                <button class="test-button warning" onclick="simulateOrderCancel()">模拟订单取消</button>
+                <button class="test-button warning" onclick="simulateDriverMove()">模拟司机移动</button>
+            </div>
+            
+            <!-- 调试工具 -->
+            <div class="fix-section">
+                <h3>🔧 调试工具</h3>
+                
+                <button class="test-button" onclick="checkMapState()">检查地图状态</button>
+                <button class="test-button" onclick="listAllOverlays()">列出所有覆盖物</button>
+                <button class="test-button" onclick="forceCleanMap()">强制清理地图</button>
+                
+                <div id="debugOutput" class="code-block" style="display: none; margin-top: 10px;">
+                    调试信息将显示在这里...
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // 测试函数
+        function testMarkerRestore() {
+            console.log('🧪 测试标记恢复功能');
+            
+            // 检查标记是否存在
+            const markers = {
+                pickup: window.pickupMarker,
+                destination: window.destMarker,
+                driver: window.driverMarker
+            };
+            
+            console.log('当前标记状态:', markers);
+            
+            // 如果有恢复函数，调用它
+            if (typeof window.restoreMapMarkers === 'function') {
+                window.restoreMapMarkers();
+                console.log('✅ 标记恢复函数已调用');
+            } else {
+                console.log('❌ 标记恢复函数不存在');
+            }
+        }
+        
+        function testOrderReset() {
+            console.log('🧪 测试订单重置功能');
+            
+            // 如果有重置函数，调用它
+            if (typeof window.resetOrderState === 'function') {
+                window.resetOrderState();
+                console.log('✅ 订单重置函数已调用');
+            } else {
+                console.log('❌ 订单重置函数不存在');
+            }
+        }
+        
+        function testDriverLocationUpdate() {
+            console.log('🧪 测试司机位置更新功能');
+            
+            // 模拟司机位置数据
+            const mockDriverData = {
+                longitude: 116.397428 + (Math.random() - 0.5) * 0.01,
+                latitude: 39.90923 + (Math.random() - 0.5) * 0.01,
+                timestamp: Date.now()
+            };
+            
+            console.log('模拟司机位置:', mockDriverData);
+            
+            // 如果有位置更新函数，调用它
+            if (typeof window.updateDriverLocation === 'function') {
+                window.updateDriverLocation(mockDriverData);
+                console.log('✅ 司机位置更新函数已调用');
+            } else {
+                console.log('❌ 司机位置更新函数不存在');
+            }
+        }
+        
+        function runComprehensiveTest() {
+            console.log('🧪 开始综合测试');
+            
+            // 测试序列
+            const tests = [
+                { name: '标记恢复', func: testMarkerRestore, delay: 0 },
+                { name: '司机位置更新', func: testDriverLocationUpdate, delay: 2000 },
+                { name: '订单重置', func: testOrderReset, delay: 4000 },
+                { name: '地图状态检查', func: checkMapState, delay: 6000 }
+            ];
+            
+            tests.forEach(test => {
+                setTimeout(() => {
+                    console.log(`🔄 执行测试: ${test.name}`);
+                    test.func();
+                }, test.delay);
+            });
+            
+            setTimeout(() => {
+                console.log('✅ 综合测试完成');
+            }, 8000);
+        }
+        
+        function simulatePageSwitch() {
+            console.log('🧪 模拟页面切换');
+            
+            // 模拟页面失活
+            console.log('📱 模拟页面失活...');
+            
+            // 延迟模拟页面激活
+            setTimeout(() => {
+                console.log('📱 模拟页面激活...');
+                
+                // 如果有初始化函数，调用它
+                if (typeof window.initializePassengerMap === 'function') {
+                    window.initializePassengerMap(true);
+                    console.log('✅ 页面重新激活完成');
+                } else {
+                    console.log('❌ 页面初始化函数不存在');
+                }
+            }, 1000);
+        }
+        
+        function simulateOrderCancel() {
+            console.log('🧪 模拟订单取消');
+            
+            // 先创建一些测试路径
+            console.log('📍 创建测试路径...');
+            
+            // 延迟执行取消
+            setTimeout(() => {
+                testOrderReset();
+                console.log('✅ 订单取消模拟完成');
+            }, 1000);
+        }
+        
+        function simulateDriverMove() {
+            console.log('🧪 模拟司机移动');
+            
+            // 连续更新司机位置
+            for (let i = 0; i < 3; i++) {
+                setTimeout(() => {
+                    testDriverLocationUpdate();
+                }, i * 1000);
+            }
+        }
+        
+        function checkMapState() {
+            console.log('🔍 检查地图状态');
+            
+            const state = {
+                mapExists: !!window.map,
+                pickupMarker: !!window.pickupMarker,
+                destMarker: !!window.destMarker,
+                driverMarker: !!window.driverMarker,
+                routeLine: !!window.routeLine,
+                driverRouteLine: !!window.driverRouteLine,
+                currentOrder: !!window.currentOrder?.value
+            };
+            
+            console.log('地图状态:', state);
+            
+            const output = document.getElementById('debugOutput');
+            output.style.display = 'block';
+            output.textContent = JSON.stringify(state, null, 2);
+        }
+        
+        function listAllOverlays() {
+            console.log('📋 列出所有覆盖物');
+            
+            if (window.map && window.map.getAllOverlays) {
+                const overlays = window.map.getAllOverlays();
+                console.log(`总覆盖物数量: ${overlays.length}`);
+                
+                const overlayInfo = overlays.map((overlay, index) => {
+                    try {
+                        const info = {
+                            index: index,
+                            type: overlay.CLASS_NAME,
+                            options: overlay.getOptions ? overlay.getOptions() : 'N/A'
+                        };
+                        return info;
+                    } catch (error) {
+                        return { index: index, type: 'Unknown', error: error.message };
+                    }
+                });
+                
+                console.log('覆盖物详情:', overlayInfo);
+                
+                const output = document.getElementById('debugOutput');
+                output.style.display = 'block';
+                output.textContent = JSON.stringify(overlayInfo, null, 2);
+            } else {
+                console.log('❌ 地图对象不存在或不支持getAllOverlays');
+            }
+        }
+        
+        function forceCleanMap() {
+            console.log('🧹 强制清理地图');
+            
+            if (window.map) {
+                // 清理所有覆盖物
+                const overlays = window.map.getAllOverlays();
+                overlays.forEach(overlay => {
+                    try {
+                        window.map.remove(overlay);
+                    } catch (error) {
+                        console.warn('清理覆盖物时出错:', error);
+                    }
+                });
+                
+                // 重置全局变量
+                window.pickupMarker = null;
+                window.destMarker = null;
+                window.driverMarker = null;
+                window.routeLine = null;
+                window.driverRouteLine = null;
+                
+                console.log('✅ 地图强制清理完成');
+            } else {
+                console.log('❌ 地图对象不存在');
+            }
+        }
+        
+        // 页面加载完成后的初始化
+        window.onload = function() {
+            console.log('🚀 乘客端地图修复测试页面加载完成');
+            console.log('💡 请在乘客端页面打开此测试页面进行调试');
+        };
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/frontend/test-passenger-markers-restore.html b/frontend/test-passenger-markers-restore.html
new file mode 100644
index 00000000..be1651d6
--- /dev/null
+++ b/frontend/test-passenger-markers-restore.html
@@ -0,0 +1,275 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>乘客端标记恢复测试</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            max-width: 1000px;
+            margin: 0 auto;
+            padding: 20px;
+            background-color: #f5f5f5;
+        }
+        .container {
+            background: white;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            margin-bottom: 20px;
+        }
+        .test-section {
+            border: 1px solid #ddd;
+            border-radius: 6px;
+            padding: 15px;
+            margin: 10px 0;
+        }
+        .step {
+            background: #f8f9fa;
+            padding: 10px;
+            margin: 8px 0;
+            border-left: 4px solid #007bff;
+            border-radius: 4px;
+        }
+        .expected {
+            background: #d4edda;
+            border-left-color: #28a745;
+        }
+        .error {
+            background: #f8d7da;
+            border-left-color: #dc3545;
+            color: #721c24;
+        }
+        .fixed {
+            background: #d4edda;
+            border-left-color: #28a745;
+            color: #155724;
+        }
+        .code {
+            background: #f8f9fa;
+            padding: 10px;
+            border-radius: 4px;
+            font-family: 'Courier New', monospace;
+            font-size: 14px;
+            border: 1px solid #e9ecef;
+            margin: 10px 0;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>📍 乘客端标记恢复修复</h1>
+        <p>修复乘客端在有订单的情况下重新进入页面后起点和终点标记不在正确位置的问题。</p>
+    </div>
+
+    <div class="container">
+        <div class="test-section">
+            <h3>🐛 修复的问题</h3>
+            <div class="step error">
+                <strong>原问题：</strong>页面重新加载后起点和终点标记位置错误
+                <div class="code">
+问题现象：
+1. 乘客有进行中的订单
+2. 刷新页面或重新进入乘客地图
+3. 起点标记不在正确的上车点位置
+4. 终点标记不在正确的目的地位置
+5. 或者标记完全不显示
+
+根本原因：
+1. destinationPosition 变量未定义，导致目的地标记无法恢复
+2. 标记恢复的调用顺序错误
+3. destination.value 在标记恢复时还未设置
+                </div>
+            </div>
+            
+            <div class="step fixed">
+                <strong>修复方案：</strong>优化标记恢复逻辑和调用顺序
+                <div class="code">
+修复措施：
+
+1. 修复目的地标记恢复逻辑
+   // 修复前：使用不存在的 destinationPosition
+   if (destinationPosition.value && !destMarker) {
+     // ❌ destinationPosition 未定义
+   }
+   
+   // 修复后：使用正确的数据源
+   if (destination.value && destination.value.location && !destMarker) {
+     // ✅ 使用 destination.value
+   } else if (currentOrder.value.destinationLatitude && !destMarker) {
+     // ✅ 备用：使用订单中的目的地信息
+   }
+
+2. 优化调用顺序
+   // 修复前：标记恢复在目的地设置之前
+   restoreMapMarkers()  // ❌ 此时 destination.value 还未设置
+   
+   // 修复后：先设置数据，再恢复标记
+   restoreOrderMapElements()  // 设置 destination.value
+   restoreMapMarkers()        // 基于设置的数据恢复标记
+
+3. 修复拖拽事件中的引用
+   // 修复前
+   if (destinationPosition.value) {
+     planRoute();  // ❌ 函数名错误
+   }
+   
+   // 修复后
+   if (destination.value) {
+     showRoute();  // ✅ 正确的函数名
+   }
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="container">
+        <div class="test-section">
+            <h3>🔄 标记恢复流程</h3>
+            
+            <div class="step expected">
+                <strong>1. 页面初始化时</strong>
+                <div class="code">
+触发：地图初始化完成
+调用：restoreOrderMapElements()
+流程：
+1. 检查是否有当前订单
+2. 设置 destination.value（从订单信息）
+3. 调用 restoreMapMarkers()
+4. 创建起点标记（基于 currentPosition.value）
+5. 创建终点标记（基于 destination.value 或订单信息）
+6. 恢复司机标记（如果有）
+7. 重新规划路线
+                </div>
+            </div>
+
+            <div class="step expected">
+                <strong>2. 页面重新激活时</strong>
+                <div class="code">
+触发：从其他页面切换回来
+调用：restoreMapMarkers()
+流程：
+1. 检查地图是否初始化
+2. 基于已有的 destination.value 恢复终点标记
+3. 基于 currentPosition.value 恢复起点标记
+4. 恢复司机标记（如果有订单）
+
+注意：不重复调用 restoreOrderMapElements()
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="container">
+        <div class="test-section">
+            <h3>🧪 测试步骤</h3>
+            
+            <div class="step">
+                <strong>步骤 1：</strong>建立测试环境
+                <div class="code">
+1. 乘客登录并下单
+2. 司机接单，确保有进行中的订单
+3. 确认乘客端地图显示正确的起点、终点、司机位置
+                </div>
+            </div>
+
+            <div class="step">
+                <strong>步骤 2：</strong>测试页面刷新
+                <div class="code">
+1. 在乘客地图页面按 F5 刷新
+2. 观察控制台日志：
+   - "🔄 恢复订单相关的地图元素..."
+   - "🎯 设置目的地信息"
+   - "🔄 恢复地图标记..."
+   - "📍 恢复上车点标记"
+   - "🎯 从订单信息恢复目的地标记"
+3. 验证起点和终点标记在正确位置
+                </div>
+            </div>
+
+            <div class="step">
+                <strong>步骤 3：</strong>测试页面切换
+                <div class="code">
+1. 从乘客地图切换到其他页面（如"我的行程"）
+2. 再切换回乘客地图
+3. 观察控制台日志：
+   - "🔄 恢复地图标记..."
+   - "📍 恢复上车点标记"
+   - "🎯 恢复目的地标记"
+4. 验证标记位置正确
+                </div>
+            </div>
+
+            <div class="step expected">
+                <strong>步骤 4：</strong>验证标记功能
+                <div class="code">
+1. 起点标记应该在订单的上车点位置
+2. 终点标记应该在订单的目的地位置
+3. 司机标记应该在司机当前位置
+4. 路线应该正确显示
+5. 地图视野应该包含所有重要标记
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="container">
+        <div class="test-section">
+            <h3>🔍 故障排除</h3>
+            
+            <div class="step error">
+                <strong>如果起点标记位置错误：</strong>
+                <ul>
+                    <li>检查 currentPosition.value 是否正确</li>
+                    <li>确认订单中的上车点坐标是否正确</li>
+                    <li>查看是否有定位权限问题</li>
+                </ul>
+            </div>
+            
+            <div class="step error">
+                <strong>如果终点标记不显示：</strong>
+                <ul>
+                    <li>检查 destination.value 是否正确设置</li>
+                    <li>确认订单中的目的地坐标是否存在</li>
+                    <li>查看控制台是否有 JavaScript 错误</li>
+                </ul>
+            </div>
+            
+            <div class="step error">
+                <strong>如果标记完全不显示：</strong>
+                <ul>
+                    <li>检查地图是否正确初始化</li>
+                    <li>确认 restoreMapMarkers 函数是否被调用</li>
+                    <li>查看是否有地图API加载问题</li>
+                </ul>
+            </div>
+        </div>
+    </div>
+
+    <div class="container">
+        <div class="test-section">
+            <h3>✅ 修复验证标准</h3>
+            <div class="step expected">
+                <strong>标记位置正确：</strong>
+                <ul>
+                    <li>✅ 起点标记在正确的上车点位置</li>
+                    <li>✅ 终点标记在正确的目的地位置</li>
+                    <li>✅ 司机标记在司机当前位置</li>
+                    <li>✅ 页面刷新后标记位置保持正确</li>
+                    <li>✅ 页面切换后标记正常恢复</li>
+                </ul>
+            </div>
+            <div class="step expected">
+                <strong>功能正常：</strong>
+                <ul>
+                    <li>✅ 路线规划正确显示</li>
+                    <li>✅ 地图视野合适</li>
+                    <li>✅ 标记拖拽功能正常（如果允许）</li>
+                    <li>✅ 司机位置实时更新</li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file