文
章
目
录
章
目
录
最近在做uniapp微信小程序开发时，遇到了一个和地理位置相关的业务需求。要实现一个签到功能，在调用签到接口之前，得先调用一个判断是否在签到范围的接口，这个接口需要传入经纬度参数。今天就来和大家分享一下，在uniapp微信小程序里获取位置信息、完成这个业务需求的方法。
一、前期准备
- 小程序管理后台配置：咱们先进入小程序管理后台，找到「开发」选项，接着点击「开发管理」，再进入「开发设置」。在「接口设置」板块，一定要确保「地理位置」接口是开启状态。这里面有好几个和地理位置相关的接口，比如
wx.getLocation，它就是获取当前地理位置的关键接口，必须保证其可用。 - 服务器域名配置（若有需要）：要是获取到位置信息后，还得把它发送到服务器，那就得在「开发设置」里的「服务器域名」处配置合法域名，不然数据传不过去。
- manifest.json配置（必不可少）：在项目的
manifest.json文件里，需要添加一些配置信息。具体代码如下：
{
"mp-weixin": {
"appid": "你的小程序ID",
"requiredPrivateInfos": ["getLocation"],
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序定位服务"
}
}
}
}
这段代码里，appid得换成自己小程序的ID，requiredPrivateInfos里加上getLocation，是告诉小程序这个功能需要获取位置信息。permission里对scope.userLocation的描述，是在用户授权时展示给他们看的，让用户清楚为什么要获取位置信息。
二、代码实现
获取地理位置主要用到wx.getLocation这个API，不过要完整实现获取位置信息的功能，可不止调用这一个接口这么简单，还得完成下面这些前置操作。
- 调用
wx.getSetting：wx.getSetting是用来查询用户已经授予的权限状态的。它返回的结果里，包含了所有已经请求过的权限的授权状态，像位置、相册、用户信息这些权限的状态都能查到。用它主要有几个目的，比如检查用户有没有授权某个权限，避免重复弹窗请求授权，这样能提升用户体验，还能获取完整的权限设置情况。 - 调用
wx.authorize：wx.authorize的作用是直接向用户发起授权请求弹窗。但它的行为会根据用户之前的授权情况有所不同。如果是首次请求，就会弹出授权窗口；要是用户之前同意过，那这次就会静默成功；要是之前拒绝过，那这次直接就失败了，这时候必须通过wx.openSetting引导用户手动开启权限。
完成上面这两个流程后，才能调用wx.getLocation方法。因为这几个函数调用成功后返回的都是回调函数，直接嵌套调用的话，代码看起来不清晰。我只想要地理位置信息，所以就封装了一个方法，把这三个操作整合起来，最后只返回地理位置信息。完整代码如下：
// 封装获取地理位置的方法
getLocation() {
// 定义获取授权的内部函数
function fetchAuthorize() {
// 定义提示弹窗的内部函数
function showTipModal() {
wx.showModal({
title: "提示",
content: "系统需要获取该您当前的定位，请确保您的位置授权已开启",
showCancel: false,
success: (res) => {
if (res.confirm) {
wx.openSetting();
}
},
});
}
return new Promise((resolve, reject) => {
wx.authorize({
scope: "scope.userLocation",
success: (res) => {
console.log("授权成功");
resolve(true);
},
fail: (res) => {
console.log("授权失败", res);
showTipModal();
},
});
});
}
// 定义获取位置的内部函数
function fetchLocation() {
return new Promise((resolve, reject) => {
wx.getLocation({
type: "gcj02",
success: (res) => {
console.log("获取位置成功", res);
resolve(res);
},
fail: (res) => {
console.log("获取位置失败", res);
reject(res);
},
});
});
}
return new Promise((resolve, reject) => {
// 1. 先检查权限状态
wx.getSetting({
success: async (res) => {
if (res.authSetting["scope.userLocation"] === undefined) {
// 2. 用户从未请求过：直接调用授权
await fetchAuthorize();
const location = await fetchLocation();
resolve(location);
} else if (res.authSetting["scope.userLocation"] === false) {
// 3. 用户拒绝过：引导去设置页
showTipModal();
} else {
// 4. 用户已授权：直接使用
const location = await fetchLocation();
resolve(location);
}
},
fail: (res) => {
console.log("获取权限状态失败", res);
reject(res);
},
});
});
}
这个getLocation方法返回一个promise，最终得到的结果就是wx.getLocation返回的位置信息。在实际调用时，通过同步函数就能拿到位置信息了，比如：
async checkPosition() {
const { latitude, longitude } = await this.getLocation();
request({ latitude, longitude } )...
}
这样，就顺利实现了在uniapp微信小程序里获取地理位置信息的功能，满足了业务需求。大家要是也遇到类似需求，不妨试试这个方法！
