一、 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. CCF 出现次数最多的数 201312-1

    出现次数最多的数 问题描述 试题编号: 201312-1 试题名称: 出现次数最多的数 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 给定n个正整数,找出它们中出现次数最多的 ...

  2. Iterator和ListIterator的区别 ---面试题

    Iterator和ListIterator的区别是什么? 下面列出了他们的区别: Iterator可用来遍历Set和List集合,但是ListIterator只能用来遍历List. Iterator对 ...

  3. Golang教程：指针

    什么是指针 指针是存储一个变量的内存地址的变量. 在上图中,变量 b 的值是 156,存储在地址为 0x1040a124 的内存中.变量 a 存储了变量 b 的地址.现在可以说 a 指向b. 指针的声 ...

  4. 开启停止wifi热点bat脚本

    @echo offcolor 2title    启停无线WIFI echo                            启动WIFI=======>按1键   echo        ...

  5. SQL 除去回车符 除去空格符

    update table set fa=replace(fa,chr(13),'') ; --- 除去回车符 update table set fa=replace(fa,' ','') ; --- ...

  6. Expression Blend实例中文教程(13) - 控件模板快速入门ControlTemplates

    上篇,介绍了控件样式(Style)和模板(Template)的基础概念,并且演示了使用Blend设计控件样式.本篇将继续介绍使用Blend设计自定义控件模板 - ControlTemplate.Con ...

  7. 借助 CORS 从 JavaScript 使用 API 应用

    应用服务提供内置的跨域资源共享 (CORS) 支持,可让 JavaScript 客户端对 API 应用中托管的 API 进行跨域调用.应用服务允许配置对 API 的 CORS 访问,无需在 API 中 ...

  8. Linux下剪切拷贝命令

    Linux下剪切拷贝命令   命令格式: mv   source    dest   mv: 命令字   source: 源文件   dest: 目的地址   Linux下拷贝命令   命令格式:cp ...

  9. MVC设计模式实现权限管理登录，超详细

    功能实现:在页面输入给定的用户名之一,可以显示当前用户的权限,也可以在页面更改该用户的权限,更新之后保存.像下面这样. 填写用户名提交: 显示用户AAA的权限: 修改权限(增加article3): 点 ...

  10. powerdesigner 将表中name列值复制到comment列 (保留原有comment)

    /** * PowerDesigner里面将表中name列值复制到comment列 * @see --------------------------------------------------- ...