我可以使用Javascript来获取iOS和Android的指南针标题吗？

Question

我可以在跨平台的方式中使用Javascript来获取iOS和Android（使用Chrome）的指南针标题，而无需使用像PhoneGap这样的东西吗？我知道iOS有DeviceOrientationEvent，但我在Chrome for Android上找不到任何等价物。

Answer 1

是的你可以！不幸的是，alpha无法在iPhone / iPad上运行。使用Mobile Safari时，alpha基于首次请求设备方向时设备指向的方向。随附的webkit为您提供指南针标题。要使其适用于所有其他浏览器（所有浏览器都支持alpha作为compassheading），您可以使用以下Javascript代码：

if (window.DeviceOrientationEvent) {
  // Listen for the deviceorientation event and handle the raw data
  window.addEventListener('deviceorientation', function(eventData) {
    var compassdir;

    if(event.webkitCompassHeading) {
      // Apple works only with this, alpha doesn't work
      compassdir = event.webkitCompassHeading;  
    }
    else compassdir = event.alpha;
  });
}

Android也支持Webkit，所以也会使用event.webkitCompassHeading，但没关系。

顺便说一句：iPhone和iPad也不支持“oncompassneedscalibration”。

Answer 2

作为入门读物，您应该查看this previous related StackOverflow answer并熟悉Web应用程序中的常规practical considerations for using DeviceOrientation Events。

我在my previous related StackOverflow answer中提供的简单解决方案仅适用于实现absolute deviceorientation事件的浏览器（即设备方向alpha属性面向罗盘的浏览器）。这意味着目前提供的解决方案仅适用于Android浏览器，而不适用于基于iOS的浏览器或任何其他不提供基于absolute的设备定向事件数据的浏览器。

为了可靠地获取当前Android和iOS浏览器的当前罗盘标题，您需要同时处理提供额外absolute属性的absolute和非webkitCompassHeading实现，并确保考虑当前屏幕方向的任何变化。 AFAIK目前唯一的这个库是Full Tilt JS（免责声明：我是这个库的作者）。

以下代码将为iOS和Android浏览器提供相同的正确罗盘标题，同时考虑到设备方向实现的差异以及应用任何必要的运行时屏幕方向变换：

<!-- Include the Full Tilt JS library from https://github.com/richtr/Full-Tilt-JS -->
<script src="fulltilt-min.js"></script>

<script>

  // Obtain a new *world-oriented* Full Tilt JS DeviceOrientation Promise
  var promise = FULLTILT.getDeviceOrientation({ 'type': 'world' });

  // Wait for Promise result
  promise.then(function(deviceOrientation) { // Device Orientation Events are supported

    // Register a callback to run every time a new 
    // deviceorientation event is fired by the browser.
    deviceOrientation.listen(function() {

      // Get the current *screen-adjusted* device orientation angles
      var currentOrientation = deviceOrientation.getScreenAdjustedEuler();

      // Calculate the current compass heading that the user is 'looking at' (in degrees)
      var compassHeading = 360 - currentOrientation.alpha;

      // Do something with `compassHeading` here...

    });

  }).catch(function(errorMessage) { // Device Orientation Events are not supported

    console.log(errorMessage);

    // Implement some fallback controls here...

  });

</script>

这是一个demo，演示了这种技术，以获得用户正面临的罗盘方向。它应该适用于iOS和Android浏览器。

该演示中代码的实现如上所示，可以在./scripts/compass.js:L268-L272的Github上查看。

Answer 3

在Chrome for Android上，您可以使用'deviceorientationabsolute'事件监听器：

if ('ondeviceorientationabsolute' in window) {
  // Chrome 50+ specific
  window.addEventListener('deviceorientationabsolute', handleOrientation);
} else if ('ondeviceorientation' in window) {
  window.addEventListener('deviceorientation', handleOrientation);
}

function handleOrientation(event) {
  var alpha;
  if (event.absolute) {
    alpha = event.alpha;
  } else if (event.hasOwnProperty('webkitCompassHeading')) {
    // get absolute orientation for Safari/iOS
    alpha = 360 - event.webkitCompassHeading; // conversion taken from a comment on Google Documentation, not tested
  } else {
    console.log('Could not retrieve absolute orientation');
  }

  console.log('Absolute orientation: ' + alpha);
}

请参阅Google Web Developer Documentation中的this article。

在Chrome 63 for Android上测试过。

Answer 4

我相信你可以使用位置对象的“标题”字段，从navigator.geolocation，请看这里：

https://developer.mozilla.org/en-US/docs/WebAPI/Using_geolocation

我不知道别的办法。

希望它有所帮助，A。