js 实现指南针
使用 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);
}
});
}
}完整示例
整合所有代码的完整实现示例。
<!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>注意事项
- 在 iOS 设备上需要用户手势（如点击）才能触发权限请求
- 某些设备可能需要校准指南针
- 在 HTTPS 环境下才能可靠工作
- 不同浏览器对
alpha值的处理可能略有差异
通过以上方法，可以实现一个基本的浏览器端指南针功能。实际应用中可根据需要添加更多功能如度数显示、校准按钮等。
