本期，边肖将给大家带来一些关于HTML5 jQuery如何使用JSSDK获取网页中地理位置的信息。文章内容丰富，将从专业角度进行分析和描述。希望你看完这篇文章能有所收获。
复制一个JSSDK环境并创建一个index.html文件。
在location.js中，封装“getLocation”接口如下：
01wxjssdk . location=function(location API){ 0
0IF(wxJSSDK . is ready){//wxjssdk . is ready检查微信jssdk是否已经初始化。
03 if(LoCationAPI){ 0
0 location API . getlocationwx . getlocation({//获取地理位置界面
05成功：功能(RES){ 0
06位置pi.getLocation.success
07 locationapi . getlocation . success(RES)；
08}
09});
10 }其他{
11console.log('缺少配置参数')；
12}
13 }其他{
14console.log('抱歉，wx尚未初始化，请等待wx初始化，然后调用位置接口服务。
15项服务。');
16}
17}
在index.html文件中，添加“获取地理位置”按钮，显示采集后的位置信息，代码结构如下：
01!DOCTYPEhtml
02htmllang='en '
03头
04metacharset='UTF-8 '
05 me taname=' viewport ' content=' width=设备宽度，初始比例=1.0，
06最小刻度=1，最大刻度=1.0，用户-sc
alable=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 background-color: #5eb95e;
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 background-color: #5eb95e;
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 <h2 >:)</h2>
42 <b >位置操作接口！</b><br/>
43 <div id="info">
44 <p>纬度：<em id="latitude">无</em>45 <p>经度：<em id="longitude">无</em>46 <p>速度：<em id="speed">无</em>47 <p>位置精度：<em id="accuracy">无</em>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的权限。
上述就是小编为大家分享的HTML5+jQuery如何利用JSSDK在网页中获取地理位置了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注行业资讯频道。
内容来源网络，如有侵权，联系删除，本文地址：https://www.230890.com/zhan/94854.html