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

定位

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

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

微信小程序获取地理位置最佳实现相关推荐

微信小程序获取地理位置失败原因及解决方案
微信小程序获取用户地理位置失败的原因主要有3种情况: 1. 手机系统设置中地理位置未开启 2. 系统未给微信app授权 3. 用户未给小程序授权地理位置信息所以需要继续完善下定位失败的处理逻辑. 1 ...
微信小程序获取地理位置失败
微信小程序获取地理位置失败手机定位服务 ==> 微信定位服务 ==> 小程序定位服务(级别由高到低) 当关闭手机定位服务或微信定位服务时,小程序的获取定位服务会失败 wx.getloca ...
php根据地理位置签到,微信小程序获取地理位置实现定位签到功能
为了保证签到定位的精确性,要求开启GPS定位.小程序成功精确获取地理位置打卡签到,需要三步授权验证: 地理位置的系统开关(系统GPS开关是否打开) --系统级允许微信使用定位的开关 (微信是否有获取 ...
微信小程序获取地理位置使用
微信小程序现在的地图定位是需要申请的.import amapFile from "../../common/amap-wx.130"; // 引入微信地图的SDK getLo ...
微信小程序获取地理位置，用户未开启手机定位时的解决方案
要点:获取地理位置时,如果获取地理位置失败,有两种情况: 1.用户未给小程序授权地理位置信息 2.系统设置中-隐私选项地理位置未开启或系统未给微信授权地理位置信息在获取地理位置信息失败后,判断用户是 ...
微信小程序获取地理位置信息
// pages/list/list.js Page({/*** 页面的初始数据*/data: {nation: '',province: '',city: '',district: '',stree ...
微信小程序获取地理位置（显示地图并显示经纬度）
今天来说一下怎么显示地图并获取经纬度(获取到经纬度后显示地图) 首先我们先创建一个项目结构如下我们先来看一下wxml代码 <view class="container log-lis ...
uni-app 微信小程序获取位置信息提示“getLocation 需要在 app.json 中申明 permission 字段”
本文同步发布在:uni-app 微信小程序获取位置信息提示"getLocation 需要在 app.json 中申明 permission 字段我们在用 uni-app 开发微信小程序时, ...
微信小程序获取定位后使用腾讯地图解析到市位置
微信小程序获取定位解析当前城市位置咱们就话不多说,这呢是我第一次发布文章,第一次使用,所以使用的也比较简单,也还不是很熟悉,接下来呢就直接上代码吧,希望喜欢的朋友可以关注关注嘿嘿首先我们需要引入腾 ...
微信小程序获取附近商家
** 源代码-微信小程序获取附近商家 ** const app = getApp(); var timer = false; var QQMapWX = require('../../utils/qq ...

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

定位

授权

获取用户授权设置

打开设置界面

声明

微信小程序获取地理位置最佳实现相关推荐

最新文章

热门文章