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

需求:首页获取用户位置坐标,转换成功实际省市区,寄存在缓存中;
项目开发使用的是美团的mpvue,谁用谁知道(坑有不少但对于习惯vue开发的,也挺友好!)
小程序文档先上为敬

腾讯地图注册获取key,配置,可参考例子1 例子2

//注册配置完成,下载好微信小程序JavaScriptSDK v1.2,文件位置放好。头部引入,在onLoad 调用获取位置坐标方法,调用腾讯API转换成实际位置

微信小程序获取用户位置坐标,调用腾讯地图api,转换成地区_第1张图片

import QQMapWX from '../../utils/qqmap-wx-jssdk.js' // 引入SDK核心类

这里有个大坑,我是这样引入的,然后这边eslint报错,
"export ‘default’ (imported as ‘QQMapWX’) was not found in ‘…/…/utils/qqmap-wx-jssdk.js’,然后我修改了一下就可以了,还有其他修改的方法,可以去尝试一下

微信小程序获取用户位置坐标,调用腾讯地图api,转换成地区_第2张图片

//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

你可能感兴趣的:(小程序,学习笔记,日常心得注意点)