复制一份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. feilong's blog | 目录

    每次把新博客的链接分享到技术群里,我常常会附带一句:蚂蚁搬家.事实上也确实如此,坚持1篇1篇的把自己做过.思考过.阅读过.使用过的技术和教育相关的知识.方法.随笔.索引记录下来,并持续去改进它们,希望 ...

  2. Appium could not connect to server are you sure it's running appium desktop

    use remote host value : 127.0.0.1 switch to Custom server to Automatic server adb kill-server adb st ...

  3. ASP.NET Core OData now Available

    It looks great! https://devblogs.microsoft.com/odata/asp-net-core-odata-now-available/

  4. [ffmpeg] h264并行解码

    ffmpeg中的并行解码分为两种: Frame-level Parallelism Slice-level Parallelism Frame-level Parallelism 帧间依赖 我们之前讨 ...

  5. 【C++】GSL(GNU Scientific Library) 的安装及在 Visual Studio 2017 中的使用

    GSL 是 GNU 开发并维护的科学计算的库,其中包括: 复数 多项式的根 特殊函数 向量和矩阵 排列 排序 BLAS支持 线性代数 Eigensystems 快速傅立叶变换 正交 随机数 准随机序列 ...

  6. [ZJOI2019]线段树

    题目大意 一开始有一棵线段树,然后有一个操作序列,问执行这个操作序列的所有子集时线段树上有标记的节点个数和. 题解 其实我们把它除以\(2^m\)后发现就是有标记节点的期望个数. 然后套路的根据期望的 ...

  7. 超越村后端开发（2：新建models.py+xadmin的引入）

    1.新建Model 1.users数据 1.在apps/users/models.py中: from datetime import datetime from django.db import mo ...

  8. Django 中的static文件的设置

    STATIC_URL = '/static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'static'), ('article',os.path.jo ...

  9. <02>labSQL的配置和使用方法

    任务布置:制作简单地铁站点管理系统<2> 要求一:正确配置系统,建立基本正常的数据通道:要求二:实现地铁站点的登记,拥有查询功能: 正文: 今天介绍labview虚拟仪器软件中  labS ...

  10. 使Python走向Effective系列目录

    Effective以一词,并不单单局限于执行速度层面的高效率,同时有着令代码易于阅读.易于测试且易于维护等意思,此外,它还蕴藏着易于扩展.易于修改和易于多人协作等更为高阶的理念.如果能够通过一些具体的 ...