微信小程序中怎樣獲取當(dāng)前城市位置及再次授權(quán)地理位置的代碼實(shí)現(xiàn)

小編給大家分享一下微信小程序中怎樣獲取當(dāng)前城市位置及再次授權(quán)地理位置的代碼實(shí)現(xiàn)，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

                                                       本篇文章給大家?guī)?lái)的內(nèi)容是關(guān)于微信小程序?qū)嵗韩@取當(dāng)前城市位置及再次授權(quán)地理位置的代碼實(shí)現(xiàn)，有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。

1. 獲取當(dāng)前地理位置，可通過(guò)wx.getLocation接口，返回經(jīng)緯度、速度等信息;

　注意---它的默認(rèn)工作機(jī)制：

　首次進(jìn)入頁(yè)面，調(diào)用該api，返回用戶授權(quán)結(jié)果，并保持該結(jié)果。只要用戶未刪除該小程序或變更授權(quán)情況，那么用戶再次進(jìn)入該頁(yè)面，授權(quán)結(jié)果還是不變，且不會(huì)再次調(diào)用該API；

　在不刪除小程序的情況下，繼續(xù)再次發(fā)起授權(quán)請(qǐng)求，需要使用wx.openSetting。

所以第一步要拿到用戶的授權(quán)wx.openSetting；

2. 第二步，可通過(guò)wx.getLocation接口，返回經(jīng)緯度、速度等信息;

3. 微信沒(méi)有將經(jīng)緯度直接轉(zhuǎn)換為地理位置，可借助騰訊位置服務(wù)中關(guān)于微信小程序的地理轉(zhuǎn)換JS SDK的API或者百度API (我使用的百度API)

在用戶首次進(jìn)入某頁(yè)面（需要地理位置授權(quán)）時(shí)候，在頁(yè)面進(jìn)行在onShow時(shí)，進(jìn)行調(diào)用wx.getLocation要求用戶進(jìn)行授權(quán)；以后每次進(jìn)入該頁(yè)面時(shí)，通過(guò)wx.getSetting接口，返回用戶授權(quán)具體信息。

代碼如下：

onShow: function () {
    var _this = this;
    //調(diào)用定位方法
    _this.getUserLocation();
  },
//定位方法
getUserLocation: function () {
    var _this = this;
    wx.getSetting({
      success: (res) => {
        // res.authSetting['scope.userLocation'] == undefined    表示 初始化進(jìn)入該頁(yè)面
        // res.authSetting['scope.userLocation'] == false    表示 非初始化進(jìn)入該頁(yè)面,且未授權(quán)
        // res.authSetting['scope.userLocation'] == true    表示 地理位置授權(quán)
        if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {
          //未授權(quán)
          wx.showModal({
            title: '請(qǐng)求授權(quán)當(dāng)前位置',
            content: '需要獲取您的地理位置，請(qǐng)確認(rèn)授權(quán)',
            success: function (res) {
              if (res.cancel) {
                //取消授權(quán)
                wx.showToast({
                  title: '拒絕授權(quán)',
                  icon: 'none',
                  duration: 1000
                })
              } else if (res.confirm) {
                //確定授權(quán)，通過(guò)wx.openSetting發(fā)起授權(quán)請(qǐng)求
                wx.openSetting({
                  success: function (res) {
                    if (res.authSetting["scope.userLocation"] == true) {
                      wx.showToast({
                        title: '授權(quán)成功',
                        icon: 'success',
                        duration: 1000
                      })
                      //再次授權(quán)，調(diào)用wx.getLocation的API
                      _this.geo();
                    } else {
                      wx.showToast({
                        title: '授權(quán)失敗',
                        icon: 'none',
                        duration: 1000
                      })
                    }
                  }
                })
              }
            }
          })
        } else if (res.authSetting['scope.userLocation'] == undefined) {
         //用戶首次進(jìn)入頁(yè)面,調(diào)用wx.getLocation的API
          _this.geo();
        }
        else {
          console.log('授權(quán)成功')
          //調(diào)用wx.getLocation的API
          _this.geo();
        }
      }
    })

  },         

// 獲取定位城市
  geo: function () {
    var _this = this;
    wx.getLocation({
      type: 'wgs84',
      success: function (res) {
        var latitude = res.latitude
        var longitude = res.longitude
        var speed = res.speed
        var accuracy = res.accuracy
        wx.request({
          url: 'http://api.map.baidu.com/geocoder/v2/?ak=xxxxxxxxxxxx&location=' + res.latitude + ',' + res.longitude + '&output=json',
          data: {},
          header: { 'Content-Type': 'application/json' },
          success: function (ops) {
            console.log('定位城市：', ops.data.result.addressComponent.city)
          },
          fail: function (resq) {
            wx.showModal({
              title: '信息提示',
              content: '請(qǐng)求失敗',
              showCancel: false,
              confirmColor: '#f37938'
            });
          },
          complete: function () {
          }
        })
      }
    })
  },

效果圖：首次進(jìn)入頁(yè)面

拒絕授權(quán)后，再次進(jìn)入該頁(yè)面或者點(diǎn)擊頁(yè)面某按鈕（獲取位置）綁定JS

以上兩個(gè)彈出框的結(jié)構(gòu)是一樣的，前者使用的是wx.getLocation接口自帶的樣式，后者使用的wx.showModel接口帶的樣式。

簡(jiǎn)單講一下授權(quán)原理：首次進(jìn)入該頁(yè)面，onshow調(diào)用wx.getLocation要求用戶進(jìn)行授權(quán)；用戶拒絕后，再次進(jìn)入該頁(yè)面，我們通過(guò)wx.getSetting接口，返回用戶授權(quán)的情況。

res.authSetting['scope.userLocation']的值與true比較，為true就是授權(quán)了，false就是拒絕授權(quán)了。

以上是“微信小程序中怎樣獲取當(dāng)前城市位置及再次授權(quán)地理位置的代碼實(shí)現(xiàn)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！