前端h5获取经纬度定位城市

最近遇到的问题: 项目用的是react +antd框架 做的h5页面 需要定位到当前城市

通过多方查阅发现了h5自带的获取经纬度的方法

//判断是否支持 获取本地位置 if (navigator.geolocation) {   var n = navigator.geolocation.getCurrentPosition(function(res){       console.log(res); // 需要的坐标地址就在res中   });} else {    alert('该浏览器不支持定位');}

这段代码也尝试过  但是本地编译运行可以拿到经纬度 而上线以后就拿不到了(具体原因也没去找了 接着找其他办法)

偶然听到同事说用ip定位 结果就看到了获取当前ip的方法 发现里面竟然返回了经纬度 于是我也就不用ip定位了 直接用这个(http://ip-api.com/json)返回的数据里带的经纬度 最后再通过高德地图的逆地理代码解析(通过经纬度获取城市)  最终实现了需求

来段代码:

  const getGeo = () => {    fetch("http://ip-api.com/json")      .then((response) => response.json())      .then(async (data) => {        console.log("data===", data);        let resp = await fetch(          `https://restapi.amap.com/v3/geocode/regeo?location=${data?.lon},${data?.lat}&key={你的高德地图key}&radius=&poitype=&extensions=all&batch=false&roadlevel=`        )          .then((re) => re.json())          .then((d) => {            if (d?.status == "1") {              console.log("d0-----", d);            }          });      })      .catch((error) => {        console.error("Error:", error);      });  };  useEffect(() => {    getGeo();  }, []);

最后再上效果图

虽说看起来有点麻烦 但是需求实现了就是好的哈哈哈哈哈

最后大佬们有更简单的方法欢迎一起交流！！！！