微信小程序获取经纬度坐标及地址，wgs84转腾讯坐标逆解析

前提：

        微信小程序获取经纬度坐标及地址，需要到微信公众平台获取两个地址接口，wx.getFuzzyLocation 接口权限或 wx.getLocation接口权限。

 1. 登录小程序后台 微信公众平台     开发=>开发管理=>接口设置 

 🍓微信原生开发需配置

 app.json中配置下
{

    "permission": {
        "scope.userLocation": {
          "desc": "授权定位有助于提高蓝牙水表的连接成功率"
        }
    },
    "requiredPrivateInfos": [
        "getLocation"
    ]
}

 🍓uniapp开发需配置

 uniapp开发的在在manifest.json文件中配置小程序的位置信息

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

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

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

注册腾讯地图，获取key 

https://lbs.qq.com/dev/console/key/manage

 

 

  下载SDK，并引入到项目中

 

🍓wgs84转腾讯坐标逆解析

 

  如果只需要获取经纬度，看到这里就行了

 wx.getLocation接口 

getLocation(){
	uni.getLocation({
		type: 'wgs84',
		success: res => {
			console.log('当前位置的经度：' + res.longitude);
			console.log('当前位置的纬度：' + res.latitude);
			this.longitude = res.longitude
			this.latitude = res.latitude
		},
	})			    
},

wx.getFuzzyLocation接口

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

🍓获取经纬度及地址

<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,
				    address:'',
				}
			},
		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);
                                            this.address = res.data.data.result.address           
										}
									 })
								
							}						
						});
					},
					fail(res){
						console.log(res);
					}
				})
						
				
					
			},
			
		
					
		}
				
	}
	 
</script>
 
<style>
</style>

🍓镇楼图 

 

🍓结束语🏆

结束，分享给各位，即拿即用，啊，舒服~

有帮到的话记得点赞收藏哈~~