第一步,获取并配置腾讯地图key,流程如图所示
进入开放平台后,先注册登录过后,点击控制台,在应用管理里面创建一个应用
经过以上步骤就获取了key
然后就是包的下载
下载好了过后解压存放到项目根目录下
做完以上步骤就到配置环节,先配置manifest.json文件
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序定位"
}
},
"requiredPrivateInfos": ["getLocation", "chooseLocation", "chooseAddress"]
将以上代码放到这儿
再配置腾讯地图的key
修改qqmap-wx-jssdk.js文件
引入文件
import QQMapWX from '../../tenxun/qqmap-wx-jssdk.js'
然后就完成了。就可以开始编写代码了,
成功了:
附上以上代码
uni.getSetting({
success(res) {
if (res.authSetting['scope.userLocation']) {
console.log(123);
// 请求用户的权限
uni.authorize({
scope: 'scope.userLocation',
success() {
console.log(456);
// 用户已经同意小程序使用定位功能,后续调用 uni.getLocation接口不会弹窗询问
let location = {
longitude: 0,
latitude: 0,
province: '',
city: '',
area: '',
street: '',
address: '',
}
uni.getLocation({
type: 'gcj02',
success: function(res) {
//保存纬度数据
location.latitude = res.latitude;
//保存经度度数据
location.longitude = res.longitude;
console.log('经度' + location.longitude);
console.log('纬度' + location.latitude);
const map = new QQMapWX({
key: 'SO4BZ-4N4KI-NLIG7-UTKAM-QUZF6-TQBC4',
})
map.reverseGeocoder({
location,
success(res) {
let info = res.result;
console.log('info', info);
location.province = info.address_component.province;
location.city = info.address_component.city
location.area = info.address_component.district
location.street = info.address_component.street
location.address = info.address
console.log(location);
area.value = location
},
fail: function(res) {
console.log(res);
}
});
},
fail: function(res) {
console.log(res);
}
});
},
})
}
}
})
*注:写完代码后在电脑端的位置有偏差很正常,要运行到真机上,并且关闭wifi,使用流量,就能获得准确的位置
希望可以帮助大家