当前位置：首页 > JavaScript

js 实现指南针

2026-01-30 19:20:04JavaScript

使用 JavaScript 实现指南针功能

通过浏览器的 DeviceOrientation API 获取设备方向数据，结合 CSS 和 HTML 实现指南针效果。

获取设备方向数据

监听 deviceorientation 事件，获取设备的朝向角度（alpha 值）。alpha 表示设备绕 Z 轴的旋转角度（0 到 360 度），即指南针方向。

window.addEventListener('deviceorientation', (event) => {
  const alpha = event.alpha; // 设备朝向角度
  updateCompass(alpha);
});

更新指南针显示

将获取的角度值应用到指南针元素的旋转样式上。

function updateCompass(degree) {
  const compassElement = document.getElementById('compass');
  compassElement.style.transform = `rotate(${degree}deg)`;
}

HTML 结构

创建一个简单的指南针 UI，通常包含一个圆形背景和指针。

<div id="compass-container">
  <div id="compass">
    <div class="pointer"></div>
  </div>
</div>

CSS 样式

为指南针添加基本样式和动画效果。

#compass-container {
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

#compass {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #f0f0f0;
  position: relative;
  transition: transform 0.1s ease;
}

.pointer {
  width: 5px;
  height: 50%;
  background-color: red;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

兼容性处理

检查浏览器是否支持 DeviceOrientation API，并提供回退方案。

if (!window.DeviceOrientationEvent) {
  alert('您的浏览器不支持设备方向检测');
} else {
  window.addEventListener('deviceorientation', handleOrientation);
}

权限请求

在 iOS 13+ 等现代浏览器中，可能需要请求设备方向权限。

function requestPermission() {
  if (typeof DeviceOrientationEvent !== 'undefined' && 
      typeof DeviceOrientationEvent.requestPermission === 'function') {
    DeviceOrientationEvent.requestPermission()
      .then(response => {
        if (response === 'granted') {
          window.addEventListener('deviceorientation', handleOrientation);
        }
      });
  }
}

完整示例

整合所有代码的完整实现示例。

js 实现指南针

<!DOCTYPE html>
<html>
<head>
  <style>
    #compass {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background: #f0f0f0;
      position: relative;
      margin: 20px auto;
    }
    #pointer {
      width: 4px;
      height: 100px;
      background: red;
      position: absolute;
      top: 0;
      left: 50%;
      transform-origin: bottom;
    }
  </style>
</head>
<body>
  <div id="compass">
    <div id="pointer"></div>
  </div>
  <script>
    function handleOrientation(event) {
      const degree = event.alpha;
      document.getElementById('pointer').style.transform = `rotate(${degree}deg)`;
    }

    if (window.DeviceOrientationEvent) {
      if (typeof DeviceOrientationEvent.requestPermission === 'function') {
        document.body.addEventListener('click', () => {
          DeviceOrientationEvent.requestPermission()
            .then(permissionState => {
              if (permissionState === 'granted') {
                window.addEventListener('deviceorientation', handleOrientation);
              }
            });
        });
      } else {
        window.addEventListener('deviceorientation', handleOrientation);
      }
    } else {
      alert('您的浏览器不支持指南针功能');
    }
  </script>
</body>
</html>