如何在Javascript中为iOS和Android创建一个可靠的指南针？
如何在Javascript中为iOS和Android创建一个可靠的指南针？
提问于 2018-07-30 11:33:29
我试图在Javascript/JQuery (使用面向设备)中创建一个可靠的指南针，以便它能够在iOS和安卓移动设备上工作。我几乎知道这里关于这个话题的每一个(非常老的)问题/答案。我已经创建了一个非常简单的指南针，它在iOS设备上工作得很好。在安卓设备(Galaxy S8)上，我有一种奇怪的行为:就像每天我在测试它一样，我每天都在测试罗盘方向-45/+45，90 (北在东)，180 (北在南)或270度(北在西)。是的，我考虑了指南针的校准(8位数的移动，在测试前将手机绕着它的3轴转动)。
这是指南针的Javascript代码：
if (isIos()) // // Function in the background evaluating OS
{
window.addEventListener('deviceorientation', function(event) {
var alpha;
// Use Webkit heading for iOS
alpha = event.webkitCompassHeading;
if (alpha < 0) { alpha += 360; }
if (alpha > 360) { alpha -= 360; }
// Calculated heading
console.log (alpha);
});
}
else {
// Any other device, with Chrome browser
if ('ondeviceorientationabsolute' in window) {
// Chrome 50+ specific
window.addEventListener('deviceorientationabsolute', function (event) {
var alpha = 360 - event.alpha;
if (alpha < 0) { alpha += 360; }
if (alpha > 360) { alpha -= 360; }
// Calculated heading
console.log (alpha);
});
}
else {
window.addEventListener('deviceorientation', function (event) {
var alpha = 180 - event.alpha;
if (alpha < 0) {
alpha += 360;
}
if (alpha > 360) {
alpha -= 360;
}
// Calculated heading
console.log (alpha);
});
}
}
简言之：
- iOS (iPhone，iPad)：使用event.webkitCompassHeading ->很好
- Chrome:使用面向绝对->会导致描述的偏差问题
- 否则:考虑alpha ->的设备定位会导致所描述的偏差问题
我知道我也必须考虑贝塔和伽马轴。在我的测试中，我把手机放在桌子上，所以只有alpha是相关的。
通过我的研究，我发现了堆栈过流 (fulltilt-min.js)中提到的一个非常先进/完整的javascript指南针，它考虑了所有三个轴。这是给它的演示。就连这个指南针也和我的指南针显示的方向完全一样。
那么，谁能解释一下Android手机上的这种行为，或者知道如何解决这个问题呢？
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-03-15 15:30:12
问题是，您的alpha不是绝对的，意味着0不是北的，而是0是设备在激活时指向的位置。
修复基于铬的浏览器的最佳方法，就像大多数标准的Android浏览器一样，使用来自AbsoluteOrientationSensor的W3C通用传感器API多填充。Github
我所用的项目是基于打字本的。下面是一个打字稿的例子：
import {AbsoluteOrientationSensor} from 'motion-sensors-polyfill'
const options = { frequency: 60, referenceFrame: 'device' };
const sensor = new AbsoluteOrientationSensor(options);
sensor.addEventListener('reading', e => {
//this.zone.run() if you are using an Angular Project to run it in the context of the component.
//If you using plain Javascript, you don't need this
this.zone.run(() => {
var q = e.target.quaternion;
let alpha = Math.atan2(2*q[0]*q[1] + 2*q[2]*q[3], 1 - 2*q[1]*q[1] - 2*q[2]*q[2])*(180/Math.PI);
if(alpha < 0) alpha = 360+ alpha;
this.rotateCompassClockwise(360 - alpha)
})
});
sensor.start();页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51593068
复制相关文章
相似问题
腾讯云开发者
