js调用手机方向感应,指北针功能 iOS Safari/WebKit对DeviceOrientationEvent的实现

原创 15342886500 教程 javascript 243阅读 2017-12-19 10:11:11 举报

最近开发webApp的地图导航功能,其中用到定位及方向感言指北针功能,手机H5也可以调用相应的接口。

 <html>  
     <head>  
        <title>DeviceOrientationEvent</title>  
        <meta charset="UTF-8" />  
    </head>  
     <body>  
         <p>左右:<span id="alpha">0</span></p>  
         <p>前后:<span id="beta">0</span></p>  
        <p>扭转:<span id="gamma">0</span></p>  
         <p>指北针指向:<span id="heading">0</span>度</p>  
        <p>指北针精度:<span id="accuracy">0</span>度</p>  
        <script type="text/javascript">  
        function orientationHandler(event) {  
             document.getElementById("alpha").innerHTML = event.alpha;  
            document.getElementById("beta").innerHTML = event.beta;  
       document.getElementById("gamma").innerHTML = event.gamma;  
         document.getElementById("heading").innerHTML = event.webkitCompassHeading;  
         document.getElementById("accuracy").innerHTML = event.webkitCompassAccuracy;  
    }  

     if (window.DeviceOrientationEvent) {  
       window.addEventListener("deviceorientation", orientationHandler, false);  
     } else {  
       document.body.innerHTML = "What user agent u r using???";  
         }  
         </script>  
     </body>  

</html>

js调用手机方向感应,指北针功能iOSSafari/WebKit对DeviceOrientationEvent的实现
在handler的event参数中可以获得5个属性,其中两个:
webkitCompassHeading:与正北方向的角度差值。正北为0度,正东为90度,正南为180度,正西为270度。因为0度是正北,所以叫指北针,不是指南针。
webkitCompassAccuracy:指北针的精确度,表示偏差为正负多少度。一般是10。

1. deviceorientation 事件对象  
2. 事件对象包含着每个轴相对于设备静止状态下发生变化的信息。  
3.   
4. 设备坐标系的概念:x 轴方向是从左往右,y 轴方向是从下往上,z 轴方向是从后往前。当设备静止放在水平桌面时,这三个值都是 0。  
5.   
6. 其中三个主要的属性:  
7.   
8. alpha: 在围绕 z 轴旋转时(即左右旋转时),y 轴的度数差。  
9. beta: 在围绕 x 轴旋转时(即前后旋转时),z 轴的度数差。  
10. gamma: 在围绕 y 轴旋转时(即扭转设备时),z 轴的度数差。  

1. 围绕 x 轴旋转,也就是前后翻转(朝着用户或者远离用户)时,会引起 beta 旋转角度变化。  
2.   
3. 设备水平放置时,beta 角度是 0 度;向上翻逐步增加到 180 度;向下翻减少到 -180 度。 

js调用手机方向感应,指北针功能iOSSafari/WebKit对DeviceOrientationEvent的实现

  1. 围绕 z 轴旋转会引起 alpha 旋转角度发生变化。
  2. [ ] 当设备顶部指向地球正北方向时,alpha 角是 0 度,设备向左边旋转时增大,介于 0 - 360 度之间。

js调用手机方向感应,指北针功能iOSSafari/WebKit对DeviceOrientationEvent的实现

1. 围绕 y 轴旋转,会引起 gamma 角度值的变化。  
2.   
3. 水平放置角度是 0,向右拧增加到 90 度;向左拧减少到 -90 度。  

js调用手机方向感应,指北针功能iOSSafari/WebKit对DeviceOrientationEvent的实现

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复