phonegap 的指南针 api Compass

一、 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的更多相关文章

小白学phoneGap《构建跨平台APP：phoneGap移动应用实战》连载一（PhoneGap中的API）
之前本博连载过<构建跨平台APP:jQuery Mobile移动应用实战>一书.深受移动开发入门人员的喜爱. 从如今開始,连载它的孪生姐妹书phoneGap移动应用实战一书,希望以前是小白 ...
phonegap的照相机API
1. Camera Api简单介绍 2. 拍照 3. 预览照片一. Camera Api简单介绍 Camera选择使用摄像头拍照,或从设备相册中获取一张照片.图片以base64编码的字符串或图片U ...
phonegap的照相机 API
一. Camera Api 简单介绍 Camera 选择使用摄像头拍照,或从设备相册中获取一张照片.图片以 base64 编码的字符串或图片 URI 形式返回. 方法: 1. camera.getP ...
PhoneGap 的文件 api
一. 文件系统的请求请求文件系统通过 window.requestFileSystem 来完函数声明如下: window.requestFileSystem(type, size, successC ...
Phonegap中自定义插件的使用
在phonegap中需要实现特定相关的功能,可能需要自定义扩展一下功能,那么扩展phonegap组件就成为了可能. 源代码结构图: 本文目的在于讲述怎么扩展一个phonegap组件以及实现. 针对ph ...
29、phonegap入门
0. PhoneGap介绍 0.1 什么是PhoneGap? PhoneGap是一个基于HTML.CSS.JS创建跨平台移动应程序的快速开发平台.与传统Web应用不同的是,它使开发者能够利用iPho ...
microbit之mpython的API
附录:常用API函数汇总一.显示 display.scroll("Hello, World!") 在micro:bit点阵上滚动显示Hello, World!,其中Hello, ...
新手的第一个phonegap Android应用
对PhoneGap开发感兴趣的请加入群 PhoneGap App开发 348192525 手机成为现在软件应用必不可少的一种设备,然而手机平台的不统一造成我们需要为不同手机重写代码,这对一般应用来 ...
构建通过 Database.com 提供技术支持的 PhoneGap 应用程序
要求其他必要产品 Database.com account 用户级别全部必需产品 PhoneGap Build 范例文件 Database.Com-PhoneGap-Sample 在这篇文章中, ...

随机推荐

web_01Java ee实现登陆注册功能
Web Web_01版本: 实现功能用户注册用户登录设计内容数据库:mysql 服务器: tomact7 配置 : xml 页面 : jsp+html/css *重点: 数据库相关: 数据库操 ...
linux-pm2用法
devo.ps团队对JavaScript的迷恋已经不是什么秘密了;node.js作为服务器端,AngularJS作为客户端,某种程度上说,我们的堆栈是用它建成的.我们构建静态客户端和RESTful J ...
比较2个文件内容不同行的shell脚本
第一种:grep命令法命令如下:grep -vxFf file1 file2 > a.txt 其中file2是大文件,file1是小文件第一种:comm命令法命令如下:comm file ...
java编写简单的语法分析预测程序
编译原理课程中,编了一个简单的语法分析预测程序,这个程序时根据固定的文法得到预测分析表,然后编写程序来判断表达式是否会正确推到出来. 前提是程序没有左递归符合LL(1)文法: 文法如下: E→TE' ...
互联网轻量级框架SSM-查缺补漏第二天
简言:第一天没咋看,因为看的时候已经是下午了.今天上午也因为工作上的事没咋看,本来想按照天去写的,但是内容会太散吧.我决定把整块的内容放在一起写了.天数啥的,就那样把. 还有,我只是言简意赅的去总结一 ...
Java温故而知新（7）Object类及其方法讲解
一.java.lang.Object java.lang包在使用的时候无需显示导入,编译时由编译器自动导入. Object类是类层次结构的根,Java中所有的类从根本上都继承自这个类. Object类 ...
Uva 1378 - A Funny Stone Game
1378 - A Funny Stone Game Time limit: 3.000 seconds The funny stone game is coming. There are n pile ...
7、srpingboot改变JDK版本
在pom.xml中加上 <plugin> <artifactId>maven-compiler-plugin</artifactId> <configurat ...
thinkphp多表联合查询
1.两个表查询 $userid=session('user.id'); $user = M('cuser'); $data = $user->field('projectno')->whe ...
html和css入门（三）
文本样式 color 文本颜色属性名 color 属性值预定义的颜色名 | 十六进制值的颜色值 | RGB颜色值默认值依赖用户代理描述设置文本的颜色 direction 文本方向( 属性名 ...

phonegap 的指南针 api Compass

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

随机推荐

热门专题