如何在 JavaScript 中获取方向

有时候，我们需要在 JavaScript 中获取设备的方向，以便能够在应用程序中使用方向信息。本文将介绍三种不同的方法来获取设备的方向。

使用 deviceorientation 事件

deviceorientation 事件在设备方向发生变化时触发，可以通过监听该事件来获取设备的方向。该事件返回三个属性值：alpha、beta 和 gamma。其中，alpha 是设备绕着垂直于设备平面的轴旋转时的角度值，beta 是设备向前或向后倾斜时的角度值，gamma 是设备向左或向右倾斜时的角度值。

以下是监听 deviceorientation 事件的代码：

window.addEventListener("deviceorientation", function(event) {
  var alpha = event.alpha;
  var beta = event.beta;
  var gamma = event.gamma;
  // 处理方向信息
}, true);

使用 compass API

Compass API 提供了一个方式来访问设备的方向，该方式使用全局 CompassHeading 对象来获取方向。使用该方法需要先请求用户的允许以访问设备方向。

下面是请求用户许可并获取方向信息的代码：

if (window.DeviceOrientationEvent && 'function' === typeof window.DeviceOrientationEvent.requestPermission) {
  document.querySelector('#permission').addEventListener('click', function() {
    // 请求用户授权
    DeviceOrientationEvent.requestPermission().then(function(response) {
      if (response == 'granted') {
        // 访问设备方向信息
        window.addEventListener('deviceorientation', function(event) {
          var alpha = event.alpha;
          var beta = event.beta;
          var gamma = event.gamma;
          // 处理方向信息
        });
      }
    });
  });
}

使用 gyroscope API

Gyroscope API 提供了一个方式来访问设备的方向，该方式使用全局 Gyroscope 对象来获取方向。使用该方法需要先请求用户的允许以访问设备方向。

下面是请求用户许可并获取方向信息的代码：

if (window.DeviceOrientationEvent && 'function' === typeof window.DeviceOrientationEvent.requestPermission) {
  document.querySelector('#permission').addEventListener('click', function() {
    // 请求用户授权
    DeviceOrientationEvent.requestPermission().then(function(response) {
      if (response == 'granted') {
        // 访问设备方向信息
        var sensor = new Gyroscope();
        sensor.addEventListener('reading', function() {
          var x = sensor.x;
          var y = sensor.y;
          var z = sensor.z;
          // 处理方向信息
        });
        sensor.start();
      }
    });
  });
}

以上就是三种获取设备方向的方法。可以根据实际需求来选择合适的方法来获取设备方向信息。