小程序定位地理定位以及使用wx.getLocation拒绝授权后(在用户拒绝授权以后，如果再次调用 getLocation 不会再弹出授权弹框)的解决方案、开通腾讯位置服务、逆地址解析等

白臻

1933人浏览 · 2024-07-19 08:53:15

白臻 · 2024-07-19 08:53:15 发布

小程序地理定位是指通过小程序开发平台提供的 API 来获取用于的地理位置信息。用户再使用小程序时，可以授权小程序获取自己的地理位置信息

wx.getLocation( ) :获取当前的地理位置
wx.chooseLocation( ):打开地图选择位置
申请开通：
暂时支队部分类目的小程序开放，需要先通过类目审核，然后再小程序管理开发后台，【开发】- 【开发管理】- 【接口设置】中自助开通该接口权限。

使用方法

在 app.json 中配置 “requiredPrivateInfos”: [“getLocation”] 进行声明启用
在调用 wx.getLocation() 时需要在 app.json 配置 permission 字段，同时使用 scope.userLocation 声明收集用户选择的位置信息的目的， wx.chooseLocation() 接口不需要配置该字段，可以直接进行调用
"permission": { "scope.userLocation": { "desc": "获取地理位置信息用于填写收货地址" } }
在配置好以后，调用 wx.getLocation() 和 wx.chollseLocation() 接口

示例：app.json

"requiredPrivateInfos": ["getLocation", "chooseLocation"],
  "permission": {
    "scope.userLocation": {
      "desc": "获取地理位置信息用于填写收货地址"
    }
  }

示例：使用的文件

const res = await wx.getLocation()

const res = await wx.chooseLocation()

注意 wx.getLocation 拒绝授权后的解决方案

在用户拒绝授权以后，如果再次调用 getLocation 不会再弹出授权弹框
在这里插入图片描述

Error: MiniProgramError
{“errMsg”:“getLocation:fail auth deny”}
at Object.errorReport (WAServiceMainContext.js?t=wechat&s=1721270018877&v=3.4.10:1)
at Function.thirdErrorReport (WAServiceMainContext.js?t=wechat&s=1721270018877&v=3.4.10:1)
at Object.thirdErrorReport (WAServiceMainContext.js?t=wechat&s=1721270018877&v=3.4.10:1)
at i (WASubContext.js?t=wechat&s=1721270018877&v=3.4.10:1)
at Object.cb (WASubContext.js?t=wechat&s=1721270018877&v=3.4.10:1)
at q._privEmit (WASubContext.js?t=wechat&s=1721270018877&v=3.4.10:1)
at q.emit (WASubContext.js?t=wechat&s=1721270018877&v=3.4.10:1)
at WASubContext.js?t=wechat&s=1721270018877&v=3.4.10:1
at n (WASubContext.js?t=wechat&s=1721270018877&v=3.4.10:1)
at $e (WASubContext.js?t=wechat&s=1721270018877&v=3.4.10:1)(env: Windows,mp,1.06.2405020; lib: 3.4.10)

解决办法

在这里插入图片描述

调用 wx.getSetting 获取用户所有的授权信息，查询到用户是否授权了位置信息
authSetting 只包含了小程序向用户请求的所有的权限，同时包含了授权的结果（true、false）
如果小程序没有向用户发起过授权请求，authSettiong 中没有 scope.userLocation 属性
如果用户点击了允许授权，scope.userLocation 返回值是 true
如果用户点击了拒绝授权，scope.userLocation 返回值是 false
如果 scope.userLocation 返回值是 undefined 说明小程序并没有向用户发起授权请求

  // 获取用户所有的授权的信息
    async onLocation1() {
        const { authSetting } = await wx.getSetting()
        console.log(authSetting['scope.userLocation'])
        // 判断用户是否拒绝了授权
        if (authSetting['scope.userLocation'] === false) {
            const modalRes = await wx.modal({
                title: "授权提示",
                content: "需要获取地理位置信息，请确认授权"
            })
            if (!modalRes) return wx.toast({ title: "您拒绝了授权" })
            // 如果用户点击了确定，说明用户同意授权，需要代开微信客户端小程序授权页面
            const { authSetting } = await wx.openSetting()
            if (!authSetting['scope.userLocation']) return wx.toast({ title: '授权失败' })
            // 如果用户更新了授权信息，说明用户同意授权获取位置信息
            try {
                const locationRes = await wx.getLocation()
                console.log(locationRes)
            } catch (error) {
                wx.toast({ title: '您拒绝授权获取位置信息' })
            }
        } else {
            try {
                const locationRes = await wx.getLocation()
                console.log(locationRes)
            } catch (error) {
                wx.toast({ title: '您拒绝授权获取位置信息' })
            }
        }
    },

