一、 Compass 介绍方法参数  

　　　1、Compass 也就是，常说的指南针，又叫罗盘

　　　2、方法

　　　　compass.getCurrentHeading

　　　　compass.watchHeading

　　　　compass.clearWatch

　　　　compass.watchHeadingFilter (obsolete)         1.6版本以上不支持

　　　　compass.clearWatchFilter (obsolete)　　　　1.6版本以上不支持

　　3、参数

　　　　compassSuccess compassError

　　　　compassOptions compassHeading

二、 compass.getCurrentHeading 对象              主要获取罗盘的当前朝向。

　  1、navigator.compass.getCurrentHeading(compassSuccess, compassError, compassOptions);

　　　　compassSuccess 成功的回调函数

　　　　compassError 失败的回调函数

　　　　compassOptions 获取指南针信息时的一个选项例如：频率，它一般为一个 json 对象在 （compass.watchHeading）中用

　　2、回调成功后会用到 compassHeading 对象

　　　　magneticHeading：罗盘在某一时刻的朝向，取值范围是 0 - 359.99 度。(数字类型)

　　　　trueHeading：罗盘在某一时刻相对于北极的朝向，取值范围是 0 - 359.99 度。如果是负 值则表明该参数不确定。(数字类型)

　　　　headingAccuracy：实际度数（magneticHeading）和记录度数（trueHeading）之间的偏差。(数字类型)

　　　　timestamp：确定罗盘朝向的时刻.。(毫秒数)

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>phonegap_device_network_notification01</title>
  6. <link href="../jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>
  7. <script src="../jquery.js" type="text/javascript"></script>
  8. <script src="../jquery.mobile-1.3.2.js" type="text/javascript"></script>
  9. <script src="../cordova.js" type="text/javascript"></script>
  10. <script type="text/javascript" charset="utf-8">
  11.  
  12.     // 等待Cordova加载
  13.     document.addEventListener("deviceready", onDeviceReady, false);
  14.  
  15.     // Cordova加载完成
  16.     function onDeviceReady() {
  17.         $('#getCurrentHeading').click(function(){
  18.             navigator.compass.getCurrentHeading(onSuccess, onError);
  19.         })            
  20.  
  21.     }
  22.     function onSuccess(heading){
  23.         alert('Heading: ' + heading.magneticHeading);
  24.     }
  25.     function onError(compassError) {
  26.         alert('Compass Error: ' + compassError.code);
  27.     }
  28.  </script>
  29.  
  30. </head>
  31. <body>
  32. <div data-role="page">
  33.         <div data-role="header">
  34.             <h1>PhoneGap100实战</h1>
  35.         </div>
  36.         <div data-role="content">
  37.              <h1>指南针例子</h1>
  38.              <a href="#" data-role='button' id="getCurrentHeading">点击获取当前的朝向</a>
  39.                 <p>getCurrentHeading</p>
  40.         </div>
  41.         <div data-role="footer">
  42.             <h4>&nbsp;</h4>
  43.         </div>
  44. </div>
  45.  
  46. </body>
  47. </html>

三、 compass.watchHeading 对象

　　1、罗盘是一个检测设备方向或朝向的传感器，使用度作为衡量单位，取值范围从 0 度到 359.99 度。

　　2、compass.watchHeading 每隔固定时间就获取一次设备的当前朝向。每次取得朝向后，headingSuccess 回调函 数会被执行。

　　3、通过 compassOptions 对象的 frequency 参数可以设定以毫秒为单位的时间间隔。

