uniapp的微信小程序，获取授权，获取中文街道地理位置

本是古典何须时尚 2023-02-23 05:06 21阅读 0赞

## uniapp的微信小程序，获取授权，获取中文街道地理位置 ##

##### 添加小程序，兑换各种视频教程/数据资源 #####

![img][]![img][img 1]

1.  详细见代码：在需要.vue页面调用如下方法。

onReady(){ 
    	this.isGetLocation();
    },
    methods: { 
    	getAuthorizeInfo(a="scope.userLocation"){   //1. uniapp弹窗弹出获取授权（地理，个人微信信息等授权信息）弹窗
    		var _this=this;
    		uni.authorize({ 
    			scope: a,
    			success() {  //1.1 允许授权
    				_this.getLocationInfo();
    			},
    			fail(){     //1.2 拒绝授权
    				console.log("你拒绝了授权，无法获得周边信息")
    			}
    		})
    	},
    	getLocationInfo(){   //2. 获取地理位置
    		var _this=this;
    		uni.getLocation({ 
    			type: 'wgs84',
    			success (res) { 
    			    console.log("你当前经纬度是：")
    				console.log(res)
    				let latitude,longitude;
    				latitude = res.latitude.toString();
    				longitude = res.longitude.toString();
    				uni.request({ 
    					header:{ 
    						"Content-Type": "application/text"
    					},
    					url:'http://apis.map.qq.com/ws/geocoder/v1/?location='+latitude+','+longitude+'&key=MVGBZ-R2U3U-W5CVY-2PQID-AT4VZ-PDF35',
    					success(re) { 
    						console.log("中文位置")
    						console.log(re)	   
    						if(re.statusCode===200){ 
    							console.log("获取中文街道地理位置成功")
    						}else{ 
    							console.log("获取信息失败，请重试！")
    						}
    					 }
    				});
    			}
    		});
    	},
    	isGetLocation(a="scope.userLocation"){  // 3. 检查当前是否已经授权访问scope属性，参考下截图
    		var _this=this;
    		uni.getSetting({ 
    		    success(res) { 					
    				if (!res.authSetting[a]) {   //3.1 每次进入程序判断当前是否获得授权，如果没有就去获得授权，如果获得授权，就直接获取当前地理位置
    					_this.getAuthorizeInfo()
    				}else{ 
    					_this.getLocationInfo()
    				}
    			}
    		});
    	}
    }

![img][img 2]

1.  微信小程序中，目前版本无法自动直接弹窗用户用户信息scope.userInfo信息，需要按钮点击主动授权引导。

<button open-type="getUserInfo" @getuserinfo="bindGetUserInfo" >授权登录</button>
    
     
    methods:{
         bindGetUserInfo(e) {
            if (e.detail.userInfo){
                  //用户按了允许授权按钮
            } else {
                 //用户按了拒绝按钮
            }
         }
    }

1.  uni-app配置微信小程序的appid： 开发过程中，需要在unpackage>>dist>>dev>>mp-weixin>>app.json中加入如下配置：

"permission": { 
        "scope.userLocation": { 
    			"desc": "你的位置信息将用于小程序位置接口的效果展示"
    	}
    }

或者在manifest.json的源码视图中配置：配置appid和地理位置

"mp-weixin": {  /* 小程序特有相关 */
    		"appid": "", //需要配置appid
    		"setting": { 
    			"urlCheck": false
    		},
    		"usingComponents": true,
    		"permission": { 
    			"scope.userLocation": { 
    				"desc": "你的位置信息将用于小程序位置接口的效果展示"
    			}
    		}
    	}

[img]: https://img-blog.csdnimg.cn/20191016170213521.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjMxMTU2,size_16,color_FFFFFF,t_70
[img 1]: https://img-blog.csdnimg.cn/2019101617003950.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjMxMTU2,size_16,color_FFFFFF,t_70
[img 2]: https://img-blog.csdnimg.cn/20190508082503443.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjMxMTU2,size_16,color_FFFFFF,t_70