也可以在button 按钮添加属性【open-type=“openSetting”】

 <!-- 如果给按钮添加 open-type 属性，属性设置为 openSetting 就会打开授权页面 -->
      <!-- 就会打开微信客户端小程序授权页面 -->
      <button type="primary" open-type="openSetting">打开授权页面</button>

开通腾讯位置服务

使用 wx.chooseLocation() 能够很方便的让用户来选择地理位置，但是 wx.chooseLocation()返回的数据并没有包含省市区、省市区编码数据。而日常接口，需要传递省市区、省市区编码数据。
这时候我们可以使用腾讯位置服务将返回的经度、维度进行逆地址解析，转换成详细地址

腾讯位置服务专为小程序开发提供了 JavaScript SDK，方便开发者在小程序中可以使用腾讯地图服务。使用腾讯位置服务
可以很方便的让开发者实现地址解析、逆地址解析等功能
腾讯位置服务官网

打开官方文档，根据文档进行操作
在这里插入图片描述

腾讯位置服务逆地址解析获取

在官方文档第三项下载 JavaScriptSDK v1.2 包下载完成后
在 miniprogram目录下把下载好的 zip 包解压完成后放到新建的 libs 文件夹下
然后在使用文件中引入 QQMapWX 核心类 import QQMapWX from '../../../../../libs/qqmap-wx-jssdk'
对获取的数据进行格式化、组织然后赋值给 data 中的字段
打开文档导航栏 - 开发文档 - WebService API - 开发指南-搜索服务 - 行政区划
如果是省，前 2 位有值，后面 4 位是 0 adcode.replace(adcode.substring(2, 6), "0000")
如果是市，前 4 位有值，后面 2 位是 0 adcode.replace(adcode.substring(4, 6), "00"),
如果是区 adcode
配置接口的调用额度
点击导航栏的控制台 - 额度管理- 账号额度- 找到逆地址解析
点击逆地址解析的配额分配
弹框里选择当前自己创建的应用和 key
填写配额分配和并发量点击提交
打开微信小程序项目清缓存、重新编译、重新打开项目


// 引入 QQMapWX 核心类
import QQMapWX from '../../../../../libs/qqmap-wx-jssdk'
Page({
    data: {
        // 需要将请求参数放到 data对象下，方便再模板中绑定数据
        name: '', // 收货地址
        phone: '', // 手机号码
        provinceName: '', // 省
        provinceCode: '', // 省编码
        cityName: '', // 市
        cityCode: '', // 市编码
        distictName: '', // 区
        distictCode: '', // 区编码
        address: '', // 详细地址
        fullAddress: '', // 完整地址
        isDefault: false, // 是否设置默认地址 0 不设置默认地址
    },

    // 获取用户地理位置信息
    async onLocation() {
        // latitude 维度,longitude 经度,name 搜索的地点,address
        const { latitude, longitude, name, address } = await wx.chooseLocation()

        // 使用实例化方法 reverseGeocoder 方法进行逆解析
        this.qqmapwx.reverseGeocoder({
            location: {
                latitude,
                longitude
            },
            success: (res) => {
                // 获取省市区、省市区编码
                const { adcode, province, city, distict } = res.result.ad_info
                // 获取街道、门牌 （街道、门牌 可能为空）
                const { street, street_number } = res.result.address_component
                // 获取标准地址
                const { standard_address } = res.result.formatted_addresses
                // 对获取的数据进行格式化、组织 然后赋值给 data 中的字段
                this.setData({
                    provinceName: province, // 省
                    // 如果是省，前 2 位有值，后面 4 位是 0
                    provinceCode: adcode.replace(adcode.substring(2, 6), "0000"), // 省编码
                    cityName: city, // 市
                    // 如果是市，前 4 位有值，后面 2 位是 0
                    cityCode: adcode.replace(adcode.substring(4, 6), "00"), // 市编码
                    distictName: distict, // 区
                    distictCode: distict && adcode, // 区编码
                    // 组织详细地址
                    address: street + street_number + name, // 详细地址
                    fullAddress: standard_address + name, // 完整地址
                })
            }
        })
    },


    onLoad() {
        // 对核心类 QQMapWX 进行实例化
        this.qqmapwx = new QQMapWX({
            // key 在进行你解析的时候，如果发现 key 只能使用一次，需要在腾讯位置服务后台配置额度
            key: "HLEBZ-6QJWZ-P5BXN-TQ6D3-WRIAT-RIFGQ"
        })
    }
})