实现微信小程序定位并不难,但是如果第一次接触的话还是很懵,这里就记录一下,方便自己复习或大家借鉴吧!
首先重点有两条:
具体操作:
(腾讯地图方面的操作)
-
注册腾讯地图开放平台:
image.png - 申请开发者密钥（Key）：申请密钥
成功后会返回一串key,这个key后面会用到
-
控制台 -> key管理 -> 设置（使用该功能的key）-> 勾选webserviceAPI -> 保存
申请的key可以在这里查看
小程序的话一定要勾选这两个
(微信平台方面的操作)
- 配置安全域名 微信公众平台
. 微信公众平台登录你的小程序->开发->开发设置->服务器域名->将https://apis.map.qq.com填入request合法域名
image.png - 下载小程序sdk(复制链接打开新标签页即可下载) http://3gimg.qq.com/lightmap/xcx/jssdk/qqmap-wx-jssdk1.2.zip
- 解析压缩文件夹,放入小程序项目文件内,也可以有规划的新建一个文件夹专门存放此类文件,我放在新建的libs内的
- 使用:
//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)
}
})
})
}
})