　　4、返回的 watch ID 是罗盘监视周期的引用，可以通过 compass.clearWatch 调用该 watch ID 以停止对罗盘的监 视。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>phonegap_device_network_notification01</title>
  6. <link href="../jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>
  7. <script src="../jquery.js" type="text/javascript"></script>
  8. <script src="../jquery.mobile-1.3.2.js" type="text/javascript"></script>
  9. <script src="../cordova.js" type="text/javascript"></script>
  10. <script type="text/javascript" charset="utf-8">
  11.  
  12.     // 等待Cordova加载
  13.     document.addEventListener("deviceready", onDeviceReady, false);
  14.     var watchID='';
  15.     // Cordova加载完成
  16.     function onDeviceReady() {
  17.         $('#getCurrentHeading').click(function(){
  18.             var options = { frequency: 3000 };
  19.             watchID = navigator.compass.watchHeading(onSuccess, onError, options);
  20.  
  21.         });
  22.         $('#stopWatch').click(function(){
  23.             stopWatch();
  24.         })            
  25.  
  26.     }
  27.     function onSuccess(heading){
  28.         var element = document.getElementById('heading');
  29.         element.innerHTML = 'Heading: ' + heading.magneticHeading;
  30.     }
  31.     function onError(compassError) {
  32.         alert('Compass Error: ' + compassError.code);
  33.     }
  34.     //stop
  35.     function stopWatch(){
  36.         if(watchID){
  37.             navigator.compass.clearWatch(watchID);
  38.             watchID='';
  39.         }
  40.     }
  41.  </script>
  42.  
  43. </head>
  44. <body>
  45. <div data-role="page">
  46.         <div data-role="header">
  47.             <h1>PhoneGap100实战</h1>
  48.         </div>
  49.         <div data-role="content">
  50.              <h1>指南针例子</h1>
  51.              <a href="#" data-role='button' id="getCurrentHeading">点击获取当前的朝向</a>
  52.              <a href="#" data-role='button' id="stopWatch">停止获取当前的朝向</a>
  53.                 <p id="heading">还没有获取</p>
  54.         </div>
  55.         <div data-role="footer">
  56.             <h4>&nbsp;</h4>
  57.         </div>
  58. </div>
  59.  
  60. </body>
  61. </html>

　　

四、综合案例说明 

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>phonegap_device_network_notification01</title>
  6. <link href="../jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>
  7. <script src="../jquery.js" type="text/javascript"></script>
  8. <script src="../jquery.mobile-1.3.2.js" type="text/javascript"></script>
  9. <script src="../cordova.js" type="text/javascript"></script>
  10. <style>
  11. #main{
  12.     height:300px;
  13.     position:relative;
  14. }
  15. #compassDiv{
  16.     position:absolute;
  17.     top:30px;
  18. }
  19. #northDiv{
  20.     position:absolute;
  21.     top:116px;
  22.      left:142px;
  23.     z-index:2;
  24.     -webkit-transform:rotate(60deg);
  25. }
  26. </style>
  27. <script type="text/javascript" charset="utf-8">
  28.  
  29.     // 等待Cordova加载
  30.     document.addEventListener("deviceready", onDeviceReady, false);
  31.     var watchID='';
  32.     // Cordova加载完成
  33.     function onDeviceReady() {
  34.  
  35.         var options = { frequency: 300 };
  36.         watchID = navigator.compass.watchHeading(onSuccess, onError, options);            
  37.  
  38.     }
  39.     function onSuccess(heading){
  40.         var element = document.getElementById('northDiv');
  41.         var now_heading=heading.magneticHeading;
  42.         element.style.webkitTransform = 'rotate('+now_heading+"deg)";
  43.         $('#heading').text("当前的朝向"+now_heading);
  44.  
  45.     }
  46.     function onError(compassError) {
  47.         alert('Compass Error: ' + compassError.code);
  48.     } 
  49.  
  50.  </script>
  51.  
  52. </head>
  53. <body>
  54. <div data-role="page">
  55.         <div data-role="header">
  56.             <h1>PhoneGap100实战</h1>
  57.         </div>
  58.         <div data-role="content">
  59.             <div id='main'>
  60.               <div id="northDiv"><img src="../images/antique_needle.png"/></div>
  61.               <div id="compassDiv"><img src="../images/antique_compass.png" width="300" height="300" /></div>
  62.             </div>
  63.         </div>
  64.         <div data-role="footer">
  65.             <div id="heading">正在获取朝向...</div>
  66.         </div>
  67. </div>
  68.  
  69. </body>
  70. </html>

