微信小程序获取当前城市地理位置并且实现位置授权-微信小程序开发教程-微信小程序,小程序,小程序开发,微信小程序开发,微信小程序社区,微信开发者平台 - 葡京娱乐网址
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微信小程序获取当前城市地理位置并且实现位置授权

[复制链接]
查看: 109|回复: 1
最佳答案
0 

0

主题

0

帖子

20

积分

新人求带

积分
20
微信小程序获取当前城市地理位置并且实现位置授权,

部分接口需要获得用户授权同意后才能调用。此类接口调用时:
  • 如果用户未接受或拒绝过此权限,会弹窗询问用户,用户点击同意后方可调用接口;
  • 如果用户已授权,可以直接调用接口;
  • 如果用户已拒绝授权,则短期内不会出现弹窗,而是直接进入接口 fail 回调。请开发者兼容用户拒绝授权的场景。


1. 获取当前地理位置,可通过wx.getLocation接口,返回经纬度、速度等信息;

 注意---它的默认工作机制:

 首次进入页面,调用该api,返回用户授权结果,并保持该结果。只要用户未删除该小程序或变更授权情况,那么用户再次进入该页面,授权结果还是不变,且不会再次调用该API;

 在不删除小程序的情况下,继续再次发起授权请求,需要使用wx.openSetting。

   所以第一步要拿到用户的授权wx.openSetting;

2. 第二步,可通过wx.getLocation接口,返回经纬度、速度等信息;

3. 微信没有将经纬度直接转换为地理位置,可借助腾讯位置服务中关于微信小程序的地理转换JS SDK的API或者百度API (我使用的百度API)



在用户首次进入某页面(需要地理位置授权)时候,在页面进行在onShow时,进行调用wx.getLocation要求用户进行授权;以后每次进入该页面时,通过wx.getSetting接口,返回用户授权具体信息。

葡京赌场网站如下:
  1. onShow: function () {
  2.     var _this = this;
  3.     //调用定位方法
  4.     _this.getUserLocation();
  5.   },
  6. //定位方法
  7. getUserLocation: function () {
  8.     var _this = this;
  9.     wx.getSetting({
  10.       success: (res) => {
  11.         // res.authSetting['scope.userLocation'] == undefined    表示 初始化进入该页面
  12.         // res.authSetting['scope.userLocation'] == false    表示 非初始化进入该页面,且未授权
  13.         // res.authSetting['scope.userLocation'] == true    表示 地理位置授权
  14.         if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {
  15.           //未授权
  16.           wx.showModal({
  17.             title: '请求授权当前位置',
  18.             content: '需要获取您的地理位置,请确认授权',
  19.             success: function (res) {
  20.               if (res.cancel) {
  21.                 //取消授权
  22.                 wx.showToast({
  23.                   title: '拒绝授权',
  24.                   icon: 'none',
  25.                   duration: 1000
  26.                 })
  27.               } else if (res.confirm) {
  28.                 //确定授权,通过wx.openSetting发起授权请求
  29.                 wx.openSetting({
  30.                   success: function (res) {
  31.                     if (res.authSetting["scope.userLocation"] == true) {
  32.                       wx.showToast({
  33.                         title: '授权成功',
  34.                         icon: 'success',
  35.                         duration: 1000
  36.                       })
  37.                       //再次授权,调用wx.getLocation的API
  38.                       _this.geo();
  39.                     } else {
  40.                       wx.showToast({
  41.                         title: '授权失败',
  42.                         icon: 'none',
  43.                         duration: 1000
  44.                       })
  45.                     }
  46.                   }
  47.                 })
  48.               }
  49.             }
  50.           })
  51.         } else if (res.authSetting['scope.userLocation'] == undefined) {
  52.          //用户首次进入页面,调用wx.getLocation的API
  53.           _this.geo();
  54.         }
  55.         else {
  56.           console.log('授权成功')
  57.           //调用wx.getLocation的API
  58.           _this.geo();
  59.         }
  60.       }
  61.     })

  62.   },         

  63. // 获取定位城市
  64.   geo: function () {
  65.     var _this = this;
  66.     wx.getLocation({
  67.       type: 'wgs84',
  68.       success: function (res) {
  69.         var latitude = res.latitude
  70.         var longitude = res.longitude
  71.         var speed = res.speed
  72.         var accuracy = res.accuracy
  73.         wx.request({
  74.           url:'' + res.latitude + ',' + res.longitude + '&output=json',
  75.           data: {},
  76.           header: { 'Content-Type': 'application/json' },
  77.           success: function (ops) {
  78.             console.log('定位城市:', ops.data.result.addressComponent.city)
  79.           },
  80.           fail: function (resq) {
  81.             wx.showModal({
  82.               title: '信息提示',
  83.               content: '请求失败',
  84.               showCancel: false,
  85.               confirmColor: '#f37938'
  86.             });
  87.           },
  88.           complete: function () {
  89.           }
  90.         })
  91.       }
  92.     })
  93.   },      
复制葡京赌场网站
   
效果图:首次进入页面

138-262099091.png

拒绝授权后,再次进入该页面或者点击页面某按钮(获取位置)绑定JS

709-776709183.png

以上两个弹出框的结构是一样的,前者使用的是wx.getLocation接口自带的样式,后者使用的wx.showModel接口带的样式。

简单讲一下授权原理:首次进入该页面,onshow调用wx.getLocation要求用户进行授权;用户拒绝后,再次进入该页面,我们通过wx.getSetting接口,返回用户授权的情况。

res.authSetting['scope.userLocation']的值与true比较,为true就是授权了,false就是拒绝授权了。

详见微信的scope表:https://mp.weixin.qq.com/debug/w ... uthorize-index.html

以上就是获取用户地理位置并授权的教程,有借鉴其他案例,希望给大家学习微信小程序带来帮助!

回复

使用道具 举报

最佳答案
0 

0

主题

20

帖子

736

积分

略知一二

积分
736
发表于 4 天前 | 显示全部楼层
学习了,很不错的教程
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



www.mainetimberworks.com—微信开发者的分享交流平台,专注微信开发生态。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

微信葡京娱乐网址号

市场合作
[email protected]