在微信小程序中如何使用wx.onLocationChange（function callback）

参考文档：点这里

其实我使用这个挨批之前用的是wx.getLocation文档点这里

可是很无奈，产品的需求是要从首页点进去的时候获取一次用户坐标，可是如果用户频繁点击在真机上就会出现获取不到的情况，会报以下的错误，如下图所示

所以很尴尬，我就打算试试用报错里面提供的API去实现获取坐标功能，刚开始弄我发现文档里面的例子太少了，加上百度里面的例子也不多，所以就自己试着弄。

//这个函数是一开始点击事件触发的：
async authorization() {let self = thistry {await this.getWxLocation()//等待} catch (error) {Model({title: '温馨提示',tip: '获取权限失败，需要获取您的地理位置才能为您提供更好的服务！是否授权获取地理位置？',showCancel: true,confirmText: '前往设置',cancelText: '取消',sureCall() {self.toSetting()},cancelCall() {}})return}},getWxLocation() {wx.showLoading({title: '定位中...',mask: true,})return new Promise((resolve, reject) => {let _locationChangeFn = (res) => {console.log('location change', res)Storage.set('userLocation', res)this.getList();wx.hideLoading()wx.offLocationChange(_locationChangeFn)}wx.startLocationUpdate({success: (res) => {console.log(res);wx.onLocationChange(_locationChangeFn)resolve()},fail: (err) => {console.log('获取当前位置失败', err)wx.hideLoading()reject()}})})},toSetting() {let self = thiswx.openSetting({success(res) {console.log(res)if (res.authSetting["scope.userLocation"]) {// res.authSetting["scope.userLocation"]为trueb表示用户已同意获得定位信息，此时调用getlocation可以拿到信息self.authorization()}}})},

思路主要是这样的：首先事件触发authorization函数，等待getWxLocation函数里面的结果处理，看文档知道在调用onLocationChange前先调用startLocationUpdate

等待startLocationUpdate的成功回调打印一下内容，说明开启小程序进入前台时接收位置消息成功了

成功之后，在回调里面就可以调用onLocationChange去监听实时地理位置变化（注意：目前只有真机开启调试模式打印才能看到返回的坐标等参数，电脑调试暂时不行）
获取之后要记得关闭实时监听wx.offLocationChange(_locationChangeFn)，不然就会一直去获取坐标，可能会导致手机耗电严重。
如果是startLocationUpdate是失败回调的话：就去调用wx.openSetting申请用户的定位权限（scope.userLocation）：参考文档

开启成功后就去再调一次authorization获取实时定位就好了！

在微信小程序中如何使用wx.onLocationChange（function callback）相关推荐

在微信小程序中如何使用wx.onLocationChange（）【转载】
参考文档:点这里其实我使用这个挨批之前用的是wx.getLocation文档点这里可是很无奈,产品的需求是要从首页点进去的时候获取一次用户坐标,可是如果用户频繁点击在真机上就会出现获取不到的情况, ...
微信小程序后台位置信息wx.onLocationChange实现间隔上报
微信小程序中使用wx.startLocationUpdateBackground这个定位方式时,肯定要使用 wx.onLocationChange不间断的获取位置信息,但这个有两个问题:1.位置不变化 ...
微信小程序中常见的 typeof cb == “function” cb(that.globalData.userInfo)
微信小程序官方demo以及很多代码中会在函数中经常出现 typeof cb == "function" && cb(that.globalData.userInfo ...
微信小程序中 wx:for=和wx:key=是什么关系
微信小程序中一般都会要求有wx:for=""和wx:key=""两个都存在,不然会有警告最简单的解释 wx:for="里面是要循环遍历的数组&quo ...
微信小程序中全局变量userInfo在其它页面不可用（wx.getUserInfo为异步获取信息）
app.js中获取用户的openid和userinfo,并存储为全局变量,当在index中调用getApp().globalData.userInfo时却返回为空值: getUserInfo: fun ...
微信小程序中使用wx.navigateTo跳转时页面出现空白
在微信小程序中当触发点击事件后跳转的页面时,跳转的页面出现空白,控制台报Page "pages/outline-xi/outline-xi" has not been regist ...
微信小程序setinterval_微信小程序中setInterval的使用方法
微信小程序中setinterval的使用方法看了下小程序的画布功能,简单的使用了一下,用蹩脚的逻辑做了个 "弹啊弹,弹走鱼尾纹的小球",一起来看下吧.过程不重要主要是画布的使用哦 ...
Canvas绘图在微信小程序中的应用:生成个性化海报
Canvas绘图在微信小程序中的应用:生成个性化海报如极客时间的一些实现案例: 基础语法 Canvas本质是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素,默认大小为30 ...
微信小程序中this指向作用域问题this.setData is not a function报错
在微信小程序中我们一般通过以下方式来修改data中的数据 this.setData({index1: e.detail.value}) 比如在函数里面修改数据 bindFaChange1: funct ...

在微信小程序中如何使用wx.onLocationChange（function callback）

在微信小程序中如何使用wx.onLocationChange（function callback）相关推荐

最新文章

热门文章