【小编推荐】phonegap 的指南针api Compass

2014-05-21   |   发布者:梁国芳   |   查看:3320次

app开发
一、Compass 介绍方法参数

      Compass 也就是,常说的指南针,又叫罗盘

      方法
          compass.getCurrentHeading
          compass.watchHeading

          compass.clearWatch
          compass.watchHeadingFilter (obsolete)
          compass.clearWatchFilter (obsolete)

      参数
          compassSuccess

          compassError
          compassOptions
          compassHeading

二、compass.getCurrentHeading             对象

改对象主要获取罗盘的当前朝向。

navigator.compass.getCurrentHeading(compassSuccess, compassError, compassOptions);

compassSuccess 成功的回调函数
compassError 失败的回调函数
compassOptions 获取指南针信息时的一个选项例如:频率,它一般为一个json                            对象在

 (compass.watchHeading )中用

function onSuccess(heading) {
    alert('Heading: ' + heading.magneticHeading);

----------------------- Page 2-----------------------

};
function onError(error) {

     alert('CompassError: ' error.code);
};

navigator.compass.getCurrentHeading(onSuccess, onError);

回调成功后会用到compassHeading 对象

     magneticHeading:罗盘在某一时刻的朝向,取值范围是0 - 359.99 度。(数字类型)
     trueHeading :罗盘在某一时刻相对于北极的朝向,取值范围是0 - 359.99 度。如果是负
值则表明该参数不确定。(数字类型)

     headingAccuracy:实际度数和记录度数之间的偏差。(数字类型)
     timestamp:确定罗盘朝向的时刻.。(毫秒数)

简单列子:

<!DOCTYPE html>
<html>
<head>

<title>Compass Example</title>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8">

     // 等待加载PhoneGap
     document.addEventListener("deviceready", onDeviceReady, false);
     // PhoneGap 加载完毕

     function onDeviceReady() {
           navigator.compass.getCurrentHeading(onSuccess, onError);
     }

     // onSuccess:   返回当前的朝向数据
     function onSuccess(heading) {
          alert('Heading: ' + heading.magneticHeading);

     }
     // onError:  返回朝向数据失败
     function onError(compassError) {

          alert('Compass Error: ' + compassError.code);
     }
</script>

</head>
<body>
     <h1>Example</h1>

     <p>getCurrentHeading</p>

----------------------- Page 3-----------------------

</body>
</html>

三、compass.watchHeading 对象

说明:

罗盘是一个检测设备方向或朝向的传感器,使用度作为衡量单位,取值范围从0 度到359.99 度。

compass.watchHeading 每隔固定时间就获取一次设备的当前朝向。每次取得朝向后,headingSuccess 回调函

数会被执行。通过compassOptions 对象的frequency 参数可以设定以毫秒为单位的时间间隔。

返回的watch   ID 是罗盘监视周期的引用,可以通过compass.clearWatch 调用该watch   ID  以停止对罗盘的监

视。

var watchID = navigator.compass.watchHeading(compassSuccess,
                          compassError, [compassOptions]);

var options = {

     frequency: 3000
};
var watchID = navigator.compass.watchHeading(onSuccess, onError, options);

通过clearWatch 来停止对罗盘的检测

watchID:由compass.watchHeading 返回的引用标示。

navigator.compass.clearWatch(watchID);

<!DOCTYPE html>

<html>

<head>

<title>Compass Example</title>

<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>

<script type="text/javascript" charset="utf-8">

     // watchID 是当前“watchHeading ”的引用

     var watchID = null;

     // 等待加载PhoneGap

     document.addEventListener("deviceready", onDeviceReady, false);

     // PhoneGap 加载完毕

     function onDeviceReady() {

           startWatch();

     }

----------------------- Page 4-----------------------

      //  开始监视罗盘

      function startWatch() {

            //  每隔3 秒钟更新一次罗盘数据

            var options = { frequency: 3000 };

            watchID = navigator.compass.watchHeading(onSuccess, onError, options);

      }

      //  停止监视罗盘

      function stopWatch() {

            if (watchID) {

                   navigator.compass.clearWatch(watchID);

                  watchID = null;

            }

      }

      // onSuccess:   返回罗盘的当前朝向

      function onSuccess(heading) {

            var element = document.getElementById('heading');

            element.innerHTML = 'Heading: ' + heading.magneticHeading;

      }

      // onError:  获取罗盘朝向失败

      function onError(compassError) {

            alert('Compass error: ' + compassError.code);

      }

</script>

</head>

<body>

      <div id="heading">Waiting for heading...</div>

      <button"startWatch();">Start Watching</button>

      <button"stopWatch();">Stop Watching</button>

</body>

</html>