获取地理位置需求,应该说是一个不太常用,但是非常常见的一个功能。
所以今天以小程序为例,一起学习一下,看看都有哪些方面需要注意。
授权地理位置
配置manifest.json
在微信小程序配置中,必须勾选位置接口,并且写明描述
manifest.json视图
manifest.json源码
"mp-weixin" : {
"appid" : "wx***xxxxx*****",
"setting" : {
"urlCheck" : false,
"postcss" : true,
"es6" : true,
"minified" : true
},
"usingComponents" : true,
"permission" : {
"scope.userLocation" : {
"desc" : "你的位置信息将用xxxxxxxxxxxx"
}
}
},
授权请求authorize
authorize的作用,便是提前向用户发起授权请求。返回之前的授权结果:成功或者失败。一般搭配uni.getSetting和uni.openSetting使用。
关于openSetting具体可以戳这里~
关于authorize具体可以戳这里~
获取经纬度 getLocation
uni.authorize({
scope: "scope.userLocation",
success: () => {
uni.showLoading({
title: '定位中...' ,
mask:true
})
uni.getLocation({
type: "gcj02", // wgs84: 返回GPS坐标,gcj02: 返回国测局坐标
success: res => {
console.log(res,'经纬度')
}
});
},
fail: () => {
//console.log('请授权获取你的位置,否则部分功能将无法使用!')
uni.showModal({
//弹出提示框
title: '是否打开设置页?',
content: '请授权获取你的位置,否则部分功能将无法使用!',
success(res) {
if (res.confirm) {
// 用户点击确定按钮
uni.openSetting({
// 确认后打开设置页面
success(res) {
// if(res.authSetting['scope.userLocation']){
// console.log("手动授权成功")
// }else{
// console.log("手动授权失败")
// }
},
fail(){
console.log("打开设置页面失败")
}
})
} else if (res.cancel) {
// 用户点击取消按钮
console.log('用户点击取消');
}
},
fail(){
console.log("确认取消弹出未弹出")
}
})
},
});
到这里咱们就可以得到地理位置的经纬度,但是如果想获得详细的地理位置,还需要逆向解析一下
引入地图,逆向解析
这里咱们以小程序为例,所以引入腾讯地图。
注册账号(免费)
首先需要注册腾讯地图账号,获得key
创建新秘钥
开发者秘钥申请
key 设置
申请成功后,还需要详细配置一下,点击key列表设置按钮后,这里有4处重点,如图:
1、微信APP ID
2、勾选WebServiceAPI
3、选中 域名白名单,可以不在里面填写域名,不然校验失败一直提示无权限。
4、安全域名设置,在小程序管理后台 -> 开发 -> 开发管理 -> 开发设置 -> “服务器域名” 中设置request合法域名,添加https://apis.map.qq.com (这里很重要)
下载小程序SDK
拿到秘钥后,便需要引入腾讯地图SDK,下载地址戳这里~
JavaScriptSDK v1.1
JavaScriptSDK v1.2
引入SDK,最终代码
addressDetailFn (){
const qqmapsdk = new QQMapWX({ key: "Mxxx-xxx-xxxx--地图秘钥" });
//提前获得授权结果
uni.authorize({
scope: "scope.userLocation",
//已同意授权
success: () => {
//开启loading,防止多次触发
uni.showLoading({
title: '定位中...' ,
mask:true
})
//获得经纬度
uni.getLocation({
type: "gcj02", // wgs84: 返回GPS坐标,gcj02: 返回国测局坐标
success: res => {
const {latitude, longitude} = res;
const location = {latitude, longitude};
// 传入经纬度,逆向解析
qqmapsdk.reverseGeocoder({
location,
success: (res) =>{
//关闭loading
uni.hideLoading();
//最终地址
let ad_info = res.result.ad_info || {};
let address = ad_info.province+'-'+ad_info.city+'-'+ad_info.district;
let detailAddress = res.result.formatted_addresses.recommend
console.log(address,'省市县')
console.log(detailAddress,'详细的地址')
},
fail :(e)=>{
uni.hideLoading();
}
});
},
fail :(e)=>{
//这里也很重要,有可能用户关闭了GPS,虽然可以定位,但是没有位置信息
uni.hideLoading();
uni.showModal({
content:'位置定位失败,请检查您的GPS是否开启',
showCancel:false,
confirmText:'知道了'
})
console.log(e,'获取经纬度')
}
});
},
// 拒绝了授权
fail: () => {
uni.showModal({
//弹出提示框
title: '是否打开设置页?',
content: '请授权获取你的位置,否则部分功能将无法使用!',
success(res) {
if (res.confirm) {
// 用户点击确定按钮
uni.openSetting({
// 确认后打开设置页面
success(res) {
// if(res.authSetting['scope.userLocation']){
// console.log("手动授权成功")
// }else{
// console.log("手动授权失败")
// }
},
fail(){
console.log("打开设置页面失败")
}
})
} else if (res.cancel) {
// 用户点击取消按钮
console.log('用户点击取消');
}
},
fail(){
console.log("确认取消弹出未弹出")
}
})
},
});
}
这样便能拿到详细的地理位置了,大家可能对于我拼接的最终具体地址有疑惑,这里可以根据需求自行拼接,具体参数值,戳这里~