Могу ли я использовать Javascript для получения заголовка компаса для iOS и Android?

Могу ли я использовать Javascript в кросс-платформенном способе получения заголовка компаса в iOS и Android (с Chrome), не используя что-то вроде PhoneGap? Я знаю, что у iOS есть DeviceOrientationEvent , но я не могу найти эквивалент в Chrome для Android.

Да, ты можешь! К сожалению, alpha не работает на iPhones / iPads. С помощью Mobile Safari alpha основывается на направлении, которое указывало устройство, когда сначала запрашивалась ориентация устройства. Включенный webkit предлагает вам заголовок компаса. Чтобы он работал для всех других браузеров (которые все поддерживают alpha как compassheading ), вы можете использовать следующий код 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 также поддерживает Webkit, поэтому также будет использовать event.webkitCompassHeading, но это нормально.

BTW: « oncompassneedscalibration » также не поддерживается для iPhones и iPads.

В качестве руководства вы должны рассмотреть этот предыдущий ответ StackOverflow и ознакомиться с общими практическими соображениями для использования событий DeviceOrientation в веб-приложениях.

Простое решение, которое я представил в предыдущем связанном ответе StackOverflow, применимо только к браузерам, которые реализуют absolute события настройки устройства (например, браузеры, в которых свойство alphaorientation alpha является ориентированным на компас ). Это означает, что решение, предлагаемое в настоящее время, работает только в браузерах Android, а не на iOS-браузерах или в любом другом браузере, который не предоставляет данные о событиях, связанных с устройством.

Чтобы надежно получить текущий заголовок компаса для обозревателей Android и iOS сегодня, вам необходимо обрабатывать как absolute и не absolute реализации, которые предоставляют дополнительное свойство webkitCompassHeading и не забудьте учитывать любые текущие изменения ориентации экрана как часть этого. AFAIK единственная библиотека, которая в настоящее время делает это Full Tilt JS (отказ от ответственности: я являюсь автором этой библиотеки).

Следующий код даст вам тот же правильный заголовок компаса как в iOS, так и в Android-браузерах, учитывая различия в реализациях ориентации устройства и применяя любые необходимые преобразования ориентации экрана во время выполнения:

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

Вот демонстрация , демонстрирующая эту технику для получения заголовка компаса, с которым сталкивается пользователь. Он должен хорошо работать как на iOS, так и на Android-браузерах.

Реализация кода в этой демонстрации приведена выше и может быть просмотрена на Github по адресу ./scripts/compass.js:L268-L272 .

Я считаю, что вы можете использовать поле «заголовок» объекта местоположения, из navigator.geolocation, см. Здесь:

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

Другого пути я не знаю.

Надеюсь, это поможет, А.