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>