一、 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. 入门系列之在Ubuntu上使用Netdata设置实时性能监控

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由小翼 发表于云+社区专栏 介绍 Netdata通过可扩展的Web仪表板提供准确的性能监控,可以显示Linux系统上的流程和服务.它监控 ...

  2. 问题集录03--jquery解析json

    先明确2个概念例如: JSON字符串: var str1 = '{ "name": "deyuyi", "sex": "man&q ...

  3. Firebird 有用的list函数

    语法: LIST ([ALL | DISTINCT] expression [, separator]) 示例: select list(u.code, ';') from m_user u 结果:查 ...

  4. js 大转盘,老虎 机

     http://www.helloweba.com/view-blog-215.htmlhttp://www.ui3g.com/demos/show/1408/http://www.js-css.cn ...

  5. 微软的TransactionScope类是个好玩意

    最近发现微软自带的TransactionScope(.Net Framework 2之后)是个好东东,提供的功能也很强大. 首先说说TransactionScope是什么,并能为我们做什么事情.其实看 ...

  6. Lucene学习之四：Lucene的索引文件格式(3)

    本文转载自:http://www.cnblogs.com/forfuture1978/archive/2010/02/02/1661436.html ,略有删改和备注. 四.具体格式 4.2. 反向信 ...

  7. 2017年11月30日 C#TreeNode递归&邮箱验证&新用户窗体

    TreeNode递归 递归:自己调用自己一层一层的把数据找出来 TreeNode:可以创建多个节点 private void button1_Click(object sender, EventArg ...

  8. 购物车之CheckBox所有事件

    html 主要是循环

  9. java编写简单的语法分析预测程序

    编译原理课程中,编了一个简单的语法分析预测程序,这个程序时根据固定的文法得到预测分析表,然后编写程序来判断表达式是否会正确推到出来. 前提是程序没有左递归符合LL(1)文法: 文法如下: E→TE' ...

  10. rabbit工作队列模式

    工作队列比简单队列在消费者这边多了一个方法. channel.basicQos(1);公平队列消费(参数设置为1,表示消费者消费完一条才会去接受再次发来的消息) 生产者: package com.kf ...