Puis-je utiliser Javascript pour obtenir la tête de la boussole pour iOS et Android?

Puis-je utiliser Javascript de manière inter-plateforme pour obtenir la tête de la boussole dans iOS et Android (avec Chrome), sans utiliser quelque chose comme PhoneGap? Je sais que iOS possède DeviceOrientationEvent , mais je ne trouve aucun équivalent sur Chrome pour Android.

Oui, vous pouvez! Malheureusement, l' alpha ne fonctionne pas sur iPhones / iPads. Avec Mobile Safari, l' alpha est basé sur la direction que le périphérique pointait lorsque l'orientation du périphérique a été demandée pour la première fois. Le webkit inclus vous offre l'en-tête de la boussole. Pour que cela fonctionne pour tous les autres navigateurs (ce qui prend en charge l' alpha comme compassheading ), vous pouvez utiliser le code Javascript suivant:

 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 prend également en charge Webkit, alors utiliserait également event.webkitCompassHeading, mais c'est OK.

BTW: " oncompassneedscalibration " n'est pas pris en charge pour iPhones et iPads.

En tant qu'imprimante, vous devriez examiner cette réponse StackOverflow précédente et connaître les considérations pratiques générales concernant l'utilisation des événements DeviceOrientation dans les applications Web.

La solution simple que j'ai fournie dans ma précédente réponse StackOverflow connexe s'applique uniquement aux navigateurs qui implémentent absolute événements absolute répartition absolute périphériques (c.-à-d. Les navigateurs où la propriété alpha la direction du périphérique est orientée vers la boussole ). Cela signifie que la solution fournie ici ne fonctionne que dans les navigateurs Android et pas sur les navigateurs basés sur iOS ou sur tout autre navigateur qui ne fournit pas de données d'événement sur absolute base de absolute base de données absolute .

Pour obtenir de manière fiable le titre actuel de la boussole à la fois sur les navigateurs Android et iOS, vous devez gérer les implémentations absolute et non absolute qui fournissent la propriété webkitCompassHeading supplémentaire et assurez-vous de tenir compte de tous les changements d'orientation de l'écran en cours. AFAIK la seule bibliothèque qui fait actuellement cela est Full Tilt JS (disclaimer: je suis l'auteur de cette bibliothèque).

Le code suivant vous donnera la même ligne de compacte correcte à la fois sur les navigateurs iOS et Android, en tenant compte des différences dans les implémentations d'orientation des périphériques et en appliquant également les transformations d'orientation de l'écran d'exécution nécessaires:

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

Voici une démo qui démontre cette technique pour obtenir la tête de la boussole que l'utilisateur fait face. Il devrait fonctionner bien sur les navigateurs iOS et Android.

La mise en œuvre du code dans cette démo est comme indiqué ci-dessus et peut être visualisé sur Github à ./scripts/compass.js:L268-L272 .

Je crois que vous pouvez utiliser le champ "titre" de l'objet de localisation, depuis navigator.geolocation, voir ici:

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

Je ne sais autrement.

J'espère que cela aide, A.