微信公众号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,           // 必填，签名，见附录1jsApiList:['getLocation']       // 获取地理位置接口});//执行方法wx.ready(function() {wx.getLocation({success: function(res) {console.log(res);             //返回的参数var latitude = res.latitude;    //纬度，浮点数，范围为90 ~ -90var 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,           // 必填，签名，见附录1jsApiList:['getLocation']       // 获取地理位置接口});//执行方法wx.ready(function() {wx.getLocation({success: function(res) {console.log(res);             //返回的参数var latitude = res.latitude;    //纬度，浮点数，范围为90 ~ -90var 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("获取凭据失败");});

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

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

微信公众号H5页面获取用户昵称头像等信息（Java）
H5页面获取微信用户信息操作流程 (一)获取微信权限,由微信用户确认 (二)获取相应的ACCESS_TOKEN和OPENID信息 (三)根据ACCESS_TOKEN和OPENID信息获取相应的用户信息 ...
微信公众号，JS-SDK获取位置信息，并调起第三方地图App导航
微信公众号关联网页获取位置信息,可以参照<微信公众平台技术文档>-> 微信JS-SDK说明文档,官方链接地址:https://mp.weixin.qq.com/wiki?t=reso ...
微信公众号开发 - token获取（保证同一时间段内只请求一次）
微信公众号开发文章目录 1.微信公众号开发 - 环境搭建 2.微信公众号开发 - 配置表设计以及接入公众号接口开发 3.微信公众号开发 - token获取(保证同一时间段内只请求一次) 4.微信公众号 ...
Spring boot 项目（十三）——实现微信公众号授权登录获取用户信息
引言微信公众号开发中,必不可少的一环:公众号授权登录.获取微信用户信息前期准备内网渗透=>生成本地指定端口映射的外网域名链接:内网渗透工具natapp使用详解域名生成之后修改yml文件 ...
php 微信支付闪了一下,php,_微信公众号JS API支付，安卓没有效果（会闪一下就消失了），php - phpStudy...
微信公众号JS API支付,安卓没有效果(会闪一下就消失了) 代码如下,ios可以支付,但是到安卓手机上就会出现微信支付读条(那三个点),然后就消失了,没有跳出输入密码支付的界面.... //调用微信 ...
微信公众号中 JavaScript 获取用户周边的标志性建筑列表
微信公众号中 JavaScript 获取用户周边的标志性建筑列表太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致& ...
php微信授权没有code返回,解决关于微信公众号网页授权获取code参数的问题
解决关于微信公众号网页授权获取code参数的问题发布时间:2018-07-24 23:21, 浏览次数:3327 , 标签: code * 在微信网页授权过程中,需要获取code参数,因为我用的是公 ...
微信公众号：h5获取code，授权等问题
前端引入微信的sdk,按着文档获取code,最后获取openID.AppID.答题思路是这样,但是有时候需求不是这么搞的,尤其是获取code,微信URL会重定向,体验非常不好. 如果页面中,有不同的地 ...
【微信公众号开发】获取并保存access_token、jsapi_ticket票据（可用于微信分享、语音识别等等）...
步骤一:首先得开通公众号(目的是获得appid.AppSecret.设置安全域名)~ [公众号设置]→[功能设置] 设置相应的域名步骤二:编写帮助类WeixinLuyinHelper中的代码 #r ...
微信公众号开发之获取用户地理位置
使用微信的用户地理位置接口就要配置这里. 前端代码: function configWx() {var thisPageUrl = location.href.split('#')[0];$.ajax ...

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

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

最新文章

热门文章