Kann ich Javascript verwenden, um den Kompass für iOS und Android zu erhalten?

Question

Kann ich Javascript plattformübergreifend verwenden, um den Kompass in iOS und Android (mit Chrome) zu finden, ohne etwas wie PhoneGap zu verwenden? Ich weiß, iOS hat DeviceOrientationEvent, aber ich kann keine Entsprechung für Chrome für Android finden.

Answer 1

Ja können Sie! Leider funktioniert die alpha nicht auf iPhones/iPads. Bei Mobile Safari basiert alpha auf der Richtung, in die das Gerät bei der ersten Geräteausrichtung zeigte. Das mitgelieferte Webkit bietet Ihnen die Kompassrichtung. Um es für alle anderen Browsern (die alle Träger alpha als compassheading) können Sie den folgenden JavaScript-Code verwenden können:

if (window.DeviceOrientationEvent) { 
    // Listen for the deviceorientation event and handle the raw data 
    window.addEventListener('deviceorientation', function(eventData) { 
    var compassdir; 

    if(event.webkitCompassHeading) { 
     // Apple works only with this, alpha doesn't work 
     compassdir = event.webkitCompassHeading; 
    } 
    else compassdir = event.alpha; 
    }); 
} 

Android auch Webkit unterstützt, so wäre auch verwenden event.webkitCompassHeading, aber das ist OK.

BTW: "oncompassneedscalibration" wird auch nicht für iPhones und iPads unterstützt.

Answer 2

Ich glaube, Sie das Objekt „Überschrift“ Feld der Lage zu verwenden, von navigator.geolocation finden Sie hier:

https://developer.mozilla.org/en-US/docs/WebAPI/Using_geolocation

Ich kenne keinen anderen Weg.

Hoffe, dass es hilft, A.

Answer 3

Als Primer Sie this previous related StackOverflow answer und vertraut sein mit der allgemeinen practical considerations for using DeviceOrientation Events in Webanwendungen überprüfen soll.

Die einfache Lösung, die ich in my previous related StackOverflow answer gelten nur für Browser, die absolute deviceOrientation Ereignisse (d-Browser, wo die deviceOrientation alpha Eigenschaft ist Kompass -orientierten) implementieren. Das bedeutet, dass die dort angebotene Lösung derzeit nur in Android-Browsern und nicht in iOS-basierten Browsern oder anderen Browsern funktioniert, die keine absolute -basierten Geräteorientierungs-Ereignisdaten bereitstellen.

Um zuverlässig den aktuellen Kompasskurs über Android und iOS-Browser Sie müssen heute erhalten beide absolute und nicht absolute Implementierungen behandeln, die die zusätzliche webkitCompassHeading Eigenschaft bieten und stellen Sie sicher, dass für alle aktuelle Bildschirmausrichtung Änderungen Rechnung zu tragen als Teil . AFAIK die einzige Bibliothek, die dies derzeit tut, ist Full Tilt JS (Disclaimer: Ich bin der Autor dieser Bibliothek).

Der folgende Code wird Ihnen die gleiche richtige Kompass gibt in allen Browsern sowohl iOS und Android Überschrift, unter Berücksichtigung der Unterschiede in Geräteausrichtung Implementierungen zu nehmen und all notwendige Runtime-Bildschirmausrichtung Anwendung transformiert zu:

<!-- Include the Full Tilt JS library from https://github.com/richtr/Full-Tilt-JS --> 
<script src="fulltilt-min.js"></script> 

<script> 

    // Obtain a new *world-oriented* Full Tilt JS DeviceOrientation Promise 
    var promise = FULLTILT.getDeviceOrientation({ 'type': 'world' }); 

    // Wait for Promise result 
    promise.then(function(deviceOrientation) { // Device Orientation Events are supported 

    // Register a callback to run every time a new 
    // deviceorientation event is fired by the browser. 
    deviceOrientation.listen(function() { 

     // Get the current *screen-adjusted* device orientation angles 
     var currentOrientation = deviceOrientation.getScreenAdjustedEuler(); 

     // Calculate the current compass heading that the user is 'looking at' (in degrees) 
     var compassHeading = 360 - currentOrientation.alpha; 

     // Do something with `compassHeading` here... 

    }); 

    }).catch(function(errorMessage) { // Device Orientation Events are not supported 

    console.log(errorMessage); 

    // Implement some fallback controls here... 

    }); 

</script> 

Hier a demo, die diese Technik zeigt, um die Kompassrichtung zu erhalten, auf die der Benutzer blickt. Es sollte sowohl auf iOS- als auch auf Android-Browsern funktionieren.

Die Implementierung des Codes in dieser Demo ist wie oben gezeigt und kann auf Github unter ./scripts/compass.js:L268-L272 angesehen werden.

Answer 4

On Chrome für Android können Sie 'deviceorientationabsolute' Ereignis-Listener verwenden:

if ('ondeviceorientationabsolute' in window) { 
    // Chrome 50+ specific 
    window.addEventListener('deviceorientationabsolute', handleOrientation); 
} else if ('ondeviceorientation' in window) { 
    window.addEventListener('deviceorientation', handleOrientation); 
} 

function handleOrientation(event) { 
    var alpha; 
    if (event.absolute) { 
    alpha = event.alpha; 
    } else if (event.hasOwnProperty('webkitCompassHeading')) { 
    // get absolute orientation for Safari/iOS 
    alpha = 360 - event.webkitCompassHeading; // conversion taken from a comment on Google Documentation, not tested 
    } else { 
    console.log('Could not retrieve absolute orientation'); 
    } 

    console.log('Absolute orientation: ' + alpha); 
} 

Siehe this article an Dokumentation für Entwickler Google Web.

Getestet auf Chrome 63 für Android.