小程序地圖學習之獲取位置 獲取經緯度 獲取地名 獲取地址

咱們在作小程序開發時，不免會遇到地圖相關的開發，而小程序已經爲咱們提供的比較完善的地圖組件。咱們只須要調用相關的api就能夠實現大體的功能。如：獲取經緯度，獲取位置，獲取地址，獲取地名。結下來就具體給你們講解。

老規矩先看效果圖

接下來咱們就來看看具體實現步驟

一，定義一個按鈕來調用位置獲取的api

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

二，調用獲取地理位置的方法

//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: "經緯度：" + longitude + ", " + latitude,
     address: " 地址：" + res.address,
     name: " 地名：" + res.name
    })
   }
  });
 }
})
複製代碼

其實到這裏咱們就能夠實現獲取經緯度，獲取位置信息的功能了。 可是呢？？如今小程序調用用戶位置信息時，須要用戶受權，以下圖，若是用戶點擊了拒絕，咱們就沒有辦法調用地圖獲取位置信息了。

因此呢，咱們要想實現一個完整的獲取用戶位置信息的功能，就要在監測到用戶拒絕的位置權限時，引導用戶去從新受權。這樣纔是一個友好的健壯的程序。下面就來教你們如何引導用戶去打開受權。

三，在app.json裏註冊位置權限

上圖紅色框裏就是咱們的位置權限的註冊代碼,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"
}
複製代碼

四，定義檢查位置權限是否打開的方法

//校驗位置權限是否打開
 checkLocation() {
  let that = this;
  //選擇位置，須要用戶受權
  wx.getSetting({
   success(res) {
    if (!res.authSetting['scope.userLocation']) {
     wx.authorize({
      scope: 'scope.userLocation',
      success() {
       wx.showToast({ //這裏提示失敗緣由
        title: '受權成功！',
        duration: 1500
       })
      },
      fail() {
       that.showSettingToast('須要受權位置信息');
      }
     })
    }
   }
  })
 },
複製代碼

這個方法就是來檢查用戶的位置權限是否受權，若是沒有受權，就彈窗提示用戶去受權頁受權。彈窗代碼以下：

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

至此就能夠實現一個完整的獲取用戶位置信息的小程序了，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: "經緯度：" + longitude + ", " + latitude,
     address: " 地址：" + res.address,
     name: " 地名：" + res.name
    })
   }
  });
 },
 //校驗位置權限是否打開
 checkLocation() {
  let that = this;
  //選擇位置，須要用戶受權
  wx.getSetting({
   success(res) {
    if (!res.authSetting['scope.userLocation']) {
     wx.authorize({
      scope: 'scope.userLocation',
      success() {
       wx.showToast({ //這裏提示失敗緣由
        title: '受權成功！',
        duration: 1500
       })
      },
      fail() {
       that.showSettingToast('須要受權位置信息');
      }
     })
    }
   }
  })
 },
 // 打開權限設置頁提示框
 showSettingToast: function(e) {
  wx.showModal({
   title: '提示！',
   confirmText: '去設置',
   showCancel: false,
   content: e,
   success: function(res) {
    if (res.confirm) {
     wx.navigateTo({
      url: '../setting/setting',
     })
    }
   }
  })
 },
})
複製代碼

從代碼中能夠看到，咱們在用戶拒絕受權時的提示框，點擊會跳轉到setting頁，setting也是咱們本身的頁面，可是這個頁面特別簡單。就定義一個button。

<!--pages/setting/setting.wxml-->
  <button class="button" 
open-type="openSetting" type='primary'>
打開受權設置頁
</button>
複製代碼

爲何要這麼作呢，由於微信不容許咱們直接打開權限設置頁，必須經過button組件提供的開發能力去到設置頁，這裏的開放能力就是open-type="openSetting" 中的openSetting。咱們點擊按鈕後就到了權限設置頁。

這樣就能夠引導用戶再次受權了。

有任何關於編程的問題均可以加我微信2501902696（備註編程開發）

編程小石頭，碼農一枚，非著名全棧開發人員。分享本身的一些經驗，學習心得，但願後來人少走彎路，少填坑。

完整的源碼能夠加老師微信獲取，也能夠關注下面老師公號，回覆「地圖源碼」 獲取。