React Native MapViewDirections无法随GPS位置动态更新问题求助

核心问题解答 #

MapViewDirections本身不具备自动动态更新能力，它的路线渲染完全依赖传入的origin、destination属性变化触发重新请求接口后更新，默认是静态渲染的。

代码中的具体问题 #

• 路线渲染回调覆盖实时位置：你在MapViewDirections的onReady回调中执行了setLocation(nextLoc)，这个nextLoc是返回路线的第一个坐标点，会直接覆盖你GPS监听拿到的真实实时位置，导致origin参数永远停留在旧的路线起点，不会随GPS更新
• 缺少强制重渲染触发逻辑：即使origin的值更新，部分版本的MapViewDirections组件不会主动检测属性的浅变化，不会触发重新拉取路线
• 位置更新频率过高：你把distanceInterval设为0，只要位置有微小变化就会触发更新，频繁请求谷歌路线接口很容易超出配额或者被限流

修复步骤 #

第一步：删除无效的位置覆盖逻辑 #

删掉MapViewDirections的onReady回调中的setLocation(nextLoc)代码，如果你需要初始化定位可以只在组件第一次加载时执行一次，不要每次路线渲染完成都覆盖实时位置。

第二步：添加key属性强制组件重渲染 #

给MapViewDirections组件添加key属性，值由起点和终点坐标拼接而成，只要坐标变化组件就会重新初始化拉取最新路线：

<MapViewDirections
  key={`${location.latitude},${location.longitude}-${latitudeVendedor},${longitudeVendedor}`}
  origin={location}
  destination={{
    latitude: latitudeVendedor,
    longitude: longitudeVendedor,
  }}
  precision={"high"}
  apikey={GOOGLE_MAPS_APIKEY}
  strokeWidth={4}
  onReady={(result) => {
    setdistancia(result.distance);
    settiempo(result.duration);

    if (result.coordinates.length >= 2) {
      let angle = calculateAngle(result.coordinates);
      setangle(angle);
    }
  }}
/>

第三步：优化位置更新频率 #

调整watchPositionAsync的参数，避免无意义的频繁请求：

let loc = await Location.watchPositionAsync(
  {
    accuracy: Location.Accuracy.High,
    distanceInterval: 5, // 每移动5米再触发一次位置更新，可按需调整
  },
  (loc) => {
    actualizarUbicacion(loc.coords.latitude, loc.coords.longitude);
    setLocation({
      latitude: loc.coords.latitude,
      longitude: loc.coords.longitude,
      latitudeDelta: 0.001,
      longitudeDelta: 0.001,
    });
  }
);

第四步：添加订阅清理逻辑 #

在useEffect中返回清理函数，组件卸载时取消位置监听避免内存泄漏：

useEffect(() => {
  let locationSubscription = null;
  (async () => {
    const resultPermissions = await Permissions.askAsync(Permissions.LOCATION);
    const statusPermissions = resultPermissions.permissions.location.status;

    if (statusPermissions !== "granted") {
      toastRef.current.show(
        "Tienes que aceptar los permisos de localizacion",
        3000
      );
      setpermiso(false);
    } else {
      try {
        locationSubscription = await Location.watchPositionAsync(
          {
            accuracy: Location.Accuracy.High,
            distanceInterval: 5,
          },
          (loc) => {
            actualizarUbicacion(loc.coords.latitude, loc.coords.longitude);
            setLocation({
              latitude: loc.coords.latitude,
              longitude: loc.coords.longitude,
              latitudeDelta: 0.001,
              longitudeDelta: 0.001,
            });
          }
        );
        setpermiso(true);
      } catch (e) {
        console.log(e);
      }
    }
  })();
  // 新增清理逻辑
  return () => {
    if (locationSubscription) {
      locationSubscription.remove();
    }
  }
}, []);

内容的提问来源于stack exchange，提问作者Ernesto Garcia