微信公众号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("获取凭据失败");
});
希望对于和我一样的小白自学爱好者能起到帮助。
给人玫瑰手留余香，如果对您有帮助，就点个赞吧~！
有什么不懂的可以在评论里留言。