1. 去腾讯位置服务的控制台创建一个应用
2.添加一个key,并开通WebServiceAPI服务和微信小程序授权AppID
3.下载微信jssdk(这里会用到逆地址解析等等)
下载好后,将它放在这个文件夹中进行使用,没有common文件夹的话可以新建,或者放在其它文件夹也行(不一定跟我一样),看自己习惯,只要到时候导入路径写对。
4.去小程序后台管理开启安全域名
找到服务器域名,将https://apis.map.qq.com域名添加进去,操作如下图:
5.修改配置manifest.json文件
还要切换到源码视图模式,找到 小程序特有相关下,将这段代码添加在permission之后,具体代码和示例如下:
"permission" : {
"scope.userLocation" : {
"desc" : "将获取你的具体位置信息,用于帮助用户浏览所在位置的零活信息"
}
},
"requiredPrivateInfos" : [ "getLocation", "chooseLocation" ]
6.在使用到的页面引入sdk
//引入腾讯地图SDK核心类,
import QQMapWX from '../../common/qqmap-wx-jssdk.js'
不过这里有个坑,这样导入会报错,我查阅了一下,使用require导入也不行,具体是这样操作之后就可以了。
找到刚才你下载的sdk源文件,打开它滑倒最下面,将module.exports = QQMapWX;注释掉,换成export default QQMapWX;就可以
7.使用uni.getLocation获取经纬度信息给QQMapWX实例进行使用,这里我直接上代码了
//获取城市
let that = this
// 实例化腾讯API核心类
let qqmapsdk = new QQMapWX({
key: this.QQMapWXKey
});
//检查本地是否有存储城市信息
if (uni.getStorageSync('city') && uni.getStorageSync('latitude')) {
that.latitude = uni.getStorageSync('latitude')
that.longitude = uni.getStorageSync('longitude')
that.city = uni.getStorageSync('city')
} else {
//如果本地没有存储就通过uni.getLocation获取当前位置的经纬度
uni.getLocation({
type: 'gcj02',
success: function(res) {
uni.setStorageSync('latitude',res.latitude)
uni.setStorageSync('longitude',res.longitude)
// 通过经纬度获取当前城市信息
qqmapsdk.reverseGeocoder({
location: {
latitude: uni.getStorageSync('latitude'),
longitude: uni.getStorageSync('longitude')
},
success: function(res1) {
that.city = res1.result.ad_info.district;
uni.setStorageSync('city',res1.result.ad_info.district)
},
fail:function(res) {
uni.showToast({
title:res.message,
icon:'none'
})
}
})
},
fail: function() {
uni.showToast({
title: "当前位置信息获取失败",
icon: 'none'
})
}
})
}
具体返回的json数据可打印出来看下,因为请求的腾讯api每天的额度有上限,具体额度需要到腾讯位置服务控制台中调配。
9.可能存在位置发生偏移(不准确)的问题
我将获取到的经纬度拿去坐标拾取器里面复原位置是准确的,也就是说经纬度对应逆地址解析的位置是正确的,问题出现在获取到的经纬度不准确。综合来看,就是uni.getLocation的问题。