1.绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

备注:登录后可在“开发者中心”查看对应的接口权限。

2.引入js文件

  1. <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
  2. <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
  3.  
  4. <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=DD279b2a90afdf0ae7a3796787a0742e"></script>//地图文件

3.获取微信需要字段

  1.  

var appId, //公众号名称,由商户传入
    timeStamp, //时间戳,自1970年以来的秒数
    nonceStr, //随机串
    signature; //微信签名方式

  1. $.ajax({
  2. type : 'post',
  3. url : '../',
  4. dataType:'json',
  5. success : function(data){
  6.  
  7. //alert(JSON.stringify(data));
  8. appId= data.appId; // 必填,公众号的唯一标识
  9. timeStamp= data.timeStamp; // 必填,生成签名的时间戳
  10. nonceStr= data.nonceStr; // 必填,生成签名的随机串
  11. signature= data.signature;
  12.  
  13. getLocation();//获取地理位置
  14.  
  15. },
  16. beforeSend:function(){
  17.  
  18. },
  19. error:function(){
  20.  
  21. alert('error');
  22. }
  23. });

4.调微信获取地理位置接口(返回经、纬度值)

  1. function getLocation(){
  2.  
  3. /* 微信分享朋友圈 */
  4. wx.config({
  5. debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
  6. appId: appId, // 必填,公众号的唯一标识
  7. timestamp: timeStamp, // 必填,生成签名的时间戳
  8. nonceStr: nonceStr, // 必填,生成签名的随机串
  9. signature: signature,// 必填,签名,见附录1
  10. jsApiList: ["getLocation"] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
  11. });
  12.  
  13. wx.ready(function(){
  14. //获取地理位置
  15. wx.getLocation({
  16. type: 'wgs84', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
  17. success: function (res) {
  18. var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
  19. var longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
  20. var speed = res.speed; // 速度,以米/每秒计
  21. var accuracy = res.accuracy; // 位置精度
  22. //alert('纬度'+latitude+" ;经度"+longitude);
  23. //生成地理位置
  24. var fname = '';
  25. var point = new BMap.Point(longitude, latitude);
  26. var geoc = new BMap.Geocoder();
  27. geoc.getLocation(point, function(rs) {
  28. var addComp = rs.addressComponents;
  29.  
  30. //alert(addComp.province + ", "+addComp.city + ", "+addComp.district + ", "+addComp.street + ", "+addComp.streetNumber);
  31. fname = addComp.district;
  32. //alert('您现在所处位置:'+fname);
  33. //抽奖--判断地理位置 & 抽奖机会
  34.  
  35. if(fname=='XX区'){
  36. //执行
  37. }else{
  38. alert('本次活动目前向针对活动地区开放,其他地区敬请期待!');return;
  39. }
  40. });
  41. },
  42. fail:function(res){
  43. alert("获取位置失败,检查是否开启定位服务");
  44. }
  45. });
  46. });
  47.  
  48. wx.error(function(res){
  49. console.log(res.errMsg);
  50. });
  51.  
  52. wx.checkJsApi({
  53. jsApiList: ["getLocation"], // 需要检测的JS接口列表,所有JS接口列表见附录2,
  54. success: function(res) {
  55. //alert('check success!')
  56. // 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
  57. }
  58. });
  59. }

5.根据径、纬度获取地理位置方法

  1. /*
  2. * 根据经纬度获取位置
  3. * param1:经度
  4. * param2:纬度
  5. */
  6. //获取地理位置
  7. //var map = new BMap.Map("allmap");
  8. var point = new BMap.Point(lng, lat);
  9. //map.centerAndZoom(point, 12);
  10. var geoc = new BMap.Geocoder();
  11. geoc.getLocation(point, function(rs) {
  12. var addComp = rs.addressComponents;
  13.  
  14. //alert(addComp.province + ", "+addComp.city + ", "+addComp.district + ", "+addComp.street + ", "+addComp.streetNumber);
  15. return addComp.district;
  16. });

6.常见问题

我在使用时把经纬度转换地理位置写成一个getAddress()方法,在wx.getLocation的成功回调是调用getAddress,发现我几处弹框弹出的顺序不对,没有成功拿到getAddress的返回值。

所以使用时需要注意百度地图的这个API是异步执行。

微信js获取地理位置的更多相关文章

  1. 转:微信开发获取地理位置实例(java,非常详细,附工程源码)

    微信开发获取地理位置实例(java,非常详细,附工程源码)   在本篇博客之前,博主已经写了4篇关于微信相关文章,其中三篇是本文基础: 1.微信开发之入门教程,该文章详细讲解了企业号体验号免费申请与一 ...

  2. 微信开发获取地理位置实例(java,非常详细,附工程源码)

    在本篇博客之前,博主已经写了4篇关于微信相关文章,其中三篇是本文基础: 1.微信开发之入门教程,该文章详细讲解了企业号体验号免费申请与一些必要的配置,以及如何调用微信接口. 2.微信开发之通过代理调试 ...

  3. js 获取地理位置经纬度

    1. 加载百度API的核心js,ak表示获取百度地图的开发密钥,免费的需要申请下 <script type="text/javascript" src="http: ...

  4. js获取地理位置

    直接上代码: if(navigator.geolocation) { navigator.geolocation.getCurrentPosition( function (position) { v ...

  5. Net微信网页开发之使用微信JS-SDK获取当前地理位置

    前言: 前段时间有一个关于通过获取用户当前经纬度坐标,计算出该用户距离某指定地点之间的距离.因为做这个项目需要能够获取到比较精确的经纬度坐标,刚开始使用的是百度地图结果发现百度地图地位不太准确(有时候 ...

  6. 百度webAPI配合微信JSDK获取用户当前位子

    逻辑: ①通过微信JS-SDK 获取地理位置接口 获取经纬度 ②调用百度地图转换经纬度的API,得到百度地图的经纬度 ③调用百度地图 正/逆地址编码服务-->国际化逆地理编码 得到JSON数据, ...

  7. 【原创】微信公众号与HTML 5混合模式揭秘3——JSSDK获取地理位置

    微信公众号与HTML 5混合模式揭秘1——如何部署JSSDK 微信公众号与HTML 5混合模式揭秘2——分享手机相册中照片 JSSDK为开发者提供了两个位置API服务:获取地理位置和使用微信内置地图查 ...

  8. 微信公众号开发《三》微信JS-SDK之地理位置的获取,集成百度地图实现在线地图搜索

    本次讲解微信开发第三篇:获取用户地址位置信息,是非常常用的功能,特别是服务行业公众号,尤为需要该功能,本次讲解的就是如何调用微信JS-SDK接口,获取用户位置信息,并结合百度地铁,实现在线地图搜索,与 ...

  9. Java微信公众平台开发之获取地理位置

    本部分需要用到微信的JS-SDK,微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包.通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系统 ...

随机推荐

  1. Atitit.加密算法 des  aes 各个语言不同的原理与解决方案java php c#

    Atitit.加密算法 des  aes 各个语言不同的原理与解决方案java php c# 1. 加密算法的参数::算法/模式/填充 1 2. 标准加密api使用流程1 2.1. Md5——16bi ...

  2. HTTP Basic auth认证

    Basic 概述 Basic 认证是HTTP 中非常简单的认证方式,因为简单,所以不是很安全,不过仍然非常常用. 当一个客户端向一个需要认证的HTTP服务器进行数据请求时,如果之前没有认证过,HTTP ...

  3. 李洪强iOS开发之Xcode快捷键

    14个Xcode中常用的快捷键操作   在Xcode 6中有许多快捷键的设定可以使得你的编程工作更为高效,对于在代码文件中快速导航.定位Bug以及新增应用特性都是极有效的. 当然,你戳进这篇文章的目的 ...

  4. Qt pro文件语法

    在Qt下做开发的时候.pro文件就是工程的配置文件,虽然很多时候里面的选项是工具自动生成的,但是难免会需要手动修改的时候,下面就记录一下它的基本语法 #:在.pro文件中表示注释,注释当前行 TEMP ...

  5. c++11 thread (目前我使用的ZThread库)

    目前为止(2014-11-30),GCC其实已经基本上完全支持C++11的所有功能了,事实上从GCC4.7之后,就支持了-std=c++11选项,在4.7版本之前,也开始支持-std=c++0x的选项 ...

  6. PHP学习笔记(15)PDO数据库操作+AJAX无刷新技术删除用户

    pdo.php <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  7. 如何设置UITextView不可被编辑

    在项目中遇到一些需求需要把文字用UITextView来展示,但是该文字不能被编辑,只要把以下该代理方法实现就可以了 -(BOOL)textViewShouldBeginEditing:(UITextV ...

  8. android studio 中配置androidAnnotation 的新版正确配置

    apply ].processResources.manifestFile resourcePackageName 'com.peiandsky.firstandroidstudio' }}

  9. android之ViewPager修改滑动速度

    在android中,使用过viewpager的人都清楚,我们如果使用viewpager进行滑动时,如果通过手指滑动来进行的话,可以根据手指滑动的距离来实现,但是如果通过setCurrentItem函数 ...

  10. 安装第三方模块时遇到Python version 2.7 required, which was not found

    ## script to register Python 2.0 or later for use with win32all# and other extensions that require P ...