微信小程序 -- 授权地理位置

获取地理位置需求，应该说是一个不太常用，但是非常常见的一个功能。

所以今天以小程序为例，一起学习一下，看看都有哪些方面需要注意。

配置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("确认取消弹出未弹出")
				}
			})
		},
	});
	
}

这样便能拿到详细的地理位置了，大家可能对于我拼接的最终具体地址有疑惑，这里可以根据需求自行拼接，具体参数值，戳这里~