HTML5+jQuery如何利用JSSDK在网页中获取地理位置

技术HTML5+jQuery如何利用JSSDK在网页中获取地理位置这期内容当中小编将会给大家带来有关HTML5+jQuery如何利用JSSDK在网页中获取地理位置,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文

本期,边肖将给大家带来一些关于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

(0)

相关推荐

  • 如何理解JavaScript预解析及对象

    技术如何理解JavaScript预解析及对象本篇文章为大家展示了如何理解JavaScript预解析及对象,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。一、预解析1、变量预解析和函

    攻略 2021年11月9日
  • js数组去重效率最高的方法(js数组遍历的三种方法)

    技术七种JS实现数组去重的方式分别是什么这篇文章将为大家详细讲解有关七种JS实现数组去重的方式分别是什么,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。例:将下面数组去除重

    攻略 2021年12月14日
  • 1楼,为什么有人说买房子不要买一楼

    技术1楼,为什么有人说买房子不要买一楼为什么有人说买房子不要买一楼1楼?都有优势和劣势,它的优势是热天很凉快,不用开多少空调,可以在一楼做生意开个超市,可以在一楼,搞美容美发,也可以搞快递。不用拿铺面租金。老人孩子上下楼

    生活 2021年10月24日
  • visualbasic引用教程(visualbasic基本数据类型)

    技术怎么浅析Visual Basic动态数据驱动程序这篇文章给大家介绍怎么浅析Visual Basic动态数据驱动程序,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。Visual Basic应用程序经

    攻略 2021年12月19日
  • CF1506A Strange Table 题解

    技术CF1506A Strange Table 题解 CF1506A Strange Table 题解CF1506A Strange Table 题解Content
    给定一个 \(n\times m\)

    礼包 2021年12月16日
  • 40种聚会小游戏,聚会适合两人一组玩的小游戏

    技术40种聚会小游戏,聚会适合两人一组玩的小游戏快乐大本营的,谁是卧底40种聚会小游戏!还有考验默契的,一个人画一个人猜,or一个人看词比动作,然后不说话的那种,叫别人猜是什么
    瞎子背瘸子
    目的:沟通配合能力,活跃气氛

    生活 2021年10月31日