react-native-maps中如何在用户移出美国区域时渲染指定组件

直接用region !== USARegion做判断是行不通的，地理范围校验本质是几何计算问题，需要判断用户的实时经纬度坐标是否落在美国的地理边界范围内，具体实现步骤如下：

• 准备美国区域的边界经纬度坐标集
  提前定义对应范围的闭合多边形经纬度数组，格式为[{latitude: 数值, longitude: 数值}, ...]，坐标点需要按顺时针或逆时针顺序排列形成闭合图形，可根据业务需求选择是否包含阿拉斯加、夏威夷及美国海外属地。
• 获取用户实时位置
  不要直接拿地图实例的region对象做判断——这个值代表当前地图的可视范围，不是用户实际所在位置。可以通过两种方式获取用户真实坐标：
  1. 调用React Native生态的定位API监听位置变化
  2. 监听react-native-maps的onUserLocationUpdate事件，直接拿到用户实时定位返回的坐标
     注意：安卓和iOS端都需要提前申请定位权限，才能拿到准确的位置信息
• 实现点在多边形内的判断逻辑
  用通用的射线法算法，判断当前用户坐标是否落在提前定义的美国边界多边形内部，可直接复用下面的工具函数：

// 校验坐标点是否在指定多边形范围内
function isPointInPolygon(point, polygon) {
  let isInside = false;
  const x = point.longitude, y = point.latitude;
  for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
    const xi = polygon[i].longitude, yi = polygon[i].latitude;
    const xj = polygon[j].longitude, yj = polygon[j].latitude;
    
    const intersect = ((yi > y) !== (yj > y))
        && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
    if (intersect) isInside = !isInside;
  }
  return isInside;
}

• 结合组件状态控制渲染逻辑
  拿到用户实时位置后调用上述工具函数，当返回值为false时即代表用户已离开美国区域，此时渲染目标组件即可，完整示例：

import { useState, useEffect } from 'react';
// 可根据项目选择的定位方案导入对应依赖
import Geolocation from '@react-native-community/geolocation';
// 提前录入的美国边界经纬度坐标数组
const US_BOUNDARY = [/* 填入你准备好的边界坐标 */];

export default function GeoFenceContainer() {
  const [isOutsideUS, setIsOutsideUS] = useState(false);

  useEffect(() => {
    // 监听位置变化，设置每移动100米更新一次判断结果，平衡精度和性能
    const watchId = Geolocation.watchPosition(
      (position) => {
        const currentPoint = {
          latitude: position.coords.latitude,
          longitude: position.coords.longitude
        };
        setIsOutsideUS(!isPointInPolygon(currentPoint, US_BOUNDARY));
      },
      (err) => console.error('定位获取失败', err),
      { enableHighAccuracy: true, distanceFilter: 100 }
    );

    // 组件卸载时清除位置监听
    return () => Geolocation.clearWatch(watchId);
  }, []);

  return isOutsideUS ? <MyComponent /> : null;
}

优化提示：如果业务对边界精度要求不高，可以先做一层粗筛减少计算量：美国本土大致经纬度范围为北纬24°_{49°、西经66°}125°，坐标不在这个矩形范围内的用户可以直接判定为区域外，不需要走多边形计算逻辑，能减少不必要的性能消耗。

内容的提问来源于stack exchange，提问作者Cristian Flórez