一、 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：确定罗盘朝向的时刻.。(毫秒数)

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>phonegap_device_network_notification01</title>

<link href="../jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>

<script src="../jquery.js" type="text/javascript"></script>

<script src="../jquery.mobile-1.3.2.js" type="text/javascript"></script>

<script src="../cordova.js" type="text/javascript"></script>

<script type="text/javascript" charset="utf-8">

    // 等待Cordova加载

    document.addEventListener("deviceready", onDeviceReady, false);

    // Cordova加载完成

    function onDeviceReady() {

        $('#getCurrentHeading').click(function(){

            navigator.compass.getCurrentHeading(onSuccess, onError);

        })            

    }

    function onSuccess(heading){

        alert('Heading: ' + heading.magneticHeading);

    }

    function onError(compassError) {

        alert('Compass Error: ' + compassError.code);

    }

 </script>

</head>

<body>

<div data-role="page">

        <div data-role="header">

            <h1>PhoneGap100实战</h1>

        </div>

        <div data-role="content">

             <h1>指南针例子</h1>

             <a href="#" data-role='button' id="getCurrentHeading">点击获取当前的朝向</a>

                <p>getCurrentHeading</p>

        </div>

        <div data-role="footer">

            <h4>&nbsp;</h4>

        </div>

</div>

</body>

</html>

三、 compass.watchHeading 对象

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

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

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

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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>phonegap_device_network_notification01</title>

<link href="../jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>

<script src="../jquery.js" type="text/javascript"></script>

<script src="../jquery.mobile-1.3.2.js" type="text/javascript"></script>

<script src="../cordova.js" type="text/javascript"></script>

<script type="text/javascript" charset="utf-8">

    // 等待Cordova加载

    document.addEventListener("deviceready", onDeviceReady, false);

    var watchID='';

    // Cordova加载完成

    function onDeviceReady() {

        $('#getCurrentHeading').click(function(){

            var options = { frequency: 3000 };

            watchID = navigator.compass.watchHeading(onSuccess, onError, options);

        });

        $('#stopWatch').click(function(){

            stopWatch();

        })            

    }

    function onSuccess(heading){

        var element = document.getElementById('heading');

        element.innerHTML = 'Heading: ' + heading.magneticHeading;

    }

    function onError(compassError) {

        alert('Compass Error: ' + compassError.code);

    }

    //stop

    function stopWatch(){

        if(watchID){

            navigator.compass.clearWatch(watchID);

            watchID='';

        }

    }

 </script>

</head>

<body>

<div data-role="page">

        <div data-role="header">

            <h1>PhoneGap100实战</h1>

        </div>

        <div data-role="content">

             <h1>指南针例子</h1>

             <a href="#" data-role='button' id="getCurrentHeading">点击获取当前的朝向</a>

             <a href="#" data-role='button' id="stopWatch">停止获取当前的朝向</a>

                <p id="heading">还没有获取</p>

        </div>

        <div data-role="footer">

            <h4>&nbsp;</h4>

        </div>

</div>

</body>

</html>

　　

四、综合案例说明 

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>phonegap_device_network_notification01</title>

<link href="../jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>

<script src="../jquery.js" type="text/javascript"></script>

<script src="../jquery.mobile-1.3.2.js" type="text/javascript"></script>

<script src="../cordova.js" type="text/javascript"></script>

<style>

#main{

    height:300px;

    position:relative;

}

#compassDiv{

    position:absolute;

    top:30px;

}

#northDiv{

    position:absolute;

    top:116px;

     left:142px;

    z-index:2;

    -webkit-transform:rotate(60deg);

}

</style>

<script type="text/javascript" charset="utf-8">

    // 等待Cordova加载

    document.addEventListener("deviceready", onDeviceReady, false);

    var watchID='';

    // Cordova加载完成

    function onDeviceReady() {

        var options = { frequency: 300 };

        watchID = navigator.compass.watchHeading(onSuccess, onError, options);            

    }

    function onSuccess(heading){

        var element = document.getElementById('northDiv');

        var now_heading=heading.magneticHeading;

        element.style.webkitTransform = 'rotate('+now_heading+"deg)";

        $('#heading').text("当前的朝向"+now_heading);

    }

    function onError(compassError) {

        alert('Compass Error: ' + compassError.code);

    } 

 </script>

</head>

<body>

<div data-role="page">

        <div data-role="header">

            <h1>PhoneGap100实战</h1>

        </div>

        <div data-role="content">

            <div id='main'>

              <div id="northDiv"><img src="../images/antique_needle.png"/></div>

              <div id="compassDiv"><img src="../images/antique_compass.png" width="300" height="300" /></div>

            </div>

        </div>

        <div data-role="footer">

            <div id="heading">正在获取朝向...</div>

        </div>

</div>

</body>

</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. 机器学习——LightGBM

    基础概念 LigthGBM是boosting集合模型中的新进成员,它和xgboost一样是对GBDT的高效实现,很多方面会比xgboost表现的更为优秀.原理上它和GBDT及xgboot类似,都采用损 ...

  2. 冀永楠：OCR的应用锦集及背后技术

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由云加社区技术沙龙 发表于云+社区专栏 演讲嘉宾:冀永楠,现为腾讯云大数据AI产品中心高级研究员.负责了腾讯云与华星光电等多个图像AI项 ...

  3. 栈C++实现

    栈的核心是LIFO(Last In First Out),即后进先出 出栈和入栈只会对栈顶进行操作,栈底永远为0.如果是入栈,要将入栈元素赋值给栈数组,再将栈顶上移一位:出栈时要先将栈顶下移一位,再将 ...

  4. Exists/In/Any/All/Contains操作符

    Exists/In/Any/All/Contains操作符 适用场景:用于判断集合中元素,进一步缩小范围. Any 说明:用于判断集合中是否有元素满足某一条件:不延迟.(若条件为空,则集合只要不为空就 ...

  5. ASP.NET MVC4 新手入门教程之九 ---9.查询详情和删除方法

    在本教程的这一部分,您会检查自动生成的Details和Delete方法. 检查详细信息和删除方法 打开Movie控制器并检查的Details的方法. public ActionResult Detai ...

  6. Springmvc file多附件上传 显示 删除操作

    之前项目需求要做一个多附件上传 并显示上传文件 带删除操作 一筹莫展之际搜到某个兄弟发的博客感觉非常好用被我copy下来了此贴算是改良版 再次感谢(忘记叫什么了时间也有点久没有历史记录了)先上图 基于 ...

  7. thrift简介

    thrift是一个软件框架,用来进行可扩展且跨语言的服务的开发.它结合了功能强大的软件堆栈和代码生成引擎,以构建在 C++, Java, Python, PHP, Ruby, Erlang, Perl ...

  8. Spring_Spring的特点

    一.非侵入式编程 Spring框架的API不会再业务逻辑上出现,即业务逻辑是POJO(Plain Ordinary Java Object).由于业务逻辑中没有Spring的API,所以业务逻辑可以从 ...

  9. LeetCode Palidrome Number

    class Solution { public: bool isPalindrome(int x) { ) return false; ; int t = x; ; ) { pow *= ; cnt+ ...

  10. 医药箱APP静态小项目

    花费了10天时间,纯手写一个医药箱APP静态小项目,里面有上拉加载.左右滑动.弹出层淡入淡出等效果,主要是练习. 以下是一部分页面效果图: 我用的是谷歌的开发者工具的手机端模拟器. 里面需要优化的地方 ...