微信小程序获取地理位置最佳实现

定位

微信小程序获取用户当前位置需要用户的授权，可以直接调用 wx.getLocation，微信会弹出授权提示，如果用户曾经拒绝过授权则不会弹窗。

根据微信官方文档：

授权

部分接口需要经过用户授权同意才能调用。我们把这些接口按使用范围分成多个 scope ，用户选择对 scope 来进行授权，当授权给一个
scope 之后，其对应的所有接口都可以直接使用。

此类接口调用时：

• 如果用户未接受或拒绝过此权限，会弹窗询问用户，用户点击同意后方可调用接口；
• 如果用户已授权，可以直接调用接口；
• 如果用户已拒绝授权，则不会出现弹窗，而是直接进入接口 fail 回调。请开发者兼容用户拒绝授权的场景。

获取用户授权设置

开发者可以使用 wx.getSetting 获取用户当前的授权状态。

打开设置界面

用户可以在小程序设置界面（「右上角」 - 「关于」 - 「右上角」 - 「设置」）中控制对该小程序的授权状态。

开发者可以调用 wx.openSetting 打开设置界面，引导用户开启授权。

比较好的方案是：先获取用户设置信息 wx.getSetting，判断用户位置授权设置，如果没有授权则弹出授权提示，如果曾经拒绝授权则打开设置页面，方便用户修改授权设置，如果用户拒绝授权则给一个默认经纬度。

locationUtil.js

var util = require('util.js');

function getLocation() {

  return new Promise(function (resolve, reject) {
    
    wx.getSetting({
      success: (res) => {
        //console.log(JSON.stringify(res))
        // res.authSetting['scope.userLocation'] == undefined    表示 初始化进入该页面
        // res.authSetting['scope.userLocation'] == false    表示 非初始化进入该页面,且未授权
        // res.authSetting['scope.userLocation'] == true    表示 地理位置授权
        if (res.authSetting['scope.userLocation'] === false) {
          wx.showModal({
            title: '请求授权当前位置',
            content: '需要获取您的地理位置，请确认授权',
            success: function (res) {
              if (res.cancel) {
                wx.showToast({
                  title: '拒绝授权',
                  icon: 'none',
                  duration: 1000
                });
                getCurrentLocation(resolve, reject);
              } else if (res.confirm) {
                wx.openSetting({
                  success: function (dataAu) {
                    if (dataAu.authSetting["scope.userLocation"] == true) {
                      wx.showToast({
                        title: '授权成功',
                        icon: 'success',
                        duration: 1000
                      })
                      //再次授权，调用wx.getLocation的API
                      getCurrentLocation(resolve, reject);
                    } else {
                      wx.showToast({
                        title: '授权失败',
                        icon: 'none',
                        duration: 1000
                      });
                      getCurrentLocation(resolve, reject);
                    }
                  }
                })
              }
            }
          })
        } else if (res.authSetting['scope.userLocation'] == undefined) {
          wx.authorize({
            scope: 'scope.userLocation',
            success() { //用户同意开启授权
              //进行地理位置授权完成后的逻辑操作
              getCurrentLocation(resolve, reject);
            },
            fail(res) { //用户拒绝开启授权
              wx.hideLoading()
              wx.showToast({
                title: '授权失败',
                icon: 'none',
                duration: 2000
              });
              getCurrentLocation(resolve, reject);
            }
          })
        } else if (res.authSetting['scope.userLocation'] == true) {
          getCurrentLocation(resolve, reject);
        }
      }
    });
  });
}


function getCurrentLocation(resolve, reject) {
  wx.getLocation({
    type: 'gcj02',
    success: function (res) {
      var longitude = res.longitude //经度
      var latitude = res.latitude //纬度

      wx.setStorageSync("longitude", longitude);
      wx.setStorageSync("latitude", latitude);
      if (resolve) {
        resolve(res);
      }
    },
    fail: function (res) { 
      //用户授权获取地理位置失败，默认深圳龙岗区
      res = {longitude:114.24779,latitude:22.71991};
      if (resolve) {
         resolve(res);
      }
    }
  })  
}

// 打开地图选择位置
function chooseLocation() {
	var that = this;
    return new Promise(function (resolve, reject) {
        that.getLocation().then(res => {
            if (res) {
              wx.chooseLocation({
                latitude: res.latitude,
                longitude: res.longitude,
                success: function (addressInfo) {
                  resolve(addressInfo);
                },
                fail: function (res) {
                  reject(res);
                }
              });
            } else {
              util.showMsg('定位失败');
            }
        });
    });
}

/**
 * 导出
 */
module.exports = {
  getLocation: getLocation,
  chooseLocation: chooseLocation,
}

util.js

function showMsg(msg, icon) {
  if (isBlank(icon)) {
    icon = "none";
  }
  wx.showToast({
    title: msg,
    icon: icon,
    duration: 2000
  })
}

用法：

// 定位当前经纬度
locationUtil.getLocation().then(res => {
	var params = {lng:res.longitude,lat:res.latitude};
	console.log(params.lng);
});

// 打开地图选择位置
locationUtil.chooseLocation().then(res => {
	var params = {lng:res.longitude,lat:res.latitude};
	console.log(params.lng);
});

声明

获取地理位置需要在app.json中声明用途：

  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于查询附近的人等功能"
    }
  },

打开地图选择位置效果图：