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()
                }
            }
        });
    }
}


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

<button  open-type="getUserInfo" @getuserinfo="bindGetUserInfo" >授权登录</button>
<!--注意,如果是小程序中则是 <button  open-type="getUserInfo" bindGetUserInfo="bindGetUserInfo" >授权登录</button>-->
 
methods:{
     bindGetUserInfo(e) {
        if (e.detail.userInfo){
              //用户按了允许授权按钮
        } else {
             //用户按了拒绝按钮
        }
     }
}
3. 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": "你的位置信息将用于小程序位置接口的效果展示"
			}
		}
	}


 

原文链接:https://blog.csdn.net/qq_42231156/article/details/89764301

Logo

前往低代码交流专区

更多推荐