复制一份JSSDK环境，创建一份index.html文件，结构如图7.1所示。

图7.1  7.1节文件结构

在location.js中，封装“getLocation”接口，如下：

01  wxJSSDK.location = function(locationApi){
02      if(wxJSSDK.isReady){    //wxJSSDK.isReady 查看微信JSSDK是否初始化完毕
03          if(locationApi){
04              locationApi.getLocation && wx.getLocation({     //获取地理位置接口
05                  success: function (res) {
06                      locationApi.getLocation.success &&
07  locationApi.getLocation.success(res);
08                  }
09              });
10          }else{
11              console.log("缺少配置参数");
12          }
13      }else{
14          console.log("抱歉，wx没有初始化完毕，请等待wx初始化完毕，再调用位置接口服
15  务。");
16      }
17  }

　　在index.html文件中，增加“获取地理位置”按钮，以及显示获取之后的位置信息，代码结构，如下：

01      <!DOCTYPE html>
02      <html lang="en">
03      <head>
04               <metacharset="UTF-8">
05         <meta name="viewport" content="width=device-width,initial-scale=1.0,
06      minimum-scale=1, maximum-scale=1.0,user-scalable=no">
07         <title>第7章 7.1节 位置操作接口</title>
08         <!--依赖文件：jQuery-->
09         <script src="./js/jquery-1.11.2.min.js"></script>
10         <!--依赖文件：微信的JSSDK源文件-->
11         <scriptsrc="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
12         <!--依赖文件：coolie-->
13         <script src="./js/cookie.js"></script>
14         <!--JSSDK的环境-->
15         <script src="./js/wxJSSDK.js"></script>
16         <!--引入检测API的位置服务-->
17         <script src="location.js"></script>
18         <style>
19             input{
20                 width: 100%;
21                 padding: 0.2em;
22                
23                 font-size: 1.4em;
24                 background-image: linear-gradient(to bottom, #62c462, #57a957);
25                 background-repeat: repeat-x;
26                 color: #ffffff;
27                 text-align: center;
28                 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
29                 border-radius: 0.3em;
30             }
31             #info{
32                 border-left: 3px solid#03a9f4;
33                
34                 color: #ffffff;
35                 border-radius: 0.3em;
36                 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
37             }
38         </style>
39      </head>
40      <body>
41         <h1 style="font-size: 8em">:)</h1>
42         <b style="font-size: 3em">位置操作接口！</b><br/><br />
43         <div id="info">
44             <p>纬度：<em id="latitude">无</em></p>
45             <p>经度：<em id="longitude">无</em></p>
46             <p>速度：<em id="speed">无</em></p>
47             <p>位置精度：<em id="accuracy">无</em></p>
48         </div>
49         <input type="button" value="获取当前地理位置信息" id="getLocation" />
50      </body>
51      </html>

　　

然后在location.js中增加响应事件，代码如下：

01  window.onload = function(){
02      var latitude,longitude, speed ,accuracy;        // 位置信息初始变量
03      $("#getLocation").click(function(){         // 获取地理位置接口
04          wxJSSDK.location({
05              getLocation:{
06                  success:function (res) {
07                      latitude = res.latitude;        // 纬度，浮点数，范围为90 ~ -90
08                      $("#latitude").html(latitude);
09                      longitude = res.longitude;  // 经度，浮点数，范围为180 ~ -180。
10                      $("#longitude").html(longitude);
11                      speed = res.speed;      // 速度，以米/每秒计
12                      $("#speed").html(speed);
13                      accuracy = res.accuracy;    // 位置精度
14                      $("#accuracy").html(accuracy);
15                  }
16              }
17          });
18      });
19  }

　　

最后记得在JSSDK的配置环境中加入“getLocation”API的权限。

【代码解释】

“getLocation”的位置成功后，会返回“纬度”、“经度”、“速度”、“位置精度”的相关信息。当点击“获取位置”的按钮之后，微信会弹出提示信息，如图7.2所示。获取位置服务成功之后的结果如图7.3所示。

图7.2 微信JSSDK获取位置信息提示

图7.3  获取位置服务成功的信息

JSSDK获取用户地理位置信息的更多相关文章

  1. [微信开发] 微信JSAPI - 获取用户地理位置信息

    参考博客 http://blog.csdn.net/u013142781/article/details/50503299 主要JS 方法 wx.getLocation 获取地理位置信息传递参数 成功 ...

  2. [扩展推荐] Laravel 中利用 GeoIP 获取用户地理位置信息

    我最近需要一个用户地域检测来设置用户的默认区域和货币.由 Daniel Stainback 创建的 torann/geoip  很好地满足为Laravel 5 项目提供 GeoIP 服务的要求. 这个 ...

  3. 根据ip获取用户地理位置

    各大网站都提供根据ip获取用户地理位置信息,这里以新浪的接口为例子 接口地址为:http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js ...

  4. 【微信小程序】获取用户地理位置权限，二次请求授权，逆解析获取地址

    摘要:微信小程序内获取用户地理位置信息授权,被拒绝后二次获取,获取权限后逆解析得到用户所在省市区等.. 场景:商城类小程序,在首页时需展示附近门店,即用户刚进入小程序时就需要获取到用户位置信息 ste ...

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

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

  6. 钉钉开发入门,微应用识别用户身份,获取用户免登授权码code,获取用户userid,获取用户详细信息

    最近有个需求,在钉钉内,点击微应用,获取用户身份,根据获取到的用户身份去企业内部的用户中心做校验,校验通过,相关子系统直接登陆; 就是在获取这个用户身份的时候,网上的资料七零八落的,找的人烦躁的很,所 ...

  7. [微信小程序] 微信小程序获取用户定位信息并加载对应城市信息，wx.getLocation，腾讯地图小程序api，微信小程序经纬度逆解析地理信息

    因为需要在小程序加个定位并加载对应城市信息 然而小程序自带api目前只能获取经纬度不能逆解析,虽然自己解析方式,但是同时也要调用地图,难道用户每次进小程序还要强行打开地图选择地址才定位吗?多麻烦也不利 ...

  8. 背水一战 Windows 10 (82) - 用户和账号: 获取用户的信息, 获取用户的同意

    [源码下载] 背水一战 Windows 10 (82) - 用户和账号: 获取用户的信息, 获取用户的同意 作者:webabcd 介绍背水一战 Windows 10 之 用户和账号 获取用户的信息 获 ...

  9. Python学习---Django的request扩展[获取用户设备信息]

    关于Django的request扩展[获取用户设备信息] settings.py INSTALLED_APPS = [ ... 'app01', # 注册app ] STATICFILES_DIRS ...

随机推荐

  1. 深度学习识别CIFAR10：pytorch训练LeNet、AlexNet、VGG19实现及比较（二）

    版权声明:本文为博主原创文章,欢迎转载,并请注明出处.联系方式:460356155@qq.com AlexNet在2012年ImageNet图像分类任务竞赛中获得冠军.网络结构如下图所示: 对CIFA ...

  2. Django-4 视图层

    视图函数 一个视图函数,简称视图,是一个简单的Python 函数,它接受Web请求并且返回Web响应.响应可以是一张网页的HTML内容,一个重定向,一个404错误,一个XML文档,或者一张图片. . ...

  3. P1119 灾后重建（floyd进阶）

    思路:这道题看n的范围很小(n<=200),显然就用floyd可以解决的问题,但又并不是简单的floyd算法,还是需要一些小小的变化.一开始我的思路是先跑一次弗洛伊德最短路,这样子显然复杂度很高 ...

  4. JS 基础知识点

    最近发现一个好东西,掘金小册,觉得里面的东西挺不错的,准备仔细阅读一下,提升下自己. 记录一下,随便加深点儿印象,主要内容源自于小册. 原始类型 原始类型也成为基本数据类型 boolean null ...

  5. WordPress安装官方文档教程

    01.可访问的网址 02.目录和软件 包括: 访问 web服务器 (通过 shell 或者 FTP)的权限 一个 文本编辑器 一个 FTP客户端 (如果你需要在一个远程服务器上安装WordPress) ...

  6. opencontrail—VXLAN模式下数据包的传输过程

    在这篇文章中,我们将看到VM生成的数据包如何能够到达另一个VM或外部资源,Neutron使用OpenContrail插件的上下文中的关键概念/组件是什么. 我们将重点介绍OpenContrail,它如 ...

  7. 如何快速上手Mac

    网络上关于Mac的教程很多,大部分问题通过百度和谷歌就能搞定了.对于技巧的细节,我将不再过多的重复,看了我的参考资料基本就能够全部了解,他们也比我讲得详细得很多.我这篇文章想做的,是以一个普通的win ...

  8. 【优秀的图片后期编辑工具】Luminar 3.1 for Mac

     [简介] 今天和大家分享最新的 Luminar for Mac 3.1 版本,支持中文界面,Luminar是一款Mac上优秀的图片后期处理工具,功能类似 Photoshop Lightroom 等软 ...

  9. 适用于单片机的数据加密算法：xxtea

    转:https://www.cnblogs.com/LittleTiger/p/4384741.html 各位大侠在做数据传输时,有没有考虑过把数据加密起来进行传输,若在串口或者无线中把所要传的数据加 ...

  10. JavaScript 高级

    在线JS编辑 JS 编写规范 阮一峰 ES 6 阮一峰 廖雪峰 操作文件 <html> <head> <script src='./jquery-2.2.3.min.js ...