一、 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. 为 “超级大脑”构建支撑能力，腾讯云聚焦AI技术落地

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 5月24日,以"无界数据.无限智能"为主题的2018腾讯"云+未来"峰会AI大数据分论坛在广州拉开帷 ...

  2. Mybatis Dao开发的两种方式（一）

     原始Dao的开发方式: 1.创建数据库配置文件db.properties jdbc.driver=com.mysql.jdbc.Driver jdbc.url=jdbc:mysql://localh ...

  3. ExtJs6自定义scss解决actionColum中iconCls图标不能调样式的问题

    问题:图标样式不对,icon(本地图片)是对的,iconCls(引用的)样式不对 查ExtJs6的API里面说,可以用style添加样式,然而并没有作用 最后在该文件树下建立scss,最好和view文 ...

  4. [转]如何在 .Net Framework 4.0 项目上使用 OData？

    本文转自:http://www.cnblogs.com/fiozhao/p/3536469.html 最新的 Microsoft ASP.NET Web API 2.1 OData 5.1.0 已只能 ...

  5. Linux 上安装Docker 并部署netcor2.1

    述 容器,顾名思义是用来存放并容纳东西的器皿: 而容器技术伴着Docker的兴起也渐渐的映入大家的眼帘,它是一个抽象的概念,同时也是默默存在世上多年的技术,不仅能使应用程序间完全的隔离,而且还能在共享 ...

  6. mac 好用软件地址存储

    Navicat Premium 12.0.24 for mac已破解中文 https://www.52pojie.cn/thread-727433-1-1.html sublime 破解方法https ...

  7. 前端(五)：JavaScript面向对象之内建对象

    一.数据类型 js中数据类型分为两种,原始数据累次能够和引用数据类型. 1.原始数据类型 Undefined.Null.Boolean.Number.String是js中五种原始数据类型(primit ...

  8. jvm内置锁synchronized不能被中断

    很久没看技术书籍了,今天看了一下<七周七并发模型>前面两章讲的java,写的还是有深度的.看到了一个有demo,说jvm内置锁synchronized是不能被中断的.照着书上写了个demo ...

  9. 【转】mouseover和mouseenter的区别

    一.当绑定着两个事件的元素里面没有子元素的时候,这两个事件的触发效果是一致的: x=0; y=0; $(document).ready(function(){ $("div.over&quo ...

  10. 配置centos7 网卡

    进入root模式,输入 cd /etc/sysconfig/network-scripts/ 按Tab键查看网卡配置文件名称,然后进入编辑: 如: cd /etc/sysconfig/network- ...