复制一份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. 免费高端出辕营，横空出世惊鬼神 Excel插件：ExcelPower_Helper 0.41初出茅庐

    免费高端出辕营,横空出世惊鬼神 Excel插件:ExcelPower_Helper 0.41初出茅庐        隐鹤 倾心开发 2019.4.1 1.   引言 经过前后大约零零散散的一年的开发, ...

  2. linux系统docker版本升级或安装

    如果存在旧版本,则先卸载 最好先将镜像导出保存,以免升级后丢失或者无法使用 如有正在运行的容器,先停止 $ docker ps -q | xargs docker stop 关闭docker服务 $ ...

  3. MongoDB之常用操作

    最近经常使用MongoDB来进行数据的操作,特此记录总结一下

  4. git常用命令一、git cherry-pick

    在自己的分支查看想要合并的节点的commit id : Git log —oneline -3   //查看最新的三个提交 commit id 切换到总分支: Git fetch Git pull G ...

  5. [BZOJ 3227] [SDOI 2008] 红黑树(tree)

    Description 红黑树是一类特殊的二叉搜索树,其中每个结点被染成红色或黑色.若将二叉搜索树结点中的空指针看作是指向一个空结点,则称这类空结点为二叉搜索树的前端结点.并规定所有前端结点的高度为- ...

  6. [LOJ3086][GXOI/GZOI2019]逼死强迫症——递推+矩阵乘法

    题目链接: [GXOI/GZOI2019]逼死强迫症 设$f[i][j]$表示前$i$列有$j$个$1*1$的格子的方案数,那么可以列出递推式子: $f[i][0]=f[i-1][0]+f[i-2][ ...

  7. windows无法完成安装，若要在此计算机上安装，请重新启动安装

    当出现如上提示的时候,不要重启,按下shift+f10 会打开命令窗口,先输入cd oobe 进入到C:\windows\system32\oobe文件夹,输入msoobe回车然后输入msoobe即可 ...

  8. vue+typescript基础练习

    环境 win10 node -v 8.9.3 vue-cli 3.4 typescript 3.1.5 编辑器 vscode 目标 使用vuecli工具,建立一个项目,使用typescript.并实现 ...

  9. ubuntu mirror

    # apt-mirror configuration file ## The default configuration options (uncomment and change to overri ...

  10. MVN TEST指定运行脚本

    clean:表示将你上一次编译生成的一些文件删除 test:表示只执行测试代码 >mvn clean test -Dtest=[ClassName] 运行测试类中指定的方法:这个需要maven- ...