實現(xiàn)微信小程序定位并不難,但是如果第一次接觸的話還是很懵,這里就記錄一下,方便自己復習或大家借鑒吧!
首先重點有兩條:
- 通過微信小程序api: wx.getLocation(Object object)獲取當前所在的經(jīng)緯度; 小程序api詳情
- 通過騰訊地圖開放平臺逆地址解析獲取的經(jīng)緯度,獲取真實地標名稱;騰訊地圖平臺
具體操作:
(騰訊地圖方面的操作)
-
注冊騰訊地圖開放平臺:
image.png - 申請開發(fā)者密鑰（Key）：申請密鑰
成功后會返回一串key,這個key后面會用到
-
控制臺 -> key管理 -> 設置（使用該功能的key）-> 勾選webserviceAPI -> 保存
申請的key可以在這里查看
小程序的話一定要勾選這兩個
(微信平臺方面的操作)
- 配置安全域名 微信公眾平臺
. 微信公眾平臺登錄你的小程序->開發(fā)->開發(fā)設置->服務器域名->將https://apis.map.qq.com填入request合法域名
image.png - 下載小程序sdk(復制鏈接打開新標簽頁即可下載) http://3gimg.qq.com/lightmap/xcx/jssdk/qqmap-wx-jssdk1.2.zip
- 解析壓縮文件夾,放入小程序項目文件內,也可以有規(guī)劃的新建一個文件夾專門存放此類文件,我放在新建的libs內的
- 使用:
//app.json文件
//這是因為開發(fā)者需要填寫獲取用戶地理位置的用途說明鸟缕。不配置的話會提示需要申明
{
"permission": {
"scope.userLocation": {
"desc": "你的位置信息將用于小程序位置接口的效果展示"
}
}
}
//在需要使用的頁面引入:
let QQMapWX = require('./libs/qqmap-wx-jssdk')
let qqmapsdk;
getLocation() {
qqmapsdk = new QQMapWX({
key: 'CBAJ-DUD-EURJ-JFFJD' //之前在騰訊平臺申請到的key
})
wx.getLocation({ //獲取定位地址經(jīng)緯度
type: 'wgs84',
success(res) {
const latitude = res.latitude
const longitude = res.longitude
const speed = res.speed
const accuracy = res.accuracy
qqmapsdk.reverseGeocoder({ //SDK調用
location: {
latitude,
longitude
},
success: (res) => {
//success方法指向閉包，所以this屬于閉包,所以在success回調函數(shù)里是不能直接使用this.setData()的
//可以通過外面將this賦值給其它變量,也可通過promise二次封裝,避免回調地獄
console.log(res)
}
})
}
})
}
我的完整實現(xiàn):
let QQMapWX = require('./libs/qqmap-wx-jssdk')
let qqmapsdk;
Page({
data: {
location: '定位我...', //顯示定位的數(shù)據(jù)
},
async onShow(options) { //實現(xiàn)頁面顯示有授權則獲取地標,沒授權,只能通過用戶點擊獲取按鈕來獲取
let res = await wxAuthorize()
if (res) {
this.getLocation()
} else {
this.setData({
location: '定位我...'
})
}
},
async getLocation() {
qqmapsdk = new QQMapWX({
key: 'CBAJ-DUD-EURJ-JFFJD'
})
const res = await new Promise((resolve) => {
wx.getLocation({ //獲取地址經(jīng)緯度
type: 'wgs84',
success(res) {
resolve(res);
}
})
})
const latitude = res.latitude
const longitude = res.longitude
const res2 = await new Promise(resolve => {
qqmapsdk.reverseGeocoder({ //SDK調用這里只需要具體到城市,所以這兩個就夠,具體可根據(jù)業(yè)務需求獲取
location: {
latitude,
longitude
},
success: (res) => {
resolve(res)
}
})
})
this.setData({
location: res2.result.ad_info.city
})
},
async getData() {
const isAuth = await wxAuthorize();
if (isAuth) {
this.getLocation()
} else {
wx.showModal({
title: '請授權當前位置',
content: '需要獲取您的地理位置,請授權!!!',
showCancel: true,
confirmText: '去授權',
success: function (res) {
if (res.confirm) {
wx.openSetting({
success(res) {
console.log(res.authSetting, res, "答應授權")
this.getLocation()
}
})
}
}
});
}
},
//工具函數(shù),封裝的Promise,判斷是否授權,可以避免回調地獄
async function wxAuthorize(scope = 'scope.userLocation') {
return new Promise(resolve => {
wx.authorize({
scope,//發(fā)起定位授權
success: ()=> {
console.log('有定位授權')
//授權成功排抬，此處調用獲取定位函數(shù)
resolve(true)
},
fail(){
console.log("沒有同意授權定位")
resolve(false)
}
})
})
}
})
