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

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

Источник

4 ответа

Решение

Да, ты можешь! К сожалению alpha не работает на iPhone / iPad. С Мобильным Сафари, alpha основывается на направлении, на которое указывало устройство, когда была впервые запрошена ориентация устройства. Прилагаемый веб-комплект предлагает вам заголовок компаса. Чтобы это работало для всех других браузеров (которые все поддерживают 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, но это нормально.

Кстати: "oncompassneedscalibration"также не поддерживается для iPhone и iPad.

Источник

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

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

Чтобы надежно получить текущий курс компаса в браузерах 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.

Источник

На Chrome для Android вы можете использовать 'deviceorientationabsolute' слушатель события:

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

См. Эту статью в документации для веб-разработчиков Google.

Проверено на Chrome 63 для Android.

Источник

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

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

Я не знаю другого пути.

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

Источник
Другие вопросы по тегам