微信小程序获取用户地理位置(uni-app)

step1: 原生的微信小程序需要在app.json中配置permission字段。uni-app则需要在manifest.json中配置,如下图

微信小程序获取用户地理位置(uni-app)_第1张图片

step2:查看授权以及申请授权获取地理位置

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

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

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

  1.  在腾讯平台申请自己的秘钥(申请地址:腾讯位置服务 - 立足生态,连接未来)
  2. 下载小程序js微信小程序JavaScriptSDK v1.0      引入自己的文件
  3. 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 => {

			})
		},

     

你可能感兴趣的:(微信小程序,微信小程序,小程序)