• 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>
  • 相关阅读:
    IOS 11 通讯录手机号「隐形字符」的 Bug
    本地添加const参数 防止短信接口恶意调用
    javascript阿拉伯数字 转 汉字中文数字
    js去掉数组的空字符串
    Chrome 清除某个特定网站下的缓存
    vue-cli中的babel配置文件.babelrc详解
    提交到github报错Please tell me who you are
    跨域问题
    js单线程、js任务队列、异步操作
    Java 异常
  • 原文地址:https://www.cnblogs.com/LO-ME/p/4579441.html
Copyright © 2020-2023  润新知