微信小程序地理位置权限申请及使用教程_微信小程序配置位置permission

准备工作

需要在微信开发者平台中注册一个小程序账号，微信开发者平台官网如下
微信公众平台

申请流程

登录微信开发者平台后，在左侧选项栏点击开发-开发管理

在开发管理中点击接口设置，在下面就可以进行地理位置权限申请了，其中wx.getFuzzyLocation接口是比较好申请的。

使用教程

编译器:Hbuilder
运行器:微信开发者工具

首先在manifest.json文件中配置小程序的位置信息,

/* 小程序特有相关 */
	    "mp-weixin" : {
	        "appid" : "wxa8e6388009466d0c",
	        "setting" : {
	            "urlCheck" : false
	        },
	        "usingComponents" : true,
	        "permission" : {
	            "scope.userFuzzyLocation":{
	            	"desc":"位置信息效果展示"
	            }
	        },
	        "requiredPrivateInfos" : [ "getFuzzyLocation" ]
	    },

配置manifest.json后还需要配置page.json 

"permission":{
		"scope.userLocation":{
			"desc":"获得用户当前位置"
		},
		"scope.userFuzzyLocation":{
			"desc":"获得用户当前位置"
		}
	},

最后就可以调用接口

<template>
		<view><button @click="getLocation">获取位置</button></view>
</template>
 
<script>
	export default {
		data() {
			return {
				longitude:"",
				latitude:"",
				 scale:8
				}
			},
		
		methods: {
			 
			getLocation() {
				 uni.authorize({
					scope: 'scope.userLocation', 
					success: function (res) {
						uni.getFuzzyLocation({
							success: function(res) {
								this.longitude = res.longitude
								this.latitude = res.latitude
								console.log(res.longitude)
								console.log(res.latitude)
							}	
						});
				    }
						         
				 })																					
			}					 		 		 
	 	}			
	}
	 
</script>
 
<style>
</style>

取到的坐标值转换成具体的方位，这里我们测试用到的是腾讯地图，这里我们需要先做一下小小的准备。

A、首先，你得有一个可以用的微信小程序appid，自行去小程序开发平台复制下，就不用写了哈~~~~

B、腾讯地图的使用key密钥：

 然然然后，下载skd的js文件到你的项目中，并且引入：

 

//腾讯地图接口文件
	var QQMapWX = require('@/utils/qqmap-wx-jssdk.min.js');
	// 实例化API核心key是腾讯地图秘钥
	var qqmapsdk = new QQMapWX({
	    key: 'ISEBZ-W5IWZ-MJNXT-Z62VZ-WNBZT-XCB7D' // 必填
	});

好了，现在已经有了一串你看不懂的密钥，直接复制下，使用逆地址解析的方法，  

 

let qqmapsdk = new QQMapWX({
  key: 'Hxxxxx-xxxxxxxxxxxxxxxxxxxx-xxxxx6'
});
 
在获取经纬度的成功回调里写入：
//逆地址解析
qqmapsdk.reverseGeocoder({
	location:{
		latitude: res.latitude,
		longitude: res.longitude
	},
	success(res){
		console.log("res",res);
	}
})

 完整代码：

<template>
	<view>
		<view><button @click="getLocation">获取位置</button></view>	
	</view>
</template>
 
<script>
	const app = getApp();
	
	//腾讯地图接口文件
	var QQMapWX = require('@/utils/qqmap-wx-jssdk.min.js');
	// 实例化API核心key是腾讯地图秘钥
	var qqmapsdk = new QQMapWX({
	    key: '' // 必填
	});
	
	export default {
		data() {
			return {
				longitude:"",
				latitude:"",
				 scale:8,
				addressurl:'/pages/test/index',
				}
			},
		onShow(){
			this.getLocation();
			
		},
		 methods: {
			 
			getLocation() {	
					
				uni.authorize({//授权
					scope: 'scope.userLocation',
					success(){
						uni.getFuzzyLocation({
							success: function(res) {
								
								 this.longitude = res.longitude
								 this.latitude = res.latitude
								 console.log(res.longitude)
								 console.log(res.latitude)
								 
									 qqmapsdk.reverseGeocoder({//腾讯地图接口
										location:{
											latitude: res.latitude,
											longitude: res.longitude
										},
										success(res){
											console.log("res",res);
										}
									 })
								
							}						
						});
					},
					fail(res){
						console.log(res);
					}
				})
						
				
					
			},
			
		
					
		}
				
	}
	 
</script>
 
<style>
</style>