使用 Javascript 从 Web 应用程序访问设备指南针答案

【问题标题】：Access device compass from web app with Javascript使用 Javascript 从 Web 应用程序访问设备指南针
【发布时间】：2011-08-20 14:40:16
【问题描述】：

是否可以通过网络应用在 iphone/android 设备上使用 Javascript 访问指南针？我已经在网上找了几个小时了，我知道你可以通过

访问加速度计

window.ondevicemotion = 函数（事件）

有谁知道您是否可以从指南针获取信息？？

【问题讨论】：

自从this question 被问到之后，事情可能已经发生了变化，所以我不打算投票结束，但它是另一个相同的问题。
你看到了……但是随着 4.2 的发布，更多的功能可以访问，也就是加速度计和陀螺仪。 peterfriese.de/…
我读过那篇文章，让我想知道指南针功能现在是否也可用......会很酷！

标签： web-applications mobile compass-geolocation

【解决方案1】：

在 iPhone 上，您可以像这样获取指南针值。

window.addEventListener('deviceorientation', function(e) {
    console.log(e.webkitCompassHeading);
}, false);

希望对您有所帮助。

【讨论】：

Android 有对应的吗？我写了一个适用于 iOS（Safari 和 Chrome）但不适用于 Android 的页面。
我猜有，可惜我不知道。

【解决方案2】：

它现在看起来是跨平台的，请通过Ruadhán O'Donoghue查看excellent article。

对于 Android，它仍然使用window.addEventListener('deviceorientation', ...)，但检查其他事件属性（event.alpha 是指南针方向；beta 和 gamma 也可用，表示倾斜）。

如果链接不可用，以下是相关部分（已改编）：

   if(window.DeviceOrientationEvent) {
      window.addEventListener('deviceorientation', function(event) {
        var alpha;
        // Check for iOS property
        if(event.webkitCompassHeading) {
          alpha = event.webkitCompassHeading;
        }
        // non iOS
        else {
          alpha = event.alpha;
          if(!window.chrome) {
            // Assume Android stock
            alpha = alpha-270;
          }
        }
      }
    }

CodePen 上提供了另一个用法示例。

【讨论】：