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

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

//注册配置完成，下载好微信小程序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

来源：CSDN

作者：where_slr

链接：https://blog.csdn.net/where_slr/article/details/104649057

标签

微信开发

小程序