使用 JavaScript 访问 iPhone 指南针

Posted 2023-04-14

【中文标题】使用 JavaScript 访问 iPhone 指南针

【英文标题】：accessing iPhone compass with JavaScript

【发布时间】：2011-02-03 14:05:25

【问题描述】：

知道是否可以使用 javascript 在 Safari 中访问 iPhone 指南针？我看到how the GPS can be accessed，但我不知道指南针。

【问题讨论】：

刚刚注意到今天发布的这个 W3C Compass API 草案：dev.w3.org/2009/dap/system-info/compass.html 所以也许这种功能会有所到来。

在 ios5 中，您可以使用 webkitCompassHeading 查看指南针this documentation

【参考方案1】：

在 iOS 上，您可以像这样检索 compass 值。

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

有关更多信息，请阅读Apple DeviceOrientationEvent 文档。 希望这会有所帮助。

【参考方案2】：

您无法通过 javascript 访问该信息，除非您使用 iPhoneGap 之类的东西

当时确实如此，在 iOS 5 中，您可以在 JS 中使用指南针方向。 https://developer.apple.com/documentation/webkitjs/deviceorientationevent/1804777-webkitcompassheading

【讨论】：

这个答案不再正确，iOS 4.2 提供了webkitCompassHeading，看看awoodland 的答案

【参考方案3】：

对于 android，它可以自动运行，对于 iOS，它需要单击才能启动。 这是您可以使用的部分代码

startBtn.addEventListener("click", startCompass);

function startCompass() 
  if (isIOS) 
    DeviceOrientationEvent.requestPermission()
      .then((response) => 
        if (response === "granted") 
          window.addEventListener("deviceorientation", handler, true);
         else 
          alert("has to be allowed!");
        
      )
      .catch(() => alert("not supported"));
   else 
    window.addEventListener("deviceorientationabsolute", handler, true);
  


function handler(e) 
  const degree = e.webkitCompassHeading || Math.abs(e.alpha - 360);

完整教程在这里，也可以尝试演示 https://dev.to/orkhanjafarovr/real-compass-on-mobile-browsers-with-javascript-3emi

【参考方案4】：

我建议你在这个插件中使用 LeafletJS https://github.com/stefanocudini/leaflet-compass

与事件和方法一起使用非常简单。

您可以在这里尝试演示：https://opengeo.tech/maps/leaflet-compass/