微信小程序获取用户位置坐标,调用腾讯地图api,转换成地区
需求:首页获取用户位置坐标,转换成功实际省市区,寄存在缓存中;项目开发使用的是美团的mpvue,谁用谁知道(坑有不少但对于习惯vue开发的,也挺友好!)小程序文档先上为敬腾讯地图注册获取key,配置,可参考例子1 例子2//注册配置完成,下载好微信小程序JavaScriptSDK v1.2,文件位置放好。头部引入,在onLoad 调用获取位置坐标方法,调用腾讯API转换成实际位置imp...
·
需求:首页获取用户位置坐标,转换成功实际省市区,寄存在缓存中;
项目开发使用的是美团的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
更多推荐
已为社区贡献7条内容
所有评论(0)