1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 微信小程序获取用户位置坐标 调用腾讯地图api 转换成地区

微信小程序获取用户位置坐标 调用腾讯地图api 转换成地区

时间:2018-08-29 02:25:47

相关推荐

微信小程序获取用户位置坐标 调用腾讯地图api 转换成地区

需求:首页获取用户位置坐标,转换成功实际省市区,寄存在缓存中;

项目开发使用的是美团的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');//调用小程序缓存的userif(!this.user){//回到登录页}else{this.initLocation()this.init();}}

// 初始化定位initLocation () {let qqmapsdk = new QQMapWX({key: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxx' // 自己申请的key})const that = thismpvue.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.

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。