复制一份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. CRM公海自动回收规则

    企微云CRM操作指南 – 道一云|企微https://wbg.do1.com.cn/xueyuan/2568.html 销售云 - 美洽 - 连接客户,亲密无间https://meiqia.com/s ...

  2. 常用的前端相关chrome插件

    前面的话 本文将详细介绍笔者在开发中常用的一些chrome插件 字符编码 前端开发时,经常出现乱码的情况.但是,新版本的chrome浏览器已经没有更改字符编码的设置选择,这时就要用到set chara ...

  3. java篇 之 流程控制语句

    条件判断语句 条件语句: If(boolean类型) {} else {}    (打大括号避免出错) switch (export)语句:export的类型必须是 byte,short,char,i ...

  4. Shodan的http.favicon.hash语法详解与使用技巧

    在Shodan搜索中有一个关于网站icon图标的搜索语法,http.favicon.hash,我们可以使用这个语法来搜索出使用了同一icon图标的网站,不知道怎么用的朋友请参考我上一篇文章. 通过上一 ...

  5. Tomcat启动报错，报找不到gdk_custom.jar

    在 tomcat/conf/context.xml 中新增如下配置 <Context> ... <JarScanner scanManifest="false"/ ...

  6. linux 系统工具图

  7. 「Manacher算法」学习笔记

    觉得这篇文章写得特别劲,插图非常便于理解. 目的:求字符串中的最长回文子串. 算法思想 考虑维护一个数组$r[i]$代表回文半径.回文半径的定义为:对于一个以$i$为回文中心的奇数回文子串,设其为闭区 ...

  8. fast ai-lesson 1 报错解决方法（正则表达式提取文件名）

    在运行fast ai lesson 1的代码的时候,运行到的时候报错了 data = ImageDataBunch.from_name_re(path_img, fnames, pat, ds_tfm ...

  9. consul 剔除node_exporter的脚本

    #!/bin/bash clear echo "node_exporter注销工具" read -p "请输入要踢掉的节点IP,如果有多个IP,请使用英文格式 ',' 隔 ...

  10. ArrayDataProvider数据分页

    模型 public function search($page=10){ $lists = self::find()->orderBy('id DESC')->all(); $dataPr ...