phonegap 的指南针 api Compass的更多相关文章

  1. 小白学phoneGap《构建跨平台APP：phoneGap移动应用实战》连载一（PhoneGap中的API）

    之前本博连载过<构建跨平台APP:jQuery Mobile移动应用实战>一书.深受移动开发入门人员的喜爱. 从如今開始,连载它的孪生姐妹书phoneGap移动应用实战一书,希望以前是小白 ...

  2. phonegap的照相机API

    1. Camera Api简单介绍 2. 拍照 3. 预览照片 一. Camera Api简单介绍 Camera选择使用摄像头拍照,或从设备相册中获取一张照片.图片以base64编码的 字符串或图片U ...

  3. phonegap的照相机 API

    一. Camera Api 简单介绍 Camera 选择使用摄像头拍照,或从设备相册中获取一张照片.图片以 base64 编码的 字符串或图片 URI 形式返回. 方法: 1. camera.getP ...

  4. PhoneGap 的文件 api

    一. 文件系统的请求 请求文件系统通过 window.requestFileSystem 来完函数声明如下: window.requestFileSystem(type, size, successC ...

  5. Phonegap中自定义插件的使用

    在phonegap中需要实现特定相关的功能,可能需要自定义扩展一下功能,那么扩展phonegap组件就成为了可能. 源代码结构图: 本文目的在于讲述怎么扩展一个phonegap组件以及实现. 针对ph ...

  6. 29、phonegap入门

    0. PhoneGap介绍 0.1  什么是PhoneGap? PhoneGap是一个基于HTML.CSS.JS创建跨平台移动应程序的快速开发平台.与传统Web应用不同的是,它使开发者能够利用iPho ...

  7. microbit之mpython的API

    附录:常用API函数汇总 一.显示 display.scroll("Hello, World!") 在micro:bit点阵上滚动显示Hello, World!,其中Hello, ...

  8. 新手的第一个phonegap Android应用

    对PhoneGap开发感兴趣的请加入群 PhoneGap App开发 348192525   手机成为现在软件应用必不可少的一种设备,然而手机平台的不统一造成我们需要为不同手机重写代码,这对一般应用来 ...

  9. 构建通过 Database.com 提供技术支持的 PhoneGap 应用程序

    要求 其他必要产品 Database.com account 用户级别 全部 必需产品 PhoneGap Build 范例文件 Database.Com-PhoneGap-Sample 在这篇文章中, ...

随机推荐

  1. 解决Eclipse中Android SDK Manager图标不见了的问题

    在Eclipse中安装完ADT后,发现 Android SDK Manager图标不见了,Android Virtual Device Manager图标也不见了. 解决这个问题,可用如下方法: 打开 ...

  2. rem单位怎么使用

    rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我对rem综合评价是用来做web app它绝对是最合适的人选之一. ...

  3. step6: item与pipeline

    目的:提取内容进行格式化输出,类似于字典 编写item文件 class JobBoleArticleItem(scrapy.Item): title = scrapy.Field() #支持传进任何数 ...

  4. [APIO2018] Circle selection 选圆圈

    Description 给出 \(n\) 个圆 \((x_i,y_i,r_i)\) 每次重复以下步骤: 找出半径最大的圆,并删除与这个圆相交的圆 求出每一个圆是被哪个圆删除的 Solution \(k ...

  5. JS实现中英文混合文字溢出友好截取功能

    在显示字符串的时候,避免字符串过长往往会对字符串进行截取操作,通常会用到js的 substr 或者 substring方法, 以及 字符串的length属性 substr() 方法可在字符串中抽取从 ...

  6. HTTP中的响应协议及302、304的含义

    响应协议 HTTP/1.1 200 OK:响应协议为HTTP1.1,状态码为200,表示请求成功,OK是对状态码的解释: Server: Apache-Coyote/1.1:服务器的版本信息: Con ...

  7. Idea 配置启动JDK___在windows中使用Intellij Idea时选择自定义的64位JVM

    略过下面的叙述快速配置 配置你的Idea启动jdk  (Idea15之后的版本启动不要JDK1.8) 添加环境变量IDEA_JDK_64,配置和JAVA_HOME环境变量相同,路径写到1.8的jdk就 ...

  8. Regular Expression学习笔记

    正则写法 var re = /a/;//简写 /.../里不能为空,因为会误以为是注释: var re = new RegExp('a'); 新建一个RegExp对象:和新建Array对象,Objec ...

  9. Apache服务器运维笔记(5)----容器的处理顺序

    容器在配置文件中是可以多次使用的,同时也可以嵌套使用,但是 Apache 在处理容器时却是有一定顺序的,因此在编写容器配置时需要按照一定的顺序来进行,否则Apache处理的结果很可能不是管理员想要的. ...

  10. Apache服务器运维笔记(3)----容器部分

    1.<IfModule>容器 <IfModule>容器作用于模块,它会首先判断模块是否载入,然后再决定是否进行处理,也就是说只有当判断结果为真时才会执行容器内的指令,相反如果为 ...