Question

我正在构建基于谷歌地图的网站，我正在尝试整合指南针（获取移动绝对标题），但问题是我只获得了iPhone的绝对标题，而android总是给我相对标题到我加载页面的方向。

我怎样才能获得相对于北方的android标题？

现在是我的代码：

if (window.DeviceOrientationEvent && mobile) {
    window.addEventListener('deviceorientation', function(event) {
        var dir;
        if (event.webkitCompassHeading) {
            // Apple works only with this, alpha doesn't work
            dir = event.webkitCompassHeading + 180; 
        } else { 
            //tried also event.alpha...
            dir = event.absolute;
        }

        var arrowPath = {
            path: 'M -50 120 L 50 120 L 000 170 z',
            fillColor: black,
            fillOpacity: 1,
            scale: 0.1,
            strokeOpacity: 0,
            strokeColor: 'white',
            strokeWeight: 1,
            rotation: dir
        };

        userDirection.setIcon(arrowPath);
    });
}

Answer 1

since 2016（Chrome的DeviceOrientationEvent）不正式支持绝对定位：

从Chrome 50开始，默认情况下，DeviceOrientationEvent不再是绝对的到地球的坐标系。这意味着 DeviceOrientationEvents仅应在实际发生时触发设备加速度计的某种组合所检测到的运动和陀螺仪。磁力计，以及由于磁场导致的错误读数场波动不在图片之内。

奇怪的是，实际上它确实适用于iPhone的Chrome浏览器，并且您可以使用event.webkitCompassHeading产生绝对方向，而在Android中，它相对于加载时的初始方向。

我的解决方案正在使用DeviceOrientationAbsolute（non-standard，并且不是很漂亮）：

if (isiOS) {
    window.addEventListener('deviceorientation', manageCompass)
} else if (isAndroid) {
    window.addEventListener("deviceorientationabsolute", manageCompass, true);
}

function manageCompass(event) {
    if (event.webkitCompassHeading) {
        absoluteHeading = event.webkitCompassHeading + 180;
    } else {
        absoluteHeading = 180 - event.alpha;
    }
    console.log(absoluteHeading);
}

Another helpful answer（也适用于网络浏览器，不仅适用于Cordova）。

Exampled here（在移动设备中）

Answer 2

目前此选项在Android中不可用。等待下一个Android更新8.0

针对Android的JS HTML检测/获取指南针标题

2 个答案: