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>
相关推荐
工藤学编程2 小时前
零基础学AI大模型之旅游规划智能体之react_agent实战
人工智能·react.js·旅游
前端大波2 小时前
使用webpack-bundle-analyzer 对 react 老项目进行打包优化
前端·react.js·webpack·性能优化
前端 贾公子2 小时前
(catalog协议) == pnpm (5)
前端·javascript·react.js
假装我不帅2 小时前
jquery-validation使用
前端·javascript·jquery
怕浪猫2 小时前
React从入门到出门第六章 事件代理机制与原生事件协同
前端·javascript·react.js
天府之绝2 小时前
uniapp 中使用uview表单验证时,自定义扩展的表单,在改变时无法触发表单验证处理;
开发语言·前端·javascript·vue.js·uni-app
局外人LZ2 小时前
libsodium.js:web端与 Node.js 的现代加密工具集,构建前端安全加密体系
前端·javascript·node.js
哈__2 小时前
React Native 鸿蒙跨平台开发:ToastAndroid 提示消息
react native·react.js·harmonyos
xkxnq3 小时前
第二阶段:Vue 组件化开发(第 20天)
前端·javascript·vue.js