APP
我們在做小程序開發時，難免會遇到地圖相關的開發，而小程序已經為我們提供的比較完善的地圖組件。我們只需要調用相關的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。我們點擊按鈕后就到了權限設置頁。
這樣就可以引導用戶再次授權了。
編程小石頭，碼農一枚，非著名全棧開發人員。分享自己的一些經驗，學習心得，希望后來人少走彎路，少填坑。
?
本文摘自 ：https://blog.51cto.com/u
