小程序地圖學(xué)習(xí)之獲取位置 獲取經(jīng)緯度 獲取地名 獲取地址
2021-08-08 15:46:05

我們在做小程序開發(fā)時，難免會遇到地圖相關(guān)的開發(fā)，而小程序已經(jīng)為我們提供的比較完善的地圖組件。我們只需要調(diào)用相關(guān)的api就可以實現(xiàn)大致的功能。如：獲取經(jīng)緯度，獲取位置，獲取地址，獲取地名。結(jié)下來就具體給大家講解。

老規(guī)矩先看效果圖

接下來我們就來看看具體實現(xiàn)步驟

一，定義一個按鈕來調(diào)用位置獲取的api

<!--index.wxml-->
<button bindtap='getLocation'>獲取位置信息</button>
<text>{{jingwei}}</text>
<text>{{address}}</text>
<text>{{name}}</text>

二，調(diào)用獲取地理位置的方法

//index.js

Page({
 getLocation() {
  let that = this;
  wx.chooseLocation({
   success: function(res) {
    console.log(res)
    var latitude = res.latitude
    var longitude = res.longitude;
    that.setData({
     jingwei: "經(jīng)緯度：" + longitude + ", " + latitude,
     address: "  地址：" + res.address,
     name: "  地名：" + res.name
    })
   }
  });
 }
})

其實到這里我們就可以實現(xiàn)獲取經(jīng)緯度，獲取位置信息的功能了。
但是呢？？現(xiàn)在小程序調(diào)用用戶位置信息時，需要用戶授權(quán)，如下圖，如果用戶點擊了拒絕，我們就沒有辦法調(diào)用地圖獲取位置信息了。

所以呢，我們要想實現(xiàn)一個完整的獲取用戶位置信息的功能，就要在監(jiān)測到用戶拒絕的位置權(quán)限時，引導(dǎo)用戶去重新授權(quán)。這樣才是一個友好的健壯的程序。下面就來教大家如何引導(dǎo)用戶去打開授權(quán)。

三，在app.json里注冊位置權(quán)限

上圖紅色框里就是我們的位置權(quán)限的注冊代碼,app.json的完整代碼如下。

{
 "pages": [
  "pages/index/index",
  "pages/setting/setting"
 ],
 "window": {
  "backgroundTextStyle": "light",
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTitleText": "WeChat",
  "navigationBarTextStyle": "black"
 },
 "permission": {
  "scope.userLocation": {
   "desc": "你的位置信息將用于小程序位置接口的效果展示"
  }
 },
 "sitemapLocation": "sitemap.json"
}

四，定義檢查位置權(quán)限是否打開的方法

 //校驗位置權(quán)限是否打開
 checkLocation() {
  let that = this;
  //選擇位置，需要用戶授權(quán)
  wx.getSetting({
   success(res) {
    if (!res.authSetting['scope.userLocation']) {
     wx.authorize({
      scope: 'scope.userLocation',
      success() {
       wx.showToast({ //這里提示失敗原因
        title: '授權(quán)成功！',
        duration: 1500
       })
      },
      fail() {
       that.showSettingToast('需要授權(quán)位置信息');
      }
     })
    }
   }
  })
 },

這個方法就是來檢查用戶的位置權(quán)限是否授權(quán)，如果沒有授權(quán)，就彈窗提示用戶去授權(quán)頁授權(quán)。彈窗代碼如下：

 // 打開權(quán)限設(shè)置頁提示框
 showSettingToast: function(e) {
  wx.showModal({
   title: '提示！',
   confirmText: '去設(shè)置',
   showCancel: false,
   content: e,
   success: function(res) {
    if (res.confirm) {
     wx.navigateTo({
      url: '../setting/setting',
     })
    }
   }
  })
 },

至此就可以實現(xiàn)一個完整的獲取用戶位置信息的小程序了，index.js完整代碼如下

//index.js

Page({
 getLocation() {
  this.checkLocation();
  let that = this;
  wx.chooseLocation({
   success: function(res) {
    console.log(res)
    var latitude = res.latitude
    var longitude = res.longitude;
    that.setData({
     jingwei: "經(jīng)緯度：" + longitude + ", " + latitude,
     address: "  地址：" + res.address,
     name: "  地名：" + res.name
    })
   }
  });
 },
 //校驗位置權(quán)限是否打開
 checkLocation() {
  let that = this;
  //選擇位置，需要用戶授權(quán)
  wx.getSetting({
   success(res) {
    if (!res.authSetting['scope.userLocation']) {
     wx.authorize({
      scope: 'scope.userLocation',
      success() {
       wx.showToast({ //這里提示失敗原因
        title: '授權(quán)成功！',
        duration: 1500
       })
      },
      fail() {
       that.showSettingToast('需要授權(quán)位置信息');
      }
     })
    }
   }
  })
 },
 // 打開權(quán)限設(shè)置頁提示框
 showSettingToast: function(e) {
  wx.showModal({
   title: '提示！',
   confirmText: '去設(shè)置',
   showCancel: false,
   content: e,
   success: function(res) {
    if (res.confirm) {
     wx.navigateTo({
      url: '../setting/setting',
     })
    }
   }
  })
 },
})

從代碼中可以看到，我們在用戶拒絕授權(quán)時的提示框，點擊會跳轉(zhuǎn)到setting頁，setting也是我們自己的頁面，但是這個頁面特別簡單。就定義一個button。

<!--pages/setting/setting.wxml-->
  <button class="button" 
open-type="openSetting" type='primary'>
打開授權(quán)設(shè)置頁
</button>

為什么要這么做呢，因為微信不允許我們直接打開權(quán)限設(shè)置頁，必須通過button組件提供的開發(fā)能力去到設(shè)置頁，這里的開放能力就是open-type=“openSetting” 中的openSetting。我們點擊按鈕后就到了權(quán)限設(shè)置頁。

這樣就可以引導(dǎo)用戶再次授權(quán)了。

編程小石頭，碼農(nóng)一枚，非著名全棧開發(fā)人員。分享自己的一些經(jīng)驗，學(xué)習(xí)心得，希望后來人少走彎路，少填坑。