微信小程序(Taro)获取经纬度并转化为具体城市

1、获取经纬度

申请权限,想要使用微信小程序获取经纬度的方法是要申请该方面的权限。

获取经纬度的方法有很多选择其中一个使用就好。

我使用的是Taro.getFuzzyLocation()

在app.config.js中需要添加设置

javascript 复制代码
 requiredPrivateInfos: [
    "getFuzzyLocation",
  ],

直接上代码,获取经纬度

javascript 复制代码
Taro.getFuzzyLocation({
      type: "wgs84",
      success: async (res) => {
        const latitude = res.latitude;
        const longitude = res.longitude;
        console.log(latitude, longitude, "纬度 经度");
      },
      fail: function (e) {
        console.log(e, "获取失败");
      },
    });

2、逆转地理编码

在获取到经纬度后,想要转换为具体的位置地点,需要使用高德地图或者腾讯地图,我使用的是高德地图。

地理/逆地理编码-基础 API 文档-开发指南-Web服务 API | 高德地图API

在高德开发平台注册账号后申请key

在添加key的过程中一定要选择web服务,因为只有它支持逆地理编码API

上逆转经纬度的代码

javascript 复制代码
 // 根据坐标获取地址
        const wz = await requst.get(
          "https://restapi.amap.com/v3/geocode/regeo?key=<你申请的key>&extensions=all&location=" +
            longitude +
            "," +
            latitude
        );
        console.log(
          wz.data.regeocode.addressComponent,
          wz.data.regeocode.addressComponent.city,
          "地点"
        );

在获取经纬度的方法中,要把方法放到生命周期里面。不然可能会一直调用

3、全部代码

javascript 复制代码
// 获取地理位置
  const handleClick = () => {
    Taro.getFuzzyLocation({
      type: "wgs84",
      success: async (res) => {
        const latitude = res.latitude;
        const longitude = res.longitude;
        console.log(latitude, longitude, "纬度 经度");
        // 根据坐标获取地址
        const wz = await requst.get(
          "https://restapi.amap.com/v3/geocode/regeo?key=<你的key>&extensions=all&location=" +
            longitude +
            "," +
            latitude
        );
        console.log(
          wz,
          wz.data.regeocode.addressComponent,
          wz.data.regeocode.addressComponent.city,
          "地点"
        );
      },
      fail: function (e) {
        console.log(e, "获取失败");
      },
    });
  };
  useEffect(() => {
    handleClick();
  }, []);
相关推荐
知识分享小能手4 小时前
uni-app 入门学习教程,从入门到精通,uni-app组件 —— 知识点详解与实战案例(4)
前端·javascript·学习·微信小程序·小程序·前端框架·uni-app
韩立学长7 小时前
基于微信小程序的公益捐赠安全平台9hp4t247 包含完整开发套件(程序、源码、数据库、调试部署方案及开发环境)系统界面展示及获取方式置于文档末尾,可供参考。
数据库·微信小程序·小程序
亮子AI21 小时前
【小程序】微信小程序点击效果(view、button、navigator)
微信小程序·小程序
Q_Q51100828521 小时前
python+uniapp基于微信小程序团购系统
spring boot·python·微信小程序·django·uni-app·node.js·php
炒毛豆1 天前
uniapp微信小程序+vue3基础内容介绍~(含标签、组件生命周期、页面生命周期、条件编译(一码多用)、分包))
vue.js·微信小程序·uni-app
從南走到北1 天前
洗车小程序系统
微信小程序·小程序
namehu1 天前
前端性能优化之:图片缩放 🚀
前端·性能优化·微信小程序
dazhong20121 天前
微信小程序开发实战指南(三)-- Webview访问总结
微信小程序·小程序
盛夏绽放1 天前
关于 uni-app 与原生微信小程序中的生命周期 —— 一次“生命旅程”的解读
微信小程序·小程序·uni-app
流水线上的指令侠1 天前
使用C#写微信小程序后端——电商微信小程序
微信小程序·小程序·c#·visual studio