正文 

当前位置： 首页 > 问答 >

如何在 Javascript 中为 iOS 和 Android 创建可靠的指南针？

     2023-02-16     151

关键词：

【中文标题】如何在 Javascript 中为 iOS 和 Android 创建可靠的指南针？【英文标题】：How do I create a reliable compass for iOS and Android in Javascript? 【发布时间】：2019-01-06 15:37:35 【问题描述】：

我正在尝试在 Javascript/JQuery 中创建一个可靠的指南针（使用 deviceorientation），以便它可以在 iOS 和 Android 移动设备上运行。 我知道 *** 中关于这个主题的几乎所有（非常古老的）问题/答案。我创建了一个非常简单的指南针，它在 iOS 设备上运行良好。在 Android 设备（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：使用 ondeviceorientationabsolute -> 导致描述的偏差问题 否则：考虑 alpha 的设备方向 -> 导致描述的偏差问题

我知道我还必须考虑 beta 和 gamma 轴。对于我的测试，我把手机放在桌子上，所以只有 alpha 是相关的。

通过我的研究，我发现*** (fulltilt-min.js) 中提到了一个非常先进/完整的 javascript 指南针，它考虑了所有 3 个轴。这是demo。甚至这个指南针也显示了与我的指南针完全相同的错误航向。

那么任何人都可以解释 Android 手机上的这种行为或知道如何解决这个问题吗？

【问题讨论】：

【参考方案1】：

问题在于您的 alpha 不是绝对的，这意味着 0 不是北方，而是 0 是设备在激活时指向的位置。

修复基于 chrome 的浏览器（如大多数标准 Android 浏览器）的最佳方法是使用 W3C 通用传感器 API polyfills 中的 AbsoluteOrientationSensor。 Github

我使用它的项目是基于 Typescript 的。所以这是一个 Typescript 示例：

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();

【讨论】：

如何在Javascript中为1到1000的奇数和偶数编写脚本？

】如何在Javascript中为1到1000的奇数和偶数编写脚本？【英文标题】：Howtodoascriptforoddandevennumbersfrom1to1000inJavascript?【发布时间】：2015-01-1001:53:36【问题描述】：我正在研究一本带有已解决示例的Javascript书籍，但有一个示例没有解... 查看详情

使用 Ajax 时如何在 JavaScript 和 php 中为下拉菜单设置增量值

】使用Ajax时如何在JavaScript和php中为下拉菜单设置增量值【英文标题】：HowtoSetincrementalvaluefordropdownbothinJavaScriptandphpwhileusingAjax【发布时间】：2017-03-1900:21:53【问题描述】：我正在研究多动态下拉选项，并尝试在用户单击添加按... 查看详情

如何在 javascript 中为桌面和移动设备创建不同的点击行为？

】如何在javascript中为桌面和移动设备创建不同的点击行为？【英文标题】：Howtocreatedifferentonclickbehaviorfordesktopandmobileinjavascript?【发布时间】：2012-07-2108:57:10【问题描述】：我正在开发生成一段格式化文本的简单表单（你可以看... 查看详情

如何在 Ant 构建脚本中为 javascript 和 css 使用 YUI Compressor

】如何在Ant构建脚本中为javascript和css使用YUICompressor【英文标题】：HowtouseYUICompressorinAntbuildscriptforjavascriptandcss【发布时间】：2013-05-1120:09:58【问题描述】：在寻找如何在Ant构建脚本中使用YUI压缩器的几天后，我终于让它工作了... 查看详情

如何在javascript测验中为正确的选择和错误的选择着色？

】如何在javascript测验中为正确的选择和错误的选择着色？【英文标题】：Howtocolortherightchoiceandthewrongchoiceinjavascriptquiz?【发布时间】：2020-05-1613:11:56【问题描述】：当用户选择正确答案时，我想用绿色为按钮着色，错误时用红色... 查看详情

Here Map：使用 JavaScript 在 iOS 应用程序和 Web 中为相同的起始位置和目的地绘制不同的路线

】HereMap：使用JavaScript在iOS应用程序和Web中为相同的起始位置和目的地绘制不同的路线【英文标题】：HereMap:DifferentroutesaredrawnforsamestartinglocationanddestinationiniOSappandinwebusingJavaScript【发布时间】：2020-02-1110:02:06【问题描述】：我正... 查看详情

如何在 JavaScript 中为视频播放不同的音频？

】如何在JavaScript中为视频播放不同的音频？【英文标题】：HowtoplaydifferentaudiotoavideoinJavaScript?【发布时间】：2018-01-0523:46:36【问题描述】：我正在开发一个播放MP4视频文件的视频播放器。此视频播放器播放MP4视频，其中不包含音... 查看详情

如何在 NSDictionary 中为键和对象添加数组

】如何在NSDictionary中为键和对象添加数组【英文标题】：HowtoaddarraysforkeyandobjectinNSDictionary【发布时间】：2014-09-1809:45:42【问题描述】：我有2个数组。数组AarrayA[0]包含a,b,c,d,e...并且数组BarrayB[0]包含a,b,c...。并且两个数组都是可变... 查看详情

在 javascript 中为 JWT 生成 JTI 声明

】在javascript中为JWT生成JTI声明【英文标题】：GeneratingJTIclaimforJWTinjavascript【发布时间】：2019-03-2900:51:15【问题描述】：我之所以问这个问题，是因为一位同事已经为此困扰了几天。问题是，他试图在他的JWT中使用JTI声明，但他... 查看详情

如何在javascript中为函数添加回调

】如何在javascript中为函数添加回调【英文标题】：Howtoaddacallbacktoafunctioninjavascript【发布时间】：2011-12-0306:06:34【问题描述】：我有两个javascript函数functionone()dosomethinglong...likewritingjpgfileondiskfunctiontwo()dosomethingfast...likeshowthefile我... 查看详情

如何在 Swift 中为 iOS 10 和 iOS 9.3 初始化 NSManagedObject 子类

】如何在Swift中为iOS10和iOS9.3初始化NSManagedObject子类【英文标题】：HowtoinitialiseaNSManagedObjectsubclassforiOS10andiOS9.3inSwift【发布时间】：2018-09-0417:48:58【问题描述】：我正在用Swift4编写一个应用程序，该应用程序应该可以在iOS10.4和iOS9... 查看详情

如何在 Appium 中为 iOS 自动化启用和使用 WebView

】如何在Appium中为iOS自动化启用和使用WebView【英文标题】：HowtoenableanduseWebViewforiOSAutomationinAppium【发布时间】：2016-09-1015:02:27【问题描述】：我正在尝试使用由Ionic2/Angular2/Typescript开发的Appium来自动化混合应用程序。当我尝试识... 查看详情

在phonegap中为ios压缩图像插件

...在ios中为phonegap构建压缩图像插件。我不知道如何在我的javascript中调用压缩图像方法。我的代码是Plugin.h文件-(void)cordovaCompressimg:(CDVInvokedUrlCommand*) 查看详情

如何在我的 iOS 项目中为模拟器和设备构建和集成 pjsip 2.5.5？

】如何在我的iOS项目中为模拟器和设备构建和集成pjsip2.5.5？【英文标题】：Howtobuildandintegratepjsip2.5.5forbothsimulatoranddeviceinmyiOSproject?【发布时间】：2016-08-0817:46:09【问题描述】：如何在我的项目中为sinulator和device构建和集成pjsip2.5... 查看详情

如何在 JavaScript 中为画布指定颜色空间？

】如何在JavaScript中为画布指定颜色空间？【英文标题】：HowtospecifycolorspaceforcanvasinJavaScript?【发布时间】：2021-11-1508:54:39【问题描述】：JS画布使用的默认色彩空间是什么？如何更改用于呈现HTML画布元素的色彩空间？【问题讨论... 查看详情

如何在 VSTS 中为 Xamarin iOS 和 Android 部署添加快速通道工具

】如何在VSTS中为XamariniOS和Android部署添加快速通道工具【英文标题】：HowtoaddfastlanetoolsinVSTSforXamariniOSandAndroiddeployment【发布时间】：2016-06-2819:59:05【问题描述】：我想将我的xamariniOS和android应用程序自动发布到商店中。我想知道... 查看详情

如何在 iOS 中为表格视图和滚动视图设置偏移量，以便两者一起滚动

】如何在iOS中为表格视图和滚动视图设置偏移量，以便两者一起滚动【英文标题】：HowcanIsetoffsetfortableviewandscrollviewiniOS,sothatbothscrolltogether【发布时间】：2014-04-1208:30:20【问题描述】：我想创建带有标题和数据的数据表。标题和... 查看详情

如何在同一应用程序中为 iOS 6 和 iOS 7 版本设置默认启动图像

】如何在同一应用程序中为iOS6和iOS7版本设置默认启动图像【英文标题】：HowtoSetDefaultsplashimageforbothiOS6&iOS7versioninsameApp【发布时间】：2014-03-0613:31:47【问题描述】：我正在重新设计我的应用程序以使其与iOS7兼容并且也适用于... 查看详情