Android 横向模式下的方向不正确

Question

我正在尝试在我的网络应用程序中获得正确的方向。在 iOS 上，

event.webkitCompassHeading

工作得很好，但在 Android 上，它要么是未定义的，要么返回 NaN。

在Google上搜索后，我发现了这样的代码：

headingMio = Math.round(roundedAlpha + 85) % 360;
if (headingMio < 0) {
    headingMio += 360; 
}

但它在横向模式下不起作用。我该如何解决这个问题？这是我的代码：

let lastHeading = null;
    let threshold = 5;
    let threshold2 = 15;

    document.addEventListener('click', async function requestOrientationPermission() {
        if (typeof DeviceOrientationEvent.requestPermission === 'function') {
            try {
                const permissionState = await DeviceOrientationEvent.requestPermission();
                if (permissionState === 'granted') {
                    console.log("Permesso concesso per l'orientamento del dispositivo.");
                    // Aggiungi l'event listener per l'orientamento
                    window.addEventListener('deviceorientation', handleDeviceOrientation);
                    document.removeEventListener('click', requestOrientationPermission);
                } else {
                    console.log("Permesso negato per l'orientamento del dispositivo.");
                }
            } catch (error) {
                console.error('Errore nel richiedere il permesso:', error);
            }
        } else {
            window.addEventListener('deviceorientation', handleDeviceOrientation);
        }
    });

    // Funzione che gestisce i dati di orientamento del dispositivo
    function handleDeviceOrientation(event) {
        roundedAlpha = Math.round(360 - event.alpha);
        roundedBeta = Math.round(event.beta);
        roundedGamma = Math.round(event.gamma);

        headingMio = Math.round(event.webkitCompassHeading);

        if (headingMio === undefined || isNaN(headingMio)) {
            if (roundedBeta > 80 && roundedBeta < 105) {
               //not worikng landscape
            } else {
                headingMio = Math.round(roundedAlpha + 85) % 360;
                if (headingMio < 0) {
                    headingMio += 360; 
                }
            }
        }

        const c = document.getElementById("orientation");

        if (lastHeading === null || Math.abs(headingMio - lastHeading) > threshold) {
            lastHeading = headingMio;

            c.innerText = `Alpha (Z): ${roundedAlpha}, Beta (X - Inclinazione avanti/indietro): ${roundedBeta}, Gamma (Y - Inclinazione laterale): ${roundedGamma}, Nord Magnetico (Compass Heading): ${headingMio}`;

            if (!isNaN(headingMio)) {
                map.setHeading(parseInt(headingMio, 10));
            }
        }

        c.innerText = `Alpha (Z): ${roundedAlpha}, Beta (X - Inclinazione avanti/indietro): ${roundedBeta}, Gamma (Y - Inclinazione laterale): ${roundedGamma}, Nord Magnetico (Compass Heading): ${headingMio}`;

    }

Answer 1

这是代码的修改版本，其中包括横向模式处理：

let lastHeading = null;
let threshold = 5;

document.addEventListener('click', async function requestOrientationPermission() {
    if (typeof DeviceOrientationEvent.requestPermission === 'function') {
        try {
            const permissionState = await DeviceOrientationEvent.requestPermission();
            if (permissionState === 'granted') {
                console.log("Permission granted for device orientation.");
                window.addEventListener('deviceorientation', handleDeviceOrientation);
                document.removeEventListener('click', requestOrientationPermission);
            } else {
                console.log("Permission denied for device orientation.");
            }
        } catch (error) {
            console.error('Error requesting permission:', error);
        }
    } else {
        window.addEventListener('deviceorientation', handleDeviceOrientation);
    }
});

// Function to handle device orientation data
function handleDeviceOrientation(event) {
    const roundedAlpha = Math.round(event.alpha);
    const roundedBeta = Math.round(event.beta);
    const roundedGamma = Math.round(event.gamma);

    let headingMio;

    // Check if webkitCompassHeading is available
    if (event.webkitCompassHeading !== undefined) {
        headingMio = Math.round(event.webkitCompassHeading);
    } else {
        // Handle the case when webkitCompassHeading is not available
        headingMio = (roundedAlpha + (window.orientation || 0) + 360) % 360;
    }

    const c = document.getElementById("orientation");

    // Update the displayed orientation values
    if (lastHeading === null || Math.abs(headingMio - lastHeading) > threshold) {
        lastHeading = headingMio;

        c.innerText = `Alpha (Z): ${roundedAlpha}, Beta (X): ${roundedBeta}, Gamma (Y): ${roundedGamma}, Magnetic North (Compass Heading): ${headingMio}`;

        if (!isNaN(headingMio)) {
            map.setHeading(parseInt(headingMio, 10));
        }
    }
}