Uniapp微信小程序如何获取地理位置

文
章
目
录

• 一、前期准备
• 二、代码实现

最近在做uniapp微信小程序开发时，遇到了一个和地理位置相关的业务需求。要实现一个签到功能，在调用签到接口之前，得先调用一个判断是否在签到范围的接口，这个接口需要传入经纬度参数。今天就来和大家分享一下，在uniapp微信小程序里获取位置信息、完成这个业务需求的方法。

一、前期准备

1. 小程序管理后台配置：咱们先进入小程序管理后台，找到「开发」选项，接着点击「开发管理」，再进入「开发设置」。在「接口设置」板块，一定要确保「地理位置」接口是开启状态。这里面有好几个和地理位置相关的接口，比如wx.getLocation，它就是获取当前地理位置的关键接口，必须保证其可用。
2. 服务器域名配置（若有需要）：要是获取到位置信息后，还得把它发送到服务器，那就得在「开发设置」里的「服务器域名」处配置合法域名，不然数据传不过去。
3. manifest.json配置（必不可少）：在项目的manifest.json文件里，需要添加一些配置信息。具体代码如下：

{
  \"mp-weixin\": {
    \"appid\": \"你的小程序ID\",
    \"requiredPrivateInfos\": [\"getLocation\"],
    \"permission\": {
      \"scope.userLocation\": {
        \"desc\": \"你的位置信息将用于小程序定位服务\"
      }
    }
  }
}

这段代码里，appid得换成自己小程序的ID，requiredPrivateInfos里加上getLocation，是告诉小程序这个功能需要获取位置信息。permission里对scope.userLocation的描述，是在用户授权时展示给他们看的，让用户清楚为什么要获取位置信息。

二、代码实现

获取地理位置主要用到wx.getLocation这个API，不过要完整实现获取位置信息的功能，可不止调用这一个接口这么简单，还得完成下面这些前置操作。

1. 调用wx.getSetting：wx.getSetting是用来查询用户已经授予的权限状态的。它返回的结果里，包含了所有已经请求过的权限的授权状态，像位置、相册、用户信息这些权限的状态都能查到。用它主要有几个目的，比如检查用户有没有授权某个权限，避免重复弹窗请求授权，这样能提升用户体验，还能获取完整的权限设置情况。
2. 调用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微信小程序里获取地理位置信息的功能，满足了业务需求。大家要是也遇到类似需求，不妨试试这个方法！