如何高效连续获取地理位置数据并计算累计距离？

原实现的核心问题 #

1. 无限循环风险：通过useState更新触发useEffect，再在getNew里调用setLocation，形成无意义的循环触发，既浪费资源又可能引发性能问题。
2. 数据丢失隐患：pair是普通变量，组件每次重渲染都会被重新初始化，之前记录的距离数据会直接丢失。
3. 无效初始计算：首次调用getPreciseDistance时，k是空字符串，会直接报错——geolib需要合法的经纬度对象才能计算距离。
4. 低效的位置获取方式：循环调用getCurrentPositionAsync不如使用专门的持续监听API，前者的调用时机和间隔不可控，容易造成冗余请求。

重构后的优化方案 #

1. 改用watchPositionAsync持续监听：这是Expo Location专门用于实时追踪位置变化的API，相比循环调用单次获取更高效、更贴合场景需求。
2. 用useRef存储状态：用useRef保存上一个位置和总距离，既不会触发组件重渲染，又能在组件生命周期内持久化数据。
3. 添加清理逻辑：组件卸载时停止位置监听，避免内存泄漏。
4. 处理边界情况：首次获取位置时不计算距离，只有当存在上一个有效位置时才进行距离累加。

完整重构代码 #

import * as Location from 'expo-location';
import { getPreciseDistance } from 'geolib';
import { useRef, useEffect } from 'react';

function LocationTracker() {
  // 存储上一个有效位置
  const lastLocationRef = useRef(null);
  // 存储累计总距离（geolib默认返回单位为米）
  const totalDistanceRef = useRef(0);

  useEffect(() => {
    let locationSubscription;

    async function startLocationTracking() {
      // 请求位置权限
      const { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== 'granted') {
        console.error('位置权限未授予，无法追踪位置');
        return;
      }

      // 开始监听位置变化
      locationSubscription = await Location.watchPositionAsync(
        {
          accuracy: Location.Accuracy.High, // 根据需求调整精度，越高越耗电
          timeInterval: 1000, // 位置更新的时间间隔（毫秒）
          distanceInterval: 1, // 位置变化超过多少米才触发更新（米）
        },
        (location) => {
          const currentLocation = {
            latitude: location.coords.latitude,
            longitude: location.coords.longitude,
          };

          // 仅当存在上一个位置时计算距离并累加
          if (lastLocationRef.current) {
            const distance = getPreciseDistance(
              lastLocationRef.current,
              currentLocation
            );
            totalDistanceRef.current += distance;
          }

          // 更新上一个位置的引用
          lastLocationRef.current = currentLocation;
        }
      );
    }

    startLocationTracking();

    // 组件卸载时停止位置监听，防止内存泄漏
    return () => {
      locationSubscription?.remove();
    };
  }, []);

  // 可通过按钮等交互触发总距离输出
  const showTotalDistance = () => {
    console.log('TOTAL DISTANCE', totalDistanceRef.current);
  };

  return (
    <button onClick={showTotalDistance}>查看累计距离</button>
  );
}

export default LocationTracker;

额外优化建议 #

• 精度与功耗平衡：根据实际场景调整accuracy、timeInterval和distanceInterval参数，比如不需要极高精度时改用Location.Accuracy.Medium，同时调大distanceInterval，减少不必要的位置更新。
• 错误处理：可以在位置监听回调中添加对位置数据的有效性校验，避免因定位异常导致的计算错误。
• 单位转换：如果需要公里单位，可将总距离除以1000，即totalDistanceRef.current / 1000。
• 数据持久化：若需在APP重启后保留累计距离，可将总距离存储到AsyncStorage或其他本地存储中。

内容的提问来源于stack exchange，提问作者Felix Gorczany