需求:首頁獲取用戶位置座標,轉換成功實際省市區,寄存在緩存中;
項目開發使用的是美團的mpvue,誰用誰知道(坑有不少但對於習慣vue開發的,也挺友好!)
小程序文檔先上爲敬
騰訊地圖註冊獲取key,配置,可參考例子1 例子2
//註冊配置完成,下載好微信小程序JavaScriptSDK v1.2,文件位置放好。頭部引入,在onLoad 調用獲取位置座標方法,調用騰訊API轉換成實際位置
import QQMapWX from '../../utils/qqmap-wx-jssdk.js' // 引入SDK核心類
這裏有個大坑,我是這樣引入的,然後這邊eslint報錯,
"export ‘default’ (imported as ‘QQMapWX’) was not found in ‘…/…/utils/qqmap-wx-jssdk.js’,然後我修改了一下就可以了,還有其他修改的方法,可以去嘗試一下
//module.exports 與require搭配,所以應該這樣用;但是我習慣用import引入,所以使用的是上面的修改
data(){
QQMapWX: require('../../utils/qqmap-wx-jssdk.js'),
}
onLoad () {
this.user = mpvue.getStorageSync('user');//調用小程序緩存的user
if(!this.user){
//回到登錄頁
}else{
this.initLocation()
this.init();
}
}
// 初始化定位
initLocation () {
let qqmapsdk = new QQMapWX({
key: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxx' // 自己申請的key
})
const that = this
mpvue.getLocation({
type: 'gcj02',
//gcj02,wgs84微信提供了兩種座標類型,但是騰訊地圖的reverseGeocoder方法只允許使用gcj02類型,這也是注意點
success (res) {
qqmapsdk.reverseGeocoder({
location: {
latitude: res.latitude,
longitude: res.longitude
},
success (res) {
that.user.site = res.result.address// 獲取城市
mpvue.setStorage({
key: 'user',
data: that.user,
success (res) {
console.log(mpvue.getStorageSync('user'))
},
fail (msg) {
console.error(msg)
},
complete () {
}
})
},
fail (res) {
console.log(res)
}
})
},
fail () {
mpvue.showModal({
title: '提示',
content: '請開啓定位,重新刷新頁面!',
showCancel: false,
success (res) {
if (res.confirm) {
}
}
})
}
})
},
寫在最後:別忘了去小程序開發者後臺->開發->開發設置->服務器域名->request合法域名,把騰訊地圖域名加入進去:https://apis.map.qq.com