如何判断react-native-maps中路线坐标是否处于当前地图视口内？

要实现routeIsInViewport函数，我们可以先通过地图的region参数计算出当前视口的地理边界，再逐一检查路线上的坐标点是否处于这些边界范围内。下面分两种常见需求给出实现方案：

方案1：判断路线至少有一个坐标点在视口内 #

如果只要路线有部分进入视口就触发操作，可以用这个版本：

const routeIsInViewport = (region, route) => {
  // 计算当前视口的边界
  const maxLat = region.latitude + region.latitudeDelta / 2;
  const minLat = region.latitude - region.latitudeDelta / 2;
  const maxLng = region.longitude + region.longitudeDelta / 2;
  const minLng = region.longitude - region.longitudeDelta / 2;

  // 遍历路线坐标，检查是否有任意点在视口内
  return route.some(point => {
    const { latitude, longitude } = point;
    // 纬度在minLat和maxLat之间，经度在minLng和maxLng之间
    return latitude >= minLat && latitude <= maxLat &&
           longitude >= minLng && longitude <= maxLng;
  });
};

方案2：判断路线所有坐标点都在视口内 #

如果需要整个路线完全处于视口才触发操作，就用这个版本：

const routeIsInViewport = (region, route) => {
  const maxLat = region.latitude + region.latitudeDelta / 2;
  const minLat = region.latitude - region.latitudeDelta / 2;
  const maxLng = region.longitude + region.longitudeDelta / 2;
  const minLng = region.longitude - region.longitudeDelta / 2;

  // 检查所有点是否都在视口边界内
  return route.every(point => {
    const { latitude, longitude } = point;
    return latitude >= minLat && latitude <= maxLat &&
           longitude >= minLng && longitude <= maxLng;
  });
};

补充说明 #

• 边界处理：上面的代码用了>=和<=，意味着刚好落在视口边缘的点也会被判定为在视口内，如果你想排除边缘点，可以改成>和<。
• 跨180度经度的特殊情况：如果你的地图视口跨越了东经180°/西经180°（比如从170°E到-170°W），上面的基础判断会失效。这种情况下需要额外处理经度的 wrap-around 逻辑，比如：

  // 处理跨180度经度的情况
  const isLongitudeInViewport = (lng, minLng, maxLng) => {
    if (minLng <= maxLng) {
      return lng >= minLng && lng <= maxLng;
    } else {
      // 视口跨180度，只要经度在minLng到180，或者-180到maxLng之间
      return lng >= minLng || lng <= maxLng;
    }
  };
  

  然后把之前的经度判断替换成这个函数即可。

最后，把函数集成到你的组件里就可以了：

const MapDisplay = () => {
  const onRegionChange = (region) => {
    const isInViewport = routeIsInViewport(region, route);
    // 根据结果触发后续操作
    if (isInViewport) {
      // 执行相关逻辑
      console.log("路线在视口内");
    } else {
      console.log("路线不在视口内");
    }
  };
  return <MapView onRegionChange={onRegionChange} />;
};

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