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>
相关推荐
程序员大阳1 小时前
副队长JavaScript教程(67)-Ajax初识:背景、历史与核心概念
javascript·ajax·同步·异步·概念·背景·来是
程序员大阳1 小时前
副队长JavaScript教程(70)-Ajax同源策略与跨域
javascript·ajax·同源策略·跨越·corp
普通人62 小时前
Web端3D模型加载实战指南_Vue3_uni-app_HTML
前端·javascript·uni-app·html
志尊宝2 小时前
AI原生前端开发(042):AI辅助的路由设计与优化
javascript·react.js·ai-native
Dxy123931021612 小时前
JS DES 加密详解
开发语言·javascript·arcgis
充值内卷12 小时前
我给桌面加了个鱼缸:C++ 写后端,WebView2 里养一座 Three.js 小岛
开发语言·javascript·c++
椒哥15 小时前
一天被问几十次"允许",我统计了 517 次,然后写了个插件
前端·javascript·github
kyriewen15 小时前
我测了 6 种防请求竞态的写法:只有 1 种真能打
前端·javascript·程序员
OpsEye16 小时前
企业大模型压测,需要重点关注哪些指标?
javascript·ai编程
像我这样帅的人丶你还17 小时前
我html生成的doc文档为何在手机文档显示不了图片?
前端·javascript