UNI-APP_微信小程序获取用户地理位置

1. 原生的微信小程序需要在app.json中配置permission字段。uni-app则需要在manifest.json中配置UNI-APP_微信小程序获取用户地理位置_第1张图片

2.查看授权以及申请授权获取地理位置

getUserLocation() {
	uni.getSetting({
		success: (res) => {
			if (!res.authSetting['scope.userLocation']) {
				console.log(res)
				uni.authorize({
					scope: 'scope.userLocation',
					success: () => { //1.1 允许授权
						this.geo();

					},
					fail:()=> { //1.2 拒绝授权
						console.log('拒绝')
						this.postAddress('')
					}
				})
			} else {
				this.geo();
			}
		}
	})
},

3.获取经纬度之后,再借助第三方接口,将获取到的经纬度转为具体的地理位置(可以借助百度的或者腾讯的)。这里用的是腾讯

注:这个第三方接口(https://apis.map.qq.com)需要在小程序平台设置request安全域名

在腾讯平台申请自己的秘钥(申请地址:腾讯位置服务 - 立足生态,连接未来)
下载小程序js 微信小程序JavaScriptSDK v1.0 引入自己的文件
var QQMapWX = require(‘@/common/js/qqmap-wx-jssdk.min.js’);

// 获取定位城市
geo() {
	var QQMapWX = require('@/common/js/qqmap-wx-jssdk.min.js');
	this.qqmapsdk = new QQMapWX({
		key: 'DL6BZ-***************-6XBEQ' //自己的key秘钥  http://lbs.qq.com/console/mykey.html 在这个网址申请
                     
	});
	uni.getLocation({
		type: 'wgs84',
		success: (res) => {
			var latitude = res.latitude
			var longitude = res.longitude
			var speed = res.speed
			var accuracy = res.accuracy
			this.qqmapsdk.reverseGeocoder({
				location: {
					latitude: latitude,
					longitude: longitude
				},
				success: (res) => {
					let loginAddress = res.result.ad_info.name
					this.postAddress(loginAddress)
				},
				fail: (res) => {
					console.log("fail");
					console.log(res);
				},
				complete: (res) => {
					
				}
			});
		}
	})
},
//postAddress请求后台接口
postAddress(loginAddress) {
	let shareUserId = uni.getStorageSync('shareUserId')//分享人id
	let scene = wx.getLaunchOptionsSync().scene//登录场景
	this.$http({
		method: 'POST',
		hideLoading: true,
		url: '/api/****Info',
		data: {
			shareUserId,
			scene,
			loginAddress
		},
	}).then(res => {
		console.log(res)
		if (res.code == 0) {

		}
	}).catch(() => {

	}).finally(res => {

	})
}

你可能感兴趣的:(#,UNI-APP,前端)