reactnative获取经纬度 获取此地信息 @react-native-community/geolocation

Reactnative 获取位置

javascript 复制代码
import Geolocation from '@react-native-community/geolocation';
javascript 复制代码
  const [coords, setCoords] = useState(null); // 存储经纬度
  const [addressLoading, setAddressLoading] = useState(false);


  const getLocation = () => {
    setAddressLoading(true);
    Geolocation.getCurrentPosition(
      async (position) => {
        console.log(position);
        console.log(position.coords);
        const { latitude, longitude } = position.coords;

        setCoords({ latitude, longitude });
        // 调用逆地理编码
        await getAddressFromCoords(latitude, longitude);
      },
      (error) => {
        console.log(error.code, error.message);
      },
      { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 }
    );
  }
  // 2. 逆地理编码:经纬度转具体地址
  const getAddressFromCoords = async (latitude, longitude) => {
    try {
      // 高德逆地理编码 API 接口
      const url = `https://restapi.amap.com/v3/geocode/regeo?output=json&location=${longitude},${latitude}&key=${AMAP_API_KEY}`;

      const response = await fetch(url);
      const result = await response.json();

      if (result.status === '1') {
        // 解析核心地址信息
        const regeocode = result.regeocode;
        const addressComponent = regeocode.addressComponent; // 地址组件(省/市/区/街道)
        // const formattedAddress = regeocode.formatted_address; // 完整地址(如:浙江省杭州市西湖区文三路XX号)
        // const neighborhood = addressComponent.neighborhood || {}; // 小区/社区
        // const building = addressComponent.building || {}; // 楼栋




        // 拼接更精准的地址(按需调整)
        let detailedAddress = addressComponent.province + addressComponent.city + addressComponent.district;
        // if (formattedAddress) detailedAddress += formattedAddress;
        // if (neighborhood.name) detailedAddress += ` ${neighborhood.name}`;
        // if (building.name) detailedAddress += ` ${building.name}`;

        setAddress(detailedAddress || '暂无位置');
        setAddressLoading(false);
      } else {
        setAddress(`暂无位置`);
        setAddressLoading(false);

      }
    } catch (err) {
      setAddress('暂无位置');
      setAddressLoading(false);

      console.error('逆地理编码失败:', err);
    }
  };
javascript 复制代码
     {/* 定位 */}
            <TouchableOpacity style={[styles.row, { borderBottomWidth: 0 }]}
              onPress={() => {
                getLocation()
              }}

            >
              <View style={styles.rowLeft}>
                <Image
                  source={require('@/images/gajyIcon/setting-location.png')}
                  resizeMode="contain"
                  style={styles.icon}
                />
                <Text style={styles.label}>定位</Text>
              </View>
              <View style={styles.rowRight}>
                {/* <Text>{address}</Text> */}
                <View style={styles.rowRight}>

                  {addressLoading ? (
                    // ActivityIndicator 是 React Native 内置的加载转圈组件
                    <ActivityIndicator
                      size="small"  // 可选:small / large
                      color="#0066ff"  // 自定义加载圈颜色
                      style={styles.loading}  // 加载组件的样式
                    />
                  ) : (
                    <Text>{address}</Text>
                  )}
                </View>
                {/* <Image
                  source={require('@/images/gajyIcon/rightArr.png')}
                  resizeMode="contain"
                  style={styles.arrow}
                /> */}
              </View>
            </TouchableOpacity>
相关推荐
ℋᙚᵐⁱᒻᵉ鲸落3 小时前
移动端滑动手势冲突:overflow: auto导致外层横向滑动失效
前端·javascript·css·vue.js·html
默_笙4 小时前
🎃 前端学了 Next.js,后端该学啥?NestJS 就是 Node 版的蜜雪冰城
前端·javascript
এ慕ོ冬℘゜6 小时前
navigator 导航对象 BOM制作方法
javascript
kyriewen8 小时前
面试官让我用 AI 重构一个 8 年陈的 React 组件——他说他不看代码,只看我会不会拆
前端·javascript·面试
Jacky19999 小时前
Electron + Vue 3 桌面打字游戏实战:从 VSCode 扩展到独立应用的架构改造
javascript
空想兔10 小时前
AgentPulse:实时监控所有的 OpenCode Agent 跑到哪一步了
react.js·ai编程
柚yuzumi10 小时前
别再猜 this:先看它属于谁,再看它指向谁
前端·javascript
YIAN10 小时前
React + Zustand + JWT 前端权限体系完整实现:从登录鉴权到路由守卫全流程拆解
前端·react.js·架构
汉堡大王952710 小时前
面试必考:手写代码 new 做了什么?从原理到实现全解析
前端·javascript·面试
BillKu11 小时前
TypeScript中,字符串字面量联合类型(Union Type)、enum的用法说明
前端·javascript·typescript