在 Mobile Web / HTML5 中访问指南针数据答案

【问题标题】：Access compass data in Mobile Web / HTML5在 Mobile Web / HTML5 中访问指南针数据
【发布时间】：2018-04-06 15:47:37
【问题描述】：

我正在制作 AR 移动网络应用，我目前的目标是在相机屏幕上显示一些事件。例如，如果我的北方方向有火，我想将手机指向北方，那里应该可以看到火的标志。

我的问题是 - 我怎样才能得到绝对罗盘数据？

我试过这段 JavaScript 代码：

function compassHeading(alpha, beta, gamma) {

  var dataContainerMotion = document.getElementById('dataContainerMotion');

  // Convert degrees to radians
  var alphaRad = alpha * (Math.PI / 180);
  var betaRad = beta * (Math.PI / 180);
  var gammaRad = gamma * (Math.PI / 180);

  // Calculate equation components
  var cA = Math.cos(alphaRad);
  var sA = Math.sin(alphaRad);
  var cB = Math.cos(betaRad);
  var sB = Math.sin(betaRad);
  var cG = Math.cos(gammaRad);
  var sG = Math.sin(gammaRad);

  // Calculate A, B, C rotation components
  var rA = - cA * sG - sA * sB * cG;
  var rB = - sA * sG + cA * sB * cG;
  var rC = - cB * cG;

  // Calculate compass heading
  var compassHeading = Math.atan(rA / rB);

  // Convert from half unit circle to whole unit circle
  if(rB < 0) {
    compassHeading += Math.PI;
  }else if(rA < 0) {
    compassHeading += 2 * Math.PI;
  }

  // Convert radians to degrees
  compassHeading *= 180 / Math.PI;

  return compassHeading;

}

window.addEventListener('deviceorientation', function(evt) {

  heading = compassHeading(alpha, beta, gamma);

  dataContainerMotion.innerHTML = heading;

}, false);

但变量 absolute 显示为 false，我无法获得绝对值。指南针是根据页面初始化时手机的定位进行校准的，而不是根据地球上北方的实际位置。

如果能提供任何帮助，我将不胜感激 - 我被困在这里，如果不获取指南针数据，我将无法继续前进。

【问题讨论】：

标签： javascript html geolocation compass motion

【解决方案1】：

您没有提到您测试过的移动设备。您必须考虑一些主要的“问题”：

iOS（iPhone、iPad）设备上的 Alpha 值 = 0 启动/激活设备方向事件。如果手机当前前往东方，然后 Alpha 在东方为 0。如果您的手机正在前往 W 然后 Alpha 在 West 为 0，以此类推。
Android 中无法访问已实现的硬件指南针设备（通过 Javascript）。一些浏览器（版本）处理计算值 alpha、beta 和 gamma 不同，所以你可能有添加/分散特定角度值。这在文中也有提及 MDN Web Docs
Chrome (50+) 支持事件“ondeviceorientationabsolute” 让您的工作更轻松（至少对于 Chrome）

iOS 设备解决方案：

window.addEventListener('deviceorientation', function(event) {
  if (event.webkitCompassHeading) {
    // You may consider adding/distracting landscape/portrait mode value here
    alpha = event.webkitCompassHeading;
    if (alpha < 0) { alpha += 360; }
    if (alpha > 360) { alpha -= 360; }
  }
}

Android 设备解决方案：

使用 alpha/beta/gamma 值（如您所做的那样）。周围已经有很多好的解决方案。 “最佳”（恕我直言）可以在这里找到由 TILT 指南针 表示的：mentioned here 或直接在 GitHub

考虑到您的代码（我尚未详细检查），它无法在 iOS 设备上正常工作，甚至可能无法在所有 Android 设备上正常工作。因此，请使用 above 发布的链接中提到的 Frosty Z 之类的构造。

遗憾的是，没有 100% 可靠的代码涵盖所有类型的设备和浏览器。我仍然希望这里写的东西能有所帮助。

【讨论】：