微信小程序(定位)

实现微信小程序定位并不难,但是如果第一次接触的话还是很懵,这里就记录一下,方便自己复习或大家借鉴吧!

首先重点有两条:

1. 通过微信小程序api: wx.getLocation(Object object)获取当前所在的经纬度; 小程序api详情
2. 通过腾讯地图开放平台逆地址解析获取的经纬度,获取真实地标名称;腾讯地图平台

具体操作:
(腾讯地图方面的操作)

1. 注册腾讯地图开放平台:

   
   
   image.png
2. 申请开发者密钥（Key）：申请密钥
   成功后会返回一串key,这个key后面会用到
   

3. 控制台 -> key管理 -> 设置（使用该功能的key）-> 勾选webserviceAPI -> 保存

   
   
   申请的key可以在这里查看
   
   
   小程序的话一定要勾选这两个
   
   

   (微信平台方面的操作)

4. 配置安全域名 微信公众平台
   . 微信公众平台登录你的小程序->开发->开发设置->服务器域名->将https://apis.map.qq.com填入request合法域名
   
   image.png
5. 下载小程序sdk(复制链接打开新标签页即可下载) http://3gimg.qq.com/lightmap/xcx/jssdk/qqmap-wx-jssdk1.2.zip
6. 解析压缩文件夹,放入小程序项目文件内,也可以有规划的新建一个文件夹专门存放此类文件,我放在新建的libs内的
7. 使用:

//app.json文件
//这是因为开发者需要填写获取用户地理位置的用途说明。不配置的话会提示需要申明
 {
 "permission": {
    "scope.userLocation": {
        "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
}
}

//在需要使用的页面引入:
let QQMapWX = require('./libs/qqmap-wx-jssdk')
let qqmapsdk;

  getLocation() {
        qqmapsdk = new QQMapWX({
            key: 'CBAJ-DUD-EURJ-JFFJD' //之前在腾讯平台申请到的key
        })

        wx.getLocation({ //获取定位地址经纬度
            type: 'wgs84',
            success(res) {
                const latitude = res.latitude
                const longitude = res.longitude
                const speed = res.speed
                const accuracy = res.accuracy

                qqmapsdk.reverseGeocoder({ //SDK调用
                    location: {
                        latitude,
                        longitude
                    },
                    success: (res) => {
          //success方法指向闭包，所以this属于闭包,所以在success回调函数里是不能直接使用this.setData()的  
         //可以通过外面将this赋值给其它变量,也可通过promise二次封装,避免回调地狱
                        console.log(res)
                    }
                })
            }
        })
    }

我的完整实现:

let QQMapWX = require('./libs/qqmap-wx-jssdk')
let qqmapsdk;

Page({
    data: {
        location: '定位我...', //显示定位的数据
    },
    async onShow(options) { //实现页面显示有授权则获取地标,没授权,只能通过用户点击获取按钮来获取
        let res = await wxAuthorize()
        if (res) {
            this.getLocation()
        } else {
            this.setData({
                location: '定位我...' 
            })
        }
    },
    
    async getLocation() {
        qqmapsdk = new QQMapWX({
            key: 'CBAJ-DUD-EURJ-JFFJD'
        })
        const res = await new Promise((resolve) => {
            wx.getLocation({ //获取地址经纬度
                type: 'wgs84',
                success(res) {
                    resolve(res);
                }
            })
        })
        const latitude = res.latitude
        const longitude = res.longitude

        const res2 = await new Promise(resolve => {
            qqmapsdk.reverseGeocoder({ //SDK调用这里只需要具体到城市,所以这两个就够,具体可根据业务需求获取
                location: {
                    latitude,
                    longitude
                },
                success: (res) => {
                    resolve(res) 
                }
            })
        })
        this.setData({
            location: res2.result.ad_info.city 
        })
    },

    async getData() {
        const isAuth = await wxAuthorize();
        if (isAuth) {
            this.getLocation()
        } else {
            wx.showModal({
                title: '请授权当前位置',
                content: '需要获取您的地理位置,请授权!!!',
                showCancel: true,
                confirmText: '去授权',
                success: function (res) {
                    if (res.confirm) {
                        wx.openSetting({
                            success(res) {
                                console.log(res.authSetting, res, "答应授权")
                                this.getLocation()
                            }
                        })
                    }
                }
            });
        }
    },

//工具函数,封装的Promise,判断是否授权,可以避免回调地狱
async function wxAuthorize(scope = 'scope.userLocation') {
  return new Promise(resolve => {
    wx.authorize({
      scope,//发起定位授权
      success: ()=> {
        console.log('有定位授权')
        //授权成功，此处调用获取定位函数
        resolve(true)
        },
      fail(){
        console.log("没有同意授权定位")
        resolve(false)
      }
    })
  })
}

})