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

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

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": "你的位置信息将用于小程序位置接口的效果展示"
			}
		}
	}

 

uniApp是一个基于Vue.js的跨平台框架,它允许开发者构建一次代码,发布到微信小程序、H5网页、App Store、安卓App等多个平台上。对于微信小程序获取用户当前位置获取详细地址的功能,你可以通过以下步骤实现: 1. **获取用户位置权限**: 首先,在`app.json`文件中设置页面配置,请求“地理位置”权限: ```json { "pages": [...], "permission": { "scope.geolocation": {} } } ``` 然后在需要使用的位置页面的`onLoad`生命周期钩子函数里,发起获取地理位置的请求。 2. **调用微信API**: 使用uni-app提供的wx.getLocation API: ```javascript page({ onLoad: function () { uni.getLocation({ type: 'gcj02', // 默认为wgs84坐标系,如需兼容iOS可选择'gcj02' success: function (res) { let latitude = res.latitude; // 纬度 let longitude = res.longitude; // 经度 getDetailAddress(latitude, longitude); // 调用获取详细地址的函数 }, fail: function (err) { console.error('获取地理位置失败:', err); } }); }, ... }) function getDetailAddress(lat, lon) { uni.api.request({ url: 'https://api.map.baidu.com/geocoding/v3/?address=' + lat + ',' + lon + '&output=json&ak=your_baidu_ak', method: 'GET', data: {}, success: function (res) { let address = res.result.addressComponent; console.log('详细地址:', address.province + ' ' + address.city + ' ' + address.district + ', ' + address.street); }, fail: function (err) { console.error('获取详细地址失败:', err); } }); } ``` `getDetailAddress` 函数会从百度地图API返回详细的地址信息,记得替换`your_baidu_ak`为你的百度地图密钥。
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值