fix(地图): 优化地图视图更新逻辑，避免中心点跳动

hejianhao

2026-03-18 9d9dfdccd7ff211dd91291bcbc9e4c02fb2e617b

fix(地图): 优化地图视图更新逻辑，避免中心点跳动

- 在订单详情页添加地图缩放级别状态，优化路径显示范围
- 统一 includePoints 调用，合并标记点和路径点，增加容错处理
- 移除首页地图拖动时不必要的中心点状态更新，防止跳动
- 修复吸附逻辑触发条件，支持更多场景
- 修正定位服务提示文案

 src/pages/robotaxi/home/index.tsx

@@ -282,8 +282,6 @@
              const switchedCity = Taro.getStorageSync('selectedCity');
              if (switchedCity?.name) {
                getCityLocation(switchedCity.name).then((loc) => {
                  setLatitude(loc.latitude);
                  setLongitude(loc.longitude);
                  shouldIgnoreRegionChange.current = true;
                  skipNextLocationCenterRef.current = true;
                  const mapCtx = Taro.createMapContext('map');
@@ -443,8 +441,6 @@
        // 定位到城市中心
        if (selectedCity.name && allowMapMove) {
          getCityLocation(selectedCity.name).then(loc => {
            setLatitude(loc.latitude);
            setLongitude(loc.longitude);
            skipNextLocationCenterRef.current = true;
            shouldIgnoreRegionChange.current = true;
            const mapCtx = Taro.createMapContext('map');
@@ -463,8 +459,6 @@
      // 定位到城市中心
      if (selectedCity.name && allowMapMove) {
        getCityLocation(selectedCity.name).then(loc => {
          setLatitude(loc.latitude);
          setLongitude(loc.longitude);
          skipNextLocationCenterRef.current = true;
          shouldIgnoreRegionChange.current = true;
          const mapCtx = Taro.createMapContext('map');
@@ -661,7 +655,7 @@
    const systemSetting = await Promise.resolve((Taro as any).getSystemSetting?.());
    if (systemSetting?.locationEnabled === false) {
      Taro.showToast({
        title: '需开启设备GPS/定位服务开关',
        title: '需开启设备定位服务开关',
        icon: 'none'
      });
      return;
@@ -724,6 +718,7 @@
    if (type === 'begin') {
      setShowToolTip(false);
    } else if (type === 'end') {
      const wasReturningToOrigin = isReturningToOrigin.current;
      if (isReturningToOrigin.current) {
        isReturningToOrigin.current = false;
      }
@@ -756,26 +751,27 @@
      mapCtx.getCenterLocation({
        success: async (res) => {
          const { latitude: lat, longitude: lng } = res;
          if (causedBy === 'gesture' || causedBy === 'drag') {
            setLatitude(lat);
            setLongitude(lng);
          }
          // 移除 setLatitude 和 setLongitude，避免拖动后地图中心点跳动回旧位置
          // if (causedBy === 'gesture' || causedBy === 'drag') {
          //   setLatitude(lat);
          //   setLongitude(lng);
          // }

          try {
            // 更新地图数据
            const { newMarkers, sites } = await updateMapData(lat, lng);
              // 更新地图数据
              const { newMarkers, sites } = await updateMapData(lat, lng);

            const nearestCandidates = sites.length > 0 ? sites : newMarkers;
            const { targetMarker, minDistance } = findNearestMarker(lat, lng, nearestCandidates);
              const nearestCandidates = sites.length > 0 ? sites : newMarkers;
              const { targetMarker, minDistance } = findNearestMarker(lat, lng, nearestCandidates);

            // 只有用户手势拖动触发的移动才进行吸附判断
            if ((causedBy === 'gesture' || causedBy === 'drag') && targetMarker && minDistance < adsorptionDistance) {
              // 使用 moveToLocation 实现吸附效果
              mapCtx.moveToLocation({
                latitude: targetMarker.latitude,
                longitude: targetMarker.longitude,
              });
            }
              // 用户手势拖动或点击回到原点触发的移动，进行吸附判断
              if ((causedBy === 'gesture' || causedBy === 'drag' || wasReturningToOrigin) && targetMarker && minDistance < adsorptionDistance) {
                // 使用 moveToLocation 实现吸附效果
                mapCtx.moveToLocation({
                  latitude: targetMarker.latitude,
                  longitude: targetMarker.longitude,
                });
              }

            // 根据距离决定是否显示 ToolTip
            setTimeout(() => {

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

@@ -27,6 +27,7 @@
  // 地图相关状态
  const [longitude, setLongitude] = useState(116.397128) // 地图中心点经度
  const [latitude, setLatitude] = useState(39.916527) // 地图中心点纬度
  const [scale, setScale] = useState(12) // 地图缩放级别，默认 12 以展示较大范围
  const [markers, setMarkers] = useState<any[]>([]) // 起点和终点标记
  const [polyline, setPolyline] = useState<any[]>([]) // 行驶路径

@@ -147,10 +148,14 @@
        })
        .filter(Boolean) as Array<{ longitude: number; latitude: number }>
      : [startPoint, endPoint].filter(Boolean) as Array<{ longitude: number; latitude: number }>;

    // 设置地图中心点，确保地图移动到目标区域
    const center = getPointsCenter(routePath);
    if (center) {
      setLongitude(center.longitude);
      setLatitude(center.latitude);
      // 稍微缩小一点，让用户能看到更多周围信息，减少后续 includePoints 的跳动感
      setScale(12);
    }

    if (status === 0) {
@@ -169,18 +174,34 @@
  };

  useEffect(() => {
    if (!polyline.length) return
    let viewportPoints = polyline;
    if (polyline.length == 1) {
      viewportPoints = polyline[0].points;
    if (!polyline.length && !markers.length) return
    let viewportPoints: any[] = [];
    if (polyline.length > 0) {
      if (polyline[0].points) {
        viewportPoints = viewportPoints.concat(polyline[0].points);
      } else if (Array.isArray(polyline)) {
        viewportPoints = viewportPoints.concat(polyline);
      }
    }
    if (markers.length > 0) {
      viewportPoints = viewportPoints.concat(markers);
    }
    // 过滤数据，只保留 latitude 和 longitude
    const purePoints = viewportPoints.map(p => ({
      latitude: p.latitude,
      longitude: p.longitude
    }));

    const mapCtx = Taro.createMapContext('trip-map');
    Taro.nextTick(() => {
    // 适当增加延迟，确保 Map 组件渲染完成后再调用 includePoints
    setTimeout(() => {
      mapCtx.includePoints({
        points: viewportPoints,
        padding: [50, 30, 10, 30]
        points: purePoints,
        padding: [50, 100, 20, 100],
        success: () => console.log('includePoints success'),
        fail: (err) => console.error('includePoints failed', err)
      });
    });
    }, 200);
  }, [polyline, markers])

  const todescription = () => {
@@ -295,6 +316,7 @@
            id="trip-map"
            longitude={longitude}
            latitude={latitude}
            scale={scale}
            markers={markers}
            polyline={polyline}
            showLocation={false}