小程序打开地图选择位置wx.chooseLocation 踩坑记

最近需求允许小程序打开地图位置来选择详细地址。貌似wx.chooseLocation()可以实现。很自信的就进行开发。开发完在手机上测试bug来了。苦逼的开启翻阅开发文档。。。

踩坑一：

wx.chooseLocation()获取地理位置。授权弹窗是否允许获取地理位置，点击不允许，发现接下来的n此触发都不会在弹起授权弹窗，直接fail。原来不卸载小程序，此时小程序不会再次弹起授权弹窗。了。

解决办法：在fail里面自定义弹窗，引导用户授权。

踩坑二：

自定义引导用户进行授权，让用户开启允许地理位置。发现开发工具和手机上还不一样。。what?

手机上的显示只有一个用户信息，没有开启地理位置按钮。。

开发工具上很完美的可以开启地理位置按钮。。

原来是：app.json里面加上配置：

"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
}

主代码实现逻辑用户点击事件触发：

第一步检测用户有没有授权wx.getSetting()，没有授权就发起授权请求wx.authorize()，此时会出现弹窗：如果点击允许就会进入地图进行选择，如果点击不允许就授权失败，小程序只会做一次授权，接下来的n此触发都会直接进入fail，不会再次出现弹窗。

为了更好的用户体验只能做一个模拟弹窗引导客户重新开启授权。此时用户可以取消或者确定，当选择确定的时候就会重新授权。。。

此时调用wx.openSetting()打开地理位置就ok啦，然后就会自动弹出选择地图，大功告成。。

代码块：

wx.getSetting({success(res) {console.log('res是否开启授权', res)if (!res.authSetting['scope.userLocation']) { wx.authorize({scope: 'scope.userLocation',  success() {// console.log('前用户发起授权请求')wepy.chooseLocation({success: res => {console.log('打开地图选择位置确定', res)},fail: res => {console.log('打开地图选择位置取消', res)}})},fail() {// 用户点击不允许引导重新获取授权that.fetchAgainLocation()}})} else {// 已经授权了就会直接进入地图wepy.chooseLocation({success: res => {console.log('打开地图选择位置确定', res)},fail: res => {console.log('打开地图选择位置取消', res)}})}}})

wx.openSetting()引导客户再次授权

fetchAgainLocation() {let that = thiswx.getSetting({success: (res) => {var statu = res.authSetting;if (!statu['scope.userLocation']) {wx.showModal({title: '是否授权当前位置',content: '需要获取您的地理位置，请确认授权，否则地图功能将无法使用',success: (tip) => {if (tip.confirm) {wx.openSetting({success: (data) => {if (data.authSetting["scope.userLocation"] === true) {wx.showToast({title: '授权成功',icon: 'success',duration: 1000})wx.chooseLocation({success: res => {console.log('打开地图选择确定', res)}})} else {wx.showToast({title: '授权失败',icon: 'success',duration: 1000})}},fail: () => {},complete: () => {}});}}})}},fail: ()=>{},complete: ()=>{}})}

过程是痛苦的，结果是甜甜的。。

小程序打开地图选择位置wx.chooseLocation 踩坑记相关推荐

在微信小程序中打开地图选择位置功能
在微信小程序中打开地图选择位置功能前言首先查看效果一.准备工作 1-1. **下载小程序地理定位** ,[qqmap-wx-jssdk.js](https://lbs.qq.com/miniPr ...
uniapp打开地图选择位置（查看位置）详解
开发小程序的时候,有时候要做打开地图选择位置和打开地图查看当前位置.我前段时间刚做的时候也是一脸懵逼(新手上路). 我是用的uniapp做的,配置方法和原生小程序的配置方法不太一样.下面就是我写的配置 ...
uni-app 中实现位置授权以及打开地图选择位置功能
最近在项目中遇到一个要用户授权位置且可以用户自己选择位置的功能,看起来好像很难,其实并不难,我在网上看了一些优秀博主的博客,只要跟着步骤一步步来就能实现,下面是我在实现该功能后做的一次总结,希望能帮到 ...
uniapp(小程序) 配置海康威视-萤石监控(直播替代方案) 踩坑与解决方法
uniapp(小程序) 配置海康威视-萤石监控(直播替代方案) 踩坑与解决方法因为公司业务需求需要获取监控的摄像头,萤石是给出了几种方案去实现. 直播接入:萤石开放平台API文档小程序接入:萤石 ...
微信小程序打开地图的方法
1.打开内置地图 wx.openLocation({latitude: 31.230416, // 上海的纬度longitude: 121.473701, // 上海的经度name: '上海市', / ...
uniapp实现位置授权并打开地图选择位置信息
实现效果图: 步骤1:登录微信小程序公众平台,在 "开发" --> "开发管理" --> "开发设置" 中复制 AppID (如 ...
微信小程序上传API接口wx.uploadFile的坑
小程序的坑比较多,原因在于小程序开发文档相当的不全,所以开发小程序是比较痛苦的,但也正是因为坑多,技术却一步一步的往上升了...不知道该笑还是该哭. 进入正题:wx.uploadFile的坑坑一:返 ...
微信小程序 html css xml,微信小程序使用towxml解析html流程及踩坑记录
towxml相对于wxParse还是有一定优势的,首先一些废弃或者过新的标签wxParse是不能解析的,会导致整个页面不能显示,其次 towxml对于界面的排版优化是比较美观的,对于开发者还算比较友好 ...
小程序换行符\n失效问题解决-日常踩坑
在html中可以直接使用br 换行,但是小程序wxml中使用br>无效,可以换成\n 注意: 一定要注意,text中\n才能生效,view里边直接写\n不行 // 事例 <text> ...

小程序打开地图选择位置wx.chooseLocation 踩坑记

小程序打开地图选择位置wx.chooseLocation 踩坑记相关推荐

最新文章

热门文章