Posso usare Javascript per ottenere la direzione della bussola per iOS e Android?

Question

Posso usare Javascript in modo multipiattaforma per ottenere la direzione della bussola in iOS e Android (con Chrome), senza utilizzare qualcosa come PhoneGap? So che iOS ha DeviceOrientationEvent, ma non riesco a trovare alcun equivalente su Chrome per Android.

Answer 1

Sì, è possibile! Sfortunatamente il alpha non funziona su iPhone/iPad. Con Mobile Safari, alpha si basa sulla direzione in cui il dispositivo puntava quando è stato richiesto per la prima volta l'orientamento del dispositivo. Il kit web incluso ti offre la direzione della bussola. Per farlo funzionare per tutti gli altri browser (che tutti i supporti alpha come compassheading) è possibile utilizzare il seguente codice JavaScript:

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 supporta anche Webkit, così sarebbe anche usare event.webkitCompassHeading, ma va bene.

BTW: "oncompassneedscalibration" non è supportato anche per iPhone e iPad.

Answer 2

io credo che si possa utilizzare il campo "voce" dell'oggetto posizione, da navigator.geolocation, vedere qui:

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

non conosco altro modo.

Speranza che aiuta, A.

Answer 3

Come primer si dovrebbe rivedere this previous related StackOverflow answer e avere familiarità con il generale practical considerations for using DeviceOrientation Events nelle applicazioni web.

La soluzione semplice che ho fornito in my previous related StackOverflow answer applica solamente ai browser che implementano absolute eventi deviceorientation (cioè dove il browser deviceorientation alpha proprietà è bussola -oriented). Ciò significa che la soluzione fornita al momento funziona solo nei browser Android e non nei browser basati su iOS o in qualsiasi altro browser che non fornisce dati relativi all'orientamento della periferica basati su absolute.

Per ottenere in modo affidabile l'attuale direzione della bussola attraverso sia Android e iOS browser oggi è necessario gestire entrambi i absolute e non absolute implementazioni che forniscono l'ulteriore webkitCompassHeading proprietà e fare in modo di tenere conto di eventuali modifiche orientamento attuale dello schermo come parte di tale . AFAIK l'unica libreria che attualmente lo fa è Full Tilt JS (disclaimer: sono l'autore di questa libreria).

Il seguente codice vi darà la stessa corretta bussola di attraversare sia per iOS e browser Android, tenendo conto delle differenze in un dispositivo di implementazioni di orientamento e applica ogni orientamento dello schermo runtime necessari trasforma troppo:

<!-- 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> 

Ecco a demo che dimostra questa tecnica per ottenere la direzione della bussola che l'utente sta affrontando. Dovrebbe funzionare bene su entrambi i browser iOS e Android.

L'implementazione del codice in quella demo è come mostrato sopra e può essere visualizzata su Github allo ./scripts/compass.js:L268-L272.

Answer 4

Su Chrome per Android, è possibile utilizzare 'deviceorientationabsolute' listener di eventi:

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

Vedi this article a Google Web Developer Documentation.

Testato su Chrome 63 per Android.