微信公众号JS-SDK获取当前经纬度及地址信息

微信公众号开发的项目中，我们经常会遇到关于定位这样的功能，
当然我就遇到了这样的事情，大概翻阅了一下资料，基本思路如下：
首先H5开发本身不具备这样的功能，所以肯定要借助三方接口来实现。
选择性就很多啦！比如：腾讯地图、百度地图、淘宝IP等很多。
其次，我们要考虑的就是前端应用还是后端应用，这里就有明显的区别啦！

**前端应用：**页面在打开以后执行后传给后端；
**后端应用：**在页面打开前后端执行获取后连同页面渲染给前端。

这个就要根据你的应用场景进行选择啦，这里我们主要说一下前端的应用，至于后端应用大家个可以查看我【PHP学习笔记】中的一些文章有所介绍。

既然是前端应用，又是在微信公众号开发的基础上，我当然要先看一下开发文档里面有没有这个功能啦。
开发文档地址：https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Overview.html

一看果然有这样的功能，可以通过微信调用手机的GPS然后返回当前位置，缺点是用户移动端需要开启GPS定位才能获取到哦！但现在几乎所有的移动端软件都需要打开，所以这个不做考虑。

好啦！废话不多说直接上码

//构建参数
var appId = ''		//公众号唯一标识
var timestamp= ''	//签名时间戳
var nonceStr= ''	//签名随机串
var signature= ''	//签名

//配置参数
wx.config({
        debug: false,                   // 调试模式是否开启
        appId:appId ,              		// 必填，公众号的唯一标识
        timestamp:timestamp,     	 	// 必填，生成签名的时间戳
        nonceStr:nonceStr,        		// 必填，生成签名的随机串
        signature:signature,      		// 必填，签名，见附录1
        jsApiList:['getLocation']       // 获取地理位置接口
    });

	//执行方法
    wx.ready(function() {
        wx.getLocation({
            success: function(res) {
            	console.log(res);				//返回的参数
            	var latitude = res.latitude;    //纬度，浮点数，范围为90 ~ -90
                var longitude = res.longitude;  //经度，浮点数，范围为180 ~ -180。
            },
            fail: function(res) {
                alert("获取位置失败");
            }
        });
    });
	
	//config验证失败
    wx.error(function(res) {
        alert("获取凭据失败");
    });

好啦！现在已经获取到了。
我们来看看console出来的参数吧！

{latitude: 00.00000, longitude: 000.00000, errMsg: "getLocation:ok"}
	errMsg: "getLocation:ok"	//接口成功
	latitude: 00.00000			//纬度
	longitude: 000.00000		//经度
__proto__: Object

我们再延伸一下，通过经纬度获取当前用户的位置信息，
这里我使用腾讯地图的API接口获取给大家做实例吧。
废话不说直接上码

$.ajax({
    url: "https://apis.map.qq.com/ws/geocoder/v1/",		//接口地址
    type: "get",										//请求方法
    dataType: 'jsonp',									//返回格式
    data: {
        location: latitude + "," + longitude,			//当前经纬度，记得用逗号隔开
        key: "DFE56-FE566-1235F-KIUY5-E5F64",			//腾讯地图KEY，自己申请一个
        output: "jsonp"	
    },
    success: function (res) {							//请求成功返回参数
        console.log(res);
        let province = res.result.address_component.province;	//省份
        let city = res.result.address_component.city;			//城市
        let district = res.result.address_component.district;	//区域
        let address = res.result.address;						//详细地址
    }
});

上面我们用了一个ajax请求方法，请求腾讯地图接口并获取到参数，内容很丰富，更多参数自己console一下吧！
下面我把代码整合一下，这样大家看起来更清晰一些。

//构建参数
var appId = ''		//公众号唯一标识
var timestamp= ''	//签名时间戳
var nonceStr= ''	//签名随机串
var signature= ''	//签名

//配置参数
wx.config({
        debug: false,                   // 调试模式是否开启
        appId:appId ,              		// 必填，公众号的唯一标识
        timestamp:timestamp,     	 	// 必填，生成签名的时间戳
        nonceStr:nonceStr,        		// 必填，生成签名的随机串
        signature:signature,      		// 必填，签名，见附录1
        jsApiList:['getLocation']       // 获取地理位置接口
    });

	//执行方法
    wx.ready(function() {
        wx.getLocation({
            success: function(res) {
            	console.log(res);				//返回的参数
            	var latitude = res.latitude;    //纬度，浮点数，范围为90 ~ -90
                var longitude = res.longitude;  //经度，浮点数，范围为180 ~ -180。
                $.ajax({
				    url: "https://apis.map.qq.com/ws/geocoder/v1/",		//接口地址
				    type: "get",										//请求方法
				    dataType: 'jsonp',									//返回格式
				    data: {
				        location: latitude + "," + longitude,			//当前经纬度，记得用逗号隔开
				        key: "DFE56-FE566-1235F-KIUY5-E5F64",			//腾讯地图KEY，自己申请一个
				        output: "jsonp"	
				    },
				    success: function (res) {							//请求成功返回参数
				        console.log(res);
				        let province = res.result.address_component.province;	//省份
				        let city = res.result.address_component.city;			//城市
				        let district = res.result.address_component.district;	//区域
				        let address = res.result.address;						//详细地址
				    }
				});
            },
            fail: function(res) {
                alert("获取位置失败");
            }
        });
    });
	
	//config验证失败
    wx.error(function(res) {
        alert("获取凭据失败");
    });

希望对于和我一样的小白自学爱好者能起到帮助。
给人玫瑰手留余香，如果对您有帮助，就点个赞吧~！
有什么不懂的可以在评论里留言。