IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 移动开发 -> uniapp开发小程序根据经纬度获取定位城市名字 -> 正文阅读

[移动开发]uniapp开发小程序根据经纬度获取定位城市名字

1. 前言

大家如果接触过微信小程序的都知道,涉及到一些用户敏感信息的操作(比如定位、访问个人信息等)都是需要用户授权的,我们平时使用小程序时可能也见到过进行某个操作之前弹出授权框的场景,需要用户手动授权后才能进行下一步操作。接下来文章简单介绍一下微信小程序中的授权机制,基本上都是参考自官方文档,大家也可以直接阅读官方文档,了解更详细的介绍。

在这里插入图片描述

2. 大体思路

1) 提前向用户发起授权请求uni.authorize,如果用户之前已经同意授权,不会出现弹窗,直接返回成功;如果用户之前拒绝了授权,此接口会直接进入失败回调,一般搭配 uni.getSetting 和 uni.openSetting 使用
2)授权后请求获取用户地理位置api uni.getLocation,不过微信小程序平台,api默认不返回详细地址中文描述,只能取到经纬度 关于uni.getLocation
3)利用高德地图的 web服务生成的key,进一步通过经纬度和key值生成具体城市名字
高德地图获取key

3. 在manifest.json配置permission

uni.authorize的scope.userLocation的权限需要在manifest.json配置permission,否则会弹出下图的提示
在这里插入图片描述
关于上面的弹窗提示需要在manifest.json中加入下面这段代码

    /* 小程序特有相关 */
    "mp-weixin" : {
        "permission" : {
          "scope.userLocation": {
            "desc": "你的位置信息将用于定位"
           }         
        }
    },

4. 具体代码

 onLoad() {
 // 在页面加载的时候去判断用户有没有授权地理位置,没授权的话引导用户去设置页手动授权
   this.getAuthorize()
 }
 methods:{
  // 用户授权
    getAuthorize() {
      const _this = this
      uni.authorize({
        scope: 'scope.userLocation', // 获取地理信息必填的参数,其它参数见文档
        success(res) {
          _this.getLocation()
        },
        // 授权失败
        fail(err) {
          uni.showModal({
            title: '温馨提示',
            content: '无法获取当前位置,请手动开启授权',
            success: function (res) {
              if (res.confirm) {
                console.log('用户点击确定')
                uni.openSetting({
                  success(res) {
                    if (res.authSetting['scope.userLocation']) {
                      console.log('打开授权设置定位')
                      _this.getLocation()
                    }
                  },
                })
              } else if (res.cancel) {
                console.log('用户点击取消')
              }
            },
          })
        },
      })
    },
    // 获取用户的地理位置,
    getLocation() {
      const _this = this
      uni.getLocation({
        type: 'wgs84',
        altitude: true,
        success(res) {
         //小程序只能获取到位置经纬度,需要借助高德地图的逆解析地址,显示出中文具体城市名字
          _this.loadCity(res.longitude, res.latitude)
        },
      })
    },
    // 经纬度转具体城市
    // 1)需要用到高德地图的逆地理编码
    // 2)需要当前地理位置的经纬度
    // 3)小程序的key值
    loadCity(longitude, latitude) {
      const _this = this
      uni.request({
        header: {
          'Content-Type': 'application/text',
        },
        //注意:这里的key值需要高德地图的 web服务生成的key  只有web服务才有逆地理编码
        url:
          'https://restapi.amap.com/v3/geocode/regeo?output=JSON&location=' +
          longitude +
          ',' +
          latitude +
          '&key=' +
          _this.key +
          '&radius=1000&extensions=all',
        success(res) {
          if (res.statusCode === 200) {
            _this.cityName = res.data.regeocode.addressComponent.city
            console.log('获取中文街道地理位置成功', _this.cityName)
          } else {
            console.log('获取信息失败,请重试!')
          }
        },
      })
    }
 }
   

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

5. 总结

由于微信小程序只会向用户申请一次授权,之后的授权记录会一直保留,并且用户拒绝授权会导致相关API调用失败,因此我们需要考虑用户拒绝授权的情况。本文以获取位置信息的API为例,介绍了微信小程序中如何处理这种情况,对于其他权限来说逻辑也是类似的,主要包括两个步骤:
1.判断用户是否拒绝了授权。
2.对于用户拒绝授权的情况,跳转小程序设置页面引导用户手动授权。

另外在onLoad函数中去判断用户有没有授权地理位置,目的是为了用户始终没有按引导的去设置手动授权,页面后面需求又依赖位置定位,想获取到地理位置,所以就在生命周期onLoad中去引导授权

只是自己的一些理解,如果有更优雅的方法欢迎大家指教,共同进步~

参考文章:
微信小程序中用户拒绝授权的处理方式
uni-app微信小程序用户拒绝授权后,重新调起授权页
uniapp 微信小程序获取当前位置 根据经纬度获取省市区

  移动开发 最新文章
Vue3装载axios和element-ui
android adb cmd
【xcode】Xcode常用快捷键与技巧
Android开发中的线程池使用
Java 和 Android 的 Base64
Android 测试文字编码格式
微信小程序支付
安卓权限记录
知乎之自动养号
【Android Jetpack】DataStore
上一篇文章      下一篇文章      查看所有文章
加:2022-03-06 13:12:56  更:2022-03-06 13:15:45 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 16:23:14-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码