1、打开腾讯地图:map.qq.com/
2、选择地图API
然后获得到一个KEY字符串,查询地址时用到
3、然后获得到一个KEY字符串,查询地址时用到
代码
打开地图选择位置
chooseLocation() {
// 实例化API核心类
var qqmapsdk = new QQMapWX({
key: this.key // 必填 开发密钥 上面获取到的KEY
});
qqmapsdk.reverseGeocoder({
//位置坐标,默认获取当前位置,非必须参数
location: '', //获取表单传入的位置坐标,不填默认当前位置,示例为string格式
success: (res) => {
console.log('返回的值', res)
res = res.result
uni.chooseLocation({
latitude: res.location.lat / 1,
longitude: res.location.lng / 1,
keyword: res.formatted_addresses.recommend,
success: (result) => {
if (result.errMsg !== "chooseLocation:ok")
return uni.showToast({
title: '打开地图失败,请重试',
icon:'error'
});
// 获取到了地图地址
console.log('选择地图', result)
},
fail: (err) => {
console.log('错误', err)
}
})
}
})
},
查看地址导航
// 获取经纬度
getLocation() {
// 实例化API核心类
var qqmapsdk = new QQMapWX({
key: this.key // 必填 开发密钥
});
qqmapsdk.geocoder({
address: 地址,
type: 'gcj02',
success: res => {
if (res.message !== 'query ok') {
return uni.showModal({
content: '获取地址信息失败',
showCancel: false
});
}
uni.openLocation({
latitude: res.result.location.lat / 1,
longitude: res.result.location.lng / 1,
name: '', // 地址名称
address: '', // 地址
})
},
fail: (err) => {
uni.showModal({
content: '获取地址信息失败',
showCancel: false
});
},
complete: () => {
uni.hideLoading()
}
})
},
小程序调用地理位置api需要在manifest.json里面配置
"permission" : {
"scope.userLocation" : {
"desc" : "你的位置信息将用于小程序位置接口的效果展示"
}
},
"requiredPrivateInfos" : [ "getLocation", "chooseLocation", 'openLocation' ],
"lazyCodeLoading" : "requiredComponents",