fix(robotaxi): 修复行程状态切换时地图路线显示问题

hejianhao

2026-03-01 6e5458a555449c0a521d46807fcc0776ad3cdfa7

fix(robotaxi): 修复行程状态切换时地图路线显示问题

- 调整行程状态为6（等待中）时的地图路线更新逻辑，避免重复绘制
- 修复订单详情页地图标记的宽高和锚点配置，使用硬编码值替代变量
- 移除结束行程时的失败提示，由调用方处理错误
- 优化取消弹窗按钮间距，使用margin-left替代gap属性
- 在行程状态8、9时主动获取轨迹数据并绘制路线
- 调整地图标记ID生成方式，使用固定ID避免重复

 src/robotaxi/pages/begin-route/components/css-folder/cancel-popup.less

@@ -110,7 +110,6 @@

        .cancel-btn-box {
            display: flex;
            gap: 32px;
            margin-top: 58px;

            .cancel-btn-cancel {
@@ -126,6 +125,7 @@
            }

            .cancel-btn-again {
                margin-left: 32px;
                flex: 1;
                line-height: 96px;
                text-align: center;

 src/robotaxi/pages/begin-route/components/over-route.tsx

@@ -33,14 +33,6 @@
        }
        setIsSubmitting(true);
        endOrder(orderId).then((res: any) => {
            const isFailure = res?.success === false || (typeof res?.code === 'number' && res.code !== 0);
            if (isFailure) {
                Taro.showToast({
                    title: '结束行程失败，请重试',
                    icon: 'none'
                });
                return;
            }
            onConfirm?.();
        }).catch(() => {
            Taro.showToast({

 src/robotaxi/pages/begin-route/index.tsx

@@ -29,6 +29,7 @@
  cancelOrder,
  queryOrderRoute,
} from '../../../robotaxi/api/begin-route';
import { getOrderDetail } from '../../../robotaxi/api/order';

export default function SelectMapSite() {
  const WAITING_TIMER_START_KEY = 'waitingTimerStartAt';
@@ -68,7 +69,10 @@
  const [waitingRadarVisible, setWaitingRadarVisible] = useState(true);

  const tripStatusRef = useRef(tripStatus); // 行程状态引用
  const lastTripStatusRef = useRef(tripStatus);
  const routeRequestKeyRef = useRef<string>(''); // 路线请求键
  const allowIncludePointsRef = useRef(true);
  const orderRouteInitializedRef = useRef(false);
  // 在发布行程状态也允许展示路线
  const shouldShowRoute = [1, 4, 6, 8, 9].includes(tripStatus);
  const authSuccessBound = useRef(false); // 认证成功是否绑定
@@ -94,6 +98,16 @@
    }
  }, []);
  const shouldShowWaitingRadar = isAndroid && [2, 3].includes(tripStatus);

  useEffect(() => {
    const wasHold = [6].includes(lastTripStatusRef.current);
    const isHold = [6].includes(tripStatus);
    if (!wasHold && isHold) {
      allowIncludePointsRef.current = true;
      orderRouteInitializedRef.current = false;
    }
    lastTripStatusRef.current = tripStatus;
  }, [tripStatus]);

  // 加载等待弹窗图片
  useEffect(() => {
@@ -346,15 +360,15 @@
        setRoutePoints([]);
        setPolyline([]);
      }
      if (payload?.showCancelPopup) {
        if (payload?.status === 0 && tripStatus == 5) {
          setCancelType(2);
        }
        if (payload?.status === 0 && [2, 3].includes(tripStatus)) {
          setCancelType(3);
        }
        setShowCancelPopup(true);
      }
      // if (payload?.showCancelPopup) {
      //   if (payload?.status === 0 && tripStatus == 5) {
      //     setCancelType(2);
      //   }
      //   if (payload?.status === 0 && [2, 3].includes(tripStatus)) {
      //     setCancelType(3);
      //   }
      //   setShowCancelPopup(true);
      // }
      if (payload?.showPassengerNotice) {
        if (Taro.getStorageSync('passengerNoticeShowed') !== 'true') {
          setShowPassengerNotice(true);
@@ -371,20 +385,6 @@

    orderRouteHandlerRef.current = (payload) => {
      const points = payload?.points || [];
      // if (tripStatusRef.current !== 5) {
      setTimeout(() => {
        applyRoutePoints(points);
        if ([4, 5, 6].includes(tripStatusRef.current)) {
          const firstPoint = points?.[0];
          if (firstPoint && typeof firstPoint.latitude === 'number' && typeof firstPoint.longitude === 'number') {
            setVehicleLocation({ latitude: firstPoint.latitude, longitude: firstPoint.longitude });
          }
        }
      }, 500);
      // } else {
      //   setRoutePoints([]);
      //   setPolyline([]);
      // }
      const direction = payload?.direction;
      if (typeof direction === 'number' && Number.isFinite(direction)) {
        setVehicleDirection(direction);
@@ -394,8 +394,8 @@
      const distanceKm = normalizeDistanceKm(distance);
      if (distanceKm !== null) {
        setRouteDistance(distanceKm);
        Taro.setStorageSync('orderRouteDistance', distanceKm);
        Taro.setStorageSync('orderRouteDistanceUnit', 'km');
        Taro.setStorageSync('orderRouteDistance', distanceKm.value);
        Taro.setStorageSync('orderRouteDistanceUnit', distanceKm.unit);
      }
      const durationSeconds = normalizeDurationSeconds(duration);
      if (durationSeconds !== null) {
@@ -403,7 +403,35 @@
        Taro.setStorageSync('orderRouteDuration', durationSeconds);
        Taro.setStorageSync('orderRouteDurationUnit', 's');
      }
      const isHoldMapStatus = [5, 6].includes(tripStatusRef.current);
      // 仅在呼叫及后续阶段允许展示路线
      if (isHoldMapStatus && orderRouteInitializedRef.current) {
        setTimeout(() => {
          applyRoutePoints(points);
          const firstPoint = points?.[0];
          if (firstPoint && typeof firstPoint.latitude === 'number' && typeof firstPoint.longitude === 'number') {
            setVehicleLocation({ latitude: firstPoint.latitude, longitude: firstPoint.longitude });
          }
        }, 500);
        return;
      }
      if (isHoldMapStatus) {
        orderRouteInitializedRef.current = true;
      }

      // 发布行程状态也允许展示路线
      setTimeout(() => {
        applyRoutePoints(points);
        if ([4, 5, 6].includes(tripStatusRef.current)) {
          const firstPoint = points?.[0];
          if (firstPoint && typeof firstPoint.latitude === 'number' && typeof firstPoint.longitude === 'number') {
            setVehicleLocation({ latitude: firstPoint.latitude, longitude: firstPoint.longitude });
          }
        }
      }, 500);

    };
    // 仅在呼叫及后续阶段允许更新车辆位置
    vehicleLocationHandlerRef.current = (payload) => {
      const latitude = payload?.latitude;
      const longitude = payload?.longitude;
@@ -499,9 +527,27 @@
            latitude: e.latitude,
            longitude: e.longitude,
          }],
          padding: [50, 50, 500, 50]
          padding: [50, 50, 600, 50]
        });
      }
      setElapsedSeconds(0);
      Taro.removeStorageSync(WAITING_TIMER_START_KEY);
      Taro.removeStorageSync(WAITING_TIMER_ELAPSED_KEY);
    } else if ([8, 9].includes(tripStatus)) {
      getOrderDetail(Taro.getStorageSync('orderId')).then((res: any) => {
        if (res.trajectories) {
          const points = res.trajectories.map((item: any) => ({
            latitude: item.location.split(',')[1],
            longitude: item.location.split(',')[0],
          }));
          applyRoutePoints(points);
          const mapCtx = Taro.createMapContext('map');
          mapCtx.includePoints({
            points: points,
            padding: [40, 40, 500, 40]
          })
        }
      });
      setElapsedSeconds(0);
      Taro.removeStorageSync(WAITING_TIMER_START_KEY);
      Taro.removeStorageSync(WAITING_TIMER_ELAPSED_KEY);
@@ -551,7 +597,7 @@
  useEffect(() => {
    const s = Taro.getStorageSync('startSite');
    const pickupMarker = s?.latitude && s?.longitude ? {
      id: Date.now() + 1,
      id: 1,
      latitude: s.latitude,
      longitude: s.longitude,
      iconPath: 'https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/51e7cb75-72af-4994-9d6e-d999efb2fbc7.png',
@@ -567,7 +613,7 @@
      }
    } : null;
    const dropoffMarker = endSite?.latitude && endSite?.longitude ? {
      id: Date.now() + 2,
      id: 2,
      latitude: endSite.latitude,
      longitude: endSite.longitude,
      iconPath: 'https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/6a56b1eb-ec37-4839-8733-262942af070d.png',
@@ -583,7 +629,7 @@
      }
    } : null;
    const carMarker = vehicleLocation ? {
      id: Date.now() + 3,
      id: 3,
      latitude: vehicleLocation.latitude,
      longitude: vehicleLocation.longitude,
      iconPath: 'https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/e51e92e6-700d-4e83-b3e0-14e6f18e0b9a.png',
@@ -625,21 +671,26 @@
        });
      }
      setPolyline(lines);
      const mapCtx = Taro.createMapContext('map');
      if ([8, 9].includes(tripStatus) && routePoints.length > 0) {
        mapCtx.includePoints({
          points: routePoints,
          padding: [50, 50, 500, 50]
        });
      } else {
        const allPoints = [
          ...routePoints,
          ...walkingPoints,
        ];
        mapCtx.includePoints({
          points: allPoints,
          padding: [50, 50, ![1, 6].includes(tripStatus) ? 500 : 100, 50]
        });
      if (![6].includes(tripStatus) || allowIncludePointsRef.current) {
        const mapCtx = Taro.createMapContext('map');
        if ([8, 9].includes(tripStatus) && routePoints.length > 0) {
          mapCtx.includePoints({
            points: routePoints,
            padding: [50, 50, 500, 50]
          });
        } else {
          const allPoints = [
            ...routePoints,
            ...walkingPoints,
          ];
          mapCtx.includePoints({
            points: allPoints,
            padding: [50, 50, ![1, 6].includes(tripStatus) ? 500 : 100, 50]
          });
        }
        if ([6].includes(tripStatus)) {
          allowIncludePointsRef.current = false;
        }
      }
    } else {
      setPolyline([]);

 src/robotaxi/pages/order/detail/index.tsx

@@ -64,30 +64,30 @@
        id: 1,
        longitude: startLon,
        latitude: startLat,
        width: MARKER_CONFIG.width,
        height: MARKER_CONFIG.height,
        width: 22,
        height: 40,
        anchor: { x: 0.5, y: 1 },
        iconPath: 'https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/51e7cb75-72af-4994-9d6e-d999efb2fbc7.png',
        anchor: { x: MARKER_CONFIG.anchorX, y: MARKER_CONFIG.anchorY },
      },
      {
        id: 2,
        longitude: endLon,
        latitude: endLat,
        width: MARKER_CONFIG.width,
        height: MARKER_CONFIG.height,
        width: 22,
        height: 40,
        anchor: { x: 0.5, y: 1 },
        iconPath: 'https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/6a56b1eb-ec37-4839-8733-262942af070d.png',
        anchor: { x: MARKER_CONFIG.anchorX, y: MARKER_CONFIG.anchorY }
      }
    ];
    setMarkers(markerList);

    // 处理行驶路径
    const routePath = trajectories?.length > 0 
    const routePath = trajectories?.length > 0
      ? trajectories.map(item => ({ longitude: item.location.split(',')[0], latitude: item.location.split(',')[1] }))
      : [
          { longitude: startLon, latitude: startLat },
          { longitude: endLon, latitude: endLat }
        ];
        { longitude: startLon, latitude: startLat },
        { longitude: endLon, latitude: endLat }
      ];

    const polylineData = [{
      points: routePath,