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> </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> </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>