摘要：wx.chooseLocation API可以方便的唤醒地图并实现搜索、定位的功能。但使用前需要校验scope.userLocation权限，此时需要用到wx.getSetting来检测权限。当用户首次进来时直接拒绝了授权，则需要使用wx.openSetting引导用户授权，否则将无法使用地图功能......

在开发生鲜类微信小程序时需要使用地图定位功能，看了看微信的官方文档，一共提供了两种实现方案。
一种是：<map>标签的方式，戳我访问官方文档；
一种是：wx.chooseLocation API的方式，戳我访问官方文档。
在开发上一个小程序时，我选择的是后者，接下来说说遇到的一些坑吧。

一、用户授权

当我们的小程序中使用了地址位置功能后，在用户进入时可以设置默认触发弹窗，界面如图：用户进入小程序时会自动弹窗提醒授权位置权限.png此时用户有两种选择，要么拒绝，要么接受。对于选择接受的用户来说，后面的开发比较顺利。就怕用户不按套路出牌，直接点击了拒绝。当权限被拒绝后，这个授权的弹窗就无法再唤醒了，也就意味着无法正常使用定位功能。（可删除小程序重新进入）

1.1、用户拒绝了授权怎么办？

wx.getSetting 这个API可以获取用户授权设置，然后再配合wx.openSetting来引导用户手动开启定位权限。当用户开启定位权限后，就可以正常使用定位功能了。

二、实战演练

接下来是进入代码阶段，有兴趣的看官注意仔细看哈。

2.1、uni-app 创建项目

下载工作就略过了，打开HBuilder X后点击顶部的文件-新建-项目- 选择uni-app - 填写项目名 - 选择默认模板 - 点击创建 - 等待项目创建完成。有关使用uni-app创建项目的详细步骤，戳我访问官方文档

2.2、在manifest.json中开启勾选位置接口

步骤如下：在HBuilder X左侧项目列表中找到刚创建的项目，接着点击manifest.json，再点击微信小程序，勾选位置接口并输入以下文本：“您的位置信息将用于小程序位置接口的效果展示”。如图：在manifest.json配置文件中开启位置权限.png

2.3、如何实现用户进入小程序后就拉起授权的弹窗？

这里有两种方式：
1、wx.authorize；
2、wx.getLocation；
下面我把两种方法都贴出来，看官可根据实际需要进行选择。

2.3.1、wx.authorize 提前发起授权请求

在App.vue文件中的onLaunch方法中粘贴以下代码。

    
uni.authorize({
    
  scope: 'scope.userLocation',
    
  success: function () {
    
    console.log('用户同意了授权')
    
  }
    
})
    

2.3.2、wx.getLocation 通过获取经纬度的方式实现

在App.vue文件中的onLaunch方法中粘贴获取经纬度的代码。

    
uni.getLocation({
    
  success: function (res) {
    
    uni.setStorageSync('currentLocation', res) /* 把获取到的经纬度信息存储起来，方便后用 */
    
  },
    
})
    

当我们这一步做完后，在HBuilder X中依次点击：运行 - 运行到小程序模拟器 - 微信小程序开发者工具。稍等片刻后，微信小程序开发者工具会自动启动并且弹窗提示授权。若看官没有在HBuilder X中绑定过微信小程序的启动路径，可以参见文档进行配置。戳我查看如何运行uni-app

然后我们在微信小程序开发者工具中点击预览，待二维码生成后可以用手机扫码，此时就可以看到手机上有授权的提醒了。看官可以先点拒绝，然后再扫码进来，你会发现不会再弹窗让你授权了哈。即使你第一次点击了同意，此时也不会再弹窗了。

现在，我们已经实现了用户首次进入小程序时拉起授权弹窗的功能，接下来就是打开地图并显示当前位置了。

2.4、打开地图并选择位置

2.4.1、wx.getSetting + wx.openSetting 双管齐下

这里我们需要做一些权限上的校验，否则直接使用wx.chooseLocation可能无法成功打开地图，毕竟是要有scope.userLocation权限才行的。前面已经说过了，scope.userLocation的权限可以通过wx.getSetting来检测。由于用户拒绝后无法再弹窗，但通过wx.openSetting可以引导用户手动开始权限。当用户手动开启权限后，就可以使用地图并实现定位功能了。具体代码见下方，有点儿多，分清判断条件就好办了。

2.4.1.1、wx.getSetting 检测授权情况

    
authVerification () { /* 验证用户授权情况 */ 
    
  uni.getSetting({
    
    success: (res) => {
    
      if (res.authSetting['scope.userLocation']) { /* 用户授权成功时走这里 */
    
        this.handerChooseLocation()
    
      } else if (res.authSetting['scope.userLocation'] === undefined) { /* 用户未授权时走这里 */
    
        this.handleOpenSetting()
    
      } else { /* 用户拒绝了授权后走这里 */
    
        this.handleOpenSetting()
    
      }
    
    }
    
  })
    
},
    

2.4.1.2、wx.openSetting 引导授权

    
handleOpenSetting () { /* 引导用户开启权限 */
    
  uni.openSetting({
    
    success: (res) => {
    
      if (res.authSetting["scope.userLocation"]) {
    
        this.handerChooseLocation()
    
      }
    
    }
    
  })
    
},
    

2.4.1.3、wx.chooseLocation 唤醒地图

    
handerChooseLocation () {
    
  uni.chooseLocation({
    
    latitude: this.latitude || '', /* 纬度 */
    
    longitude: this.longitude || '', /* 经度 */
    
    success: (res) => {
    
        uni.setStorageSync('currentLocation', res)
    
    },
    
    fail: function (err) {
    
        console.log('取消按钮', err)
    
    }
    
  })
    
},
    

接下来是调用，不一定非要是button，但一定要手动执方法。

2.4.1.4、使用

    
<button type="primary" @tap="authVerification">请选择位置</button>
    

现在，点击上面的按钮时即可看到效果。如图：使用chooseLocation定位后的效果.png

由于不太方便录视频，所以就不录了，有兴趣的看官可以下载源码自己在本地跑跑看效果。

三、源码下载

demo源码已上传到了github上的dev-wx-chooseLocation-20201004 分支中。如果看官需要研究源码，可以点击下面的链接进行访问并下载。

    
网址： 戳我前往github查看源码  
    

四、最后

整体而言，在微信小程序中使用定位没什么大坑，最主要的就是注意引导用户授权。但用uni-app打包成H5后，那简直就是噩梦！详情见下一篇：《uni-app跨端开发微信小程序之打包成H5后加载缓慢、定位不准真让人崩溃！》

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/xwzj/2020-10-04/uni-app-wx-chooseLocation.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。