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

定位

微信小程序获取用户当前位置需要用户的授权,可以直接调用 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": "你的位置信息将用于查询附近的人等功能"
    }
  },

打开地图选择位置效果图:
在这里插入图片描述

  • 0
    点赞
  • 6
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:1024 设计师:我叫白小胖 返回首页
评论

打赏作者

卡了个卡

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值