柚子快報激活碼778899分享：14.微信小程序之地理定位功能
柚子快報激活碼778899分享：14.微信小程序之地理定位功能
目錄
1.地理定位介紹
?1.1 申請開通
1.2?使用方法
2.拒絕授權(quán)后的解決方案 ?
3.開通騰訊位置服務(wù)
4.LBS 逆地址解析
1.地理定位介紹
小程序地理定位是指通過小程序開發(fā)平臺提供的 API，來獲取用戶的地理位置信息。用戶在使用小程序時，可以授權(quán)小程序獲取自己的地理位置信息
wx.getLocation() ：獲取當前的地理位置 wx.chooseLocation()：打開地圖選擇位置 ?
?1.1 申請開通
暫時只對部分類目的小程序開放，需要先通過類目審核，然后在小程序管理后臺，「開發(fā)」-「開發(fā)管理」-「接口設(shè)置」中自助開通該接口權(quán)限。
1.2?使用方法
在 app.json 中配置 requiredPrivateInfos 進行聲明啟用 在調(diào)用 wx.getLocation() 時需要在 app.json 配置 permission字段，同時使用 scope.userLocation 聲明收集用戶選擇的位置信息的目的，wx.chooseLocation() 接口不需要配置該字段，可以直接進行調(diào)用 在配置好以后，調(diào)用 wx.getLocation() 和 wx.chooseLocation() 接口
在 app.json 中進行配置
{
"requiredPrivateInfos": [
"getLocation",
"chooseLocation"
],
"permission": {
"scope.userLocation": {
"desc": "獲取用戶位置信息用于填寫收貨地址"
}
}
}
參考文檔：
地理位置接口新增與相關(guān)流程調(diào)整 permission 字段說明
getLocation 使用?：
// 地理定位
async onLocation() {
// 獲取 緯度 、精度
const { latitude, longitude } = await wx.getLocation()
console.log(location)
}
chooseLocation 使用：
// 地理定位
async onLocation() {
// 打開地圖選擇位置，獲取 緯度 、精度
const { latitude, longitude } = await wx.chooseLocation()
console.log(res)
}
2.拒絕授權(quán)后的解決方案 ?
在調(diào)用 wx.getLocation() 獲取用地理位置時，如果用戶選擇拒絕授權(quán)，代碼會直接拋出錯誤。
在拒絕授權(quán)以后，再次調(diào)用 wx.getLocation() 時，就不會在彈窗詢問用戶是否允許授權(quán)。
接下來，就需要優(yōu)化授權(quán)的流程：
?代碼如下：
方法里面的提示框，比如：wx.modal,wx.toast是自己在原生的基礎(chǔ)上進一步封裝的，自己用的時候可以用原生的即可，以自身項目業(yè)務(wù)為準，以下代碼僅做參考：
// 獲取用戶地理位置信息
async onLocation() {
// 調(diào)用 getSetting 方法獲取用戶所有的授權(quán)信息
// 返回的 authSetting 包含小程序已向小程序申請過的權(quán)限已經(jīng)授權(quán)結(jié)果(true、false)
const { authSetting } = await wx.getSetting()
console.log(authSetting)
// scope.userLocation 是否已經(jīng)授權(quán)獲取地理位置的信息
// 如果之前沒有申請過返回 undefined，需要調(diào)用 getLocation
// 如果之前同意了授權(quán)，返回 true，需要調(diào)用 getLocation
// 如果之前拒絕了授權(quán)，返回 false，需要用戶手動進行授權(quán)
// 等于 true，或者不等于 undefined，說明需要進行授權(quán)
// const isAuth =
// authSetting['scope.userLocation'] ||
// authSetting['scope.userLocation'] === undefined
// 為了避免冗余的條件判斷，使用 !! 把代碼進行優(yōu)化
const isAuth = !!authSetting['scope.userLocation']
if (!isAuth) {
// 彈窗詢問用戶是否進行授權(quán)
const modalRes = await wx.modal({
title: '授權(quán)提示',
content: '需要需要您的地理位置信息，請確認授權(quán)'
})
// 如果用戶點擊了取消，說明用戶拒絕了授權(quán)，給用戶提示
if (!modalRes) return wx.toast({ title: '您拒絕了授權(quán)' })
// 如果用戶點擊了確定，調(diào)用 wx.openSetting 打開微信客戶端小程序授權(quán)頁面
// 并返回授權(quán)以后的結(jié)果
const { authSetting } = await wx.openSetting()
// 如果用戶沒有更新授權(quán)信息，提示沒有更新授權(quán)
if (!authSetting['scope.userLocation'])
return wx.toast({ title: '授權(quán)失??！' })
try {
// 如果用戶更新授權(quán)信息，則調(diào)用 getLocation 獲取用戶地理位置信息
const locationRes = await wx.getLocation()
// 打印地理位置信息
console.log(locationRes)
} catch (err) {
console.log(err)
}
} else {
try {
// 如果是第一次調(diào)用 getLocation 或者之前授權(quán)過
// 直接調(diào)用 getLocation 獲取用戶信息即可
const locationRes = await wx.getLocation()
console.log(locationRes)
} catch (error) {
wx.toast({ title: '您拒絕授權(quán)獲取地址位置' })
}
}
}
3.開通騰訊位置服務(wù)
使用wx.chooseLocation()能夠很方便的讓用戶來選擇地理位置，但是wx.chooseLocation()返回的數(shù)據(jù)并沒有包含省市區(qū)、省市區(qū)編碼數(shù)據(jù)。
?這時候我們可以使用 騰訊位置服務(wù) 將返回的經(jīng)度、緯度進行逆地址解析，轉(zhuǎn)換成詳細地址。
騰訊位置服務(wù)專為小程序開發(fā)提供了 JavaScript SDK，方便開發(fā)者在小程序中可以使用騰訊地圖服務(wù)。
使用騰訊位置服務(wù)可以很方便的讓開發(fā)者實現(xiàn)地址解析、逆地址解析等功能。
使用步驟：
申請開發(fā)者密鑰（key）：申請密鑰 開通 webserviceAPI 服務(wù)：控制臺 → 應(yīng)用管理→我的應(yīng)用 → 添加 key →勾選 WebServiceAPI →保存 下載微信小程序 JavaScriptSDK，微信小程序JavaScriptSDK v1.1 JavaScriptSDK v1.2 安全域名設(shè)置
在小程序管理后臺 -> 開發(fā) -> 開發(fā)管理 -> 開發(fā)設(shè)置 -> “服務(wù)器域名” 中設(shè)置 request 合法域名 添加 https://apis.map.qq.com
詳細步驟：
1.申請密鑰：密鑰申請，微信掃碼進行登錄，選擇綁定已有賬號、或者注冊新賬號 (需要綁定手機、驗證郵箱)
2.?開通webserviceAPI服務(wù)：控制臺 ->應(yīng)用管理 ->?我的應(yīng)用?->添加key-> 勾選WebServiceAPI -> 保存→ 創(chuàng)建完成
?3.下載微信小程序 JavaScriptSDK v1.2，下載將 .js 文件放到小程序的 libs 目錄下 ?
4.安全域名設(shè)置，在小程序管理后臺?-> 開發(fā) -> 開發(fā)管理 -> 開發(fā)設(shè)置 -> “服務(wù)器域名” 中設(shè)置request合法域名，添加https://apis.map.qq.com，或者點擊微信開發(fā)者工具中的暫時不校驗域名
4.LBS 逆地址解析
LBS 逆地址解析是指通過地理坐標查找對應(yīng)位置的詳細地址信息。LBS 是 Location-Based Services 的縮寫，翻譯為中文就是基于地理位置的服務(wù)。
對于 LBS 逆地址解析，通常是輸入地理坐標（經(jīng)度和緯度），系統(tǒng)會返回地理位置的具體地址，如國家、省份、城市、街道、建筑等信息。
比如說，你有一個經(jīng)緯度為（114.21892734521,29.575429778924）的坐標，通過 LBS 逆地址解析，你可以得到這個坐標對應(yīng)的實際地址，可能是 "中國湖北省武漢市XXX區(qū)XXX路XXX號"。
使用步驟：
在項目中引入 SDK 核心類（上面已經(jīng)下載的微信小程序JavaScriptSDK）
// var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
//這個地址看自己項目，一般是在工作目錄的根目錄下建libs文件夾，哪里需要在哪引入即可
import QQMapWX from '../../../../../libs/qqmap-wx-jssdk.min'
在 onLoad 中實例化 API 核心類，同時配置創(chuàng)建的 key
// 引入SDK核心類，js文件根據(jù)自己業(yè)務(wù)，位置可自行放置
import QQMapWX from '../../../../../libs/qqmap-wx-jssdk.min'
Page({
onLoad: function () {
// 實例化API核心類，把實例掛載到this上，方便其他方法中使用
this.qqmapsdk = new QQMapWX({
key: '申請的key'
})
}
// coding...
}
使用實例方法 reverseGeocoder 方法進行逆地址解析，將提供的坐標轉(zhuǎn)換為詳細的地址位置信息?
// LBS 地址逆解析
// 地理定位
async onLocation() {
// 獲取 緯度 、精度
// const { latitude, longitude } = await wx.getLocation()
// console.log(location)
// 獲取經(jīng)、緯度、name用戶搜索的地點名稱
let { latitude, longitude, name } = await wx.chooseLocation()
// 使用 reverseGeocoder 方法進行逆地址解析
this.qqmapsdk.reverseGeocoder({
// 傳入經(jīng)、緯度
location: {
latitude,
longitude
},
// 逆地址解析成功后執(zhí)行
success: (res) => {
// 獲取選擇的
const { street_number } = res.result.address_component
// province 省 city 市 district 區(qū)
const {
province, // 省
city, // 市
district, // 區(qū)
adcode, // 行政區(qū)劃代碼
city_code, // 城市代碼，由國家碼+行政區(qū)劃代碼（提出城市級別）組合而來，總共為9位
nation_code // 國家代碼
} = res.result.ad_info
this.setData({
// 省級: 前兩位有值，后4位置0，如，河北省: 130000
provinceCode: adcode.replace(adcode.substring(2, 6), '0000'),
provinceName: province,
// 市前面多個國家代碼，需要進行截取
cityCode: city_code.slice(nation_code.length),
cityName: city,
// 東莞市、中山市、修州市、嘉關(guān)市 因其下無區(qū)縣級，
districtCode: district && adcode,
districtName: district,
// 詳細地址
address: name,
fullAddress: [province, city, district, address].join('')
})
}
})
}
注意事項：
逆地址解析解析初始用的時候發(fā)現(xiàn)解析不成功，需要配置接口的調(diào)用額度：
官方文檔-基礎(chǔ)示例：Hello World
官方文檔-逆地址解析：reverseGeocoder
柚子快報激活碼778899分享：14.微信小程序之地理定位功能
推薦文章
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點和立場。
轉(zhuǎn)載請注明，如有侵權(quán)，聯(lián)系刪除。
Officeworks跨境辦公
