Простой счетчик поездок с использованием Geolocation API

Michael Mahemoff

Введение

Geolocation API позволяет определять местоположение пользователя и отслеживать его перемещения (с согласия пользователя). Эта функция может использоваться в запросах пользователей, например чтобы помочь кому-то добраться до пункта назначения. Также это разрешение может использоваться для добавления геотега к контенту, созданному пользователем, например для указания места, где была сделана фотография. API не зависит от устройства и не учитывает, как браузер определяет местоположение, если клиенты могут запрашивать и получать данные о местоположении стандартным способом. Для этого могут использоваться GPS, Wi-Fi или ручной ввод данных. Поскольку любой из этих поисков занимает некоторое время, API является асинхронным. При каждом запросе местоположения вы передаете ему метод обратного вызова.

В этом примере показан счетчик поездки, который показывает начальное местоположение и расстояние, пройденное с момента загрузки страницы.

Шаг 1. Проверка совместимости

Browser Support

• 5
• 12
• 3.5
• 5

Source

Чтобы проверить совместимость, достаточно выполнить поиск объекта геолокации:

// check for Geolocation support
if (navigator.geolocation) {
  console.log('Geolocation is supported!');
}
else {
  console.log('Geolocation is not supported for this Browser/OS version yet.');
}

Шаг 2. Объявите HTML-код счетчика поездок

В этом примере вы создаете счетчик поездок, поэтому объявите следующий HTML-код:

<div id="tripmeter">
<p>
Starting Location (lat, lon):<br/>
<span id="startLat">???</span>°, <span id="startLon">???</span>°
</p>
<p>
Current Location (lat, lon):<br/>
<span id="currentLat">???</span>°, <span id="currentLon">???</span>°
</p>
<p>
Distance from starting location:<br/>
<span id="distance">0</span> km
</p>
</div>

На следующих нескольких шагах мы будем использовать Geolocation API, чтобы заполнить все эти пустые элементы span.

Шаг 3. Определять текущее местоположение пользователя.

getCurrentPosition() асинхронно сообщает о текущем местоположении пользователя. Вызовите его сразу после загрузки страницы, чтобы он правильно заполнил и сохранил на будущее начальную позицию:

window.onload = function() {
var startPos;
navigator.geolocation.getCurrentPosition(function(position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
});
};

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

После выполнения этого кода вы должны увидеть начальную позицию. В зависимости от устройства, которое использует ваш браузер, объект position может содержать не только широту и долготу, но и другие данные, например высоту или направление. Вы можете изучить это подробнее, записав переменную позиции в консоль.

Шаг 4. Обработка ошибок

К сожалению, не все поиски местоположения успешны. Например, если не удалось определить местоположение по GPS или пользователь отключил определение местоположения. Второй необязательный аргумент getCurrentPosition() будет вызван в случае ошибки, чтобы вы могли уведомить пользователя в обратном вызове:

window.onload = function() {
var startPos;
navigator.geolocation.getCurrentPosition(function(position) {
// same as above
}, function(error) {
alert('Error occurred. Error code: ' + error.code);
// error.code can be:
//   0: unknown error
//   1: permission denied
//   2: position unavailable (error response from locaton provider)
//   3: timed out
});
};

Шаг 5. Отслеживать местоположение пользователя.

Предыдущий вызов getCurrentPosition() был выполнен только один раз, при загрузке страницы. Чтобы отслеживать изменения, используйте watchPosition(). Она автоматически уведомляет функцию обратного вызова о перемещении пользователя.

navigator.geolocation.watchPosition(function(position) {
document.getElementById('currentLat').innerHTML = position.coords.latitude;
document.getElementById('currentLon').innerHTML = position.coords.longitude;
});

6. Показывать пройденное расстояние

Этот шаг не связан напрямую с Geolocation API, но завершает демонстрацию и показывает, как можно использовать данные о местоположении. Добавьте дополнительную строку в обработчик watchPosition(), чтобы заполнить пройденное расстояние:

navigator.geolocation.watchPosition(function(position) {
// same as above
document.getElementById('distance').innerHTML =
    calculateDistance(startPos.coords.latitude, startPos.coords.longitude,
                    position.coords.latitude, position.coords.longitude);
});

Функция calculateDistance() использует геометрический алгоритм для определения расстояния между двумя точками с заданными координатами. Реализация JavaScript адаптирована из скрипта, предоставленного Moveable Type, в соответствии с лицензией Creative Commons:

function calculateDistance(lat1, lon1, lat2, lon2) {
var R = 6371; // km
var dLat = (lat2 - lat1).toRad();
var dLon = (lon2 - lon1).toRad();
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
        Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) *
        Math.sin(dLon / 2) * Math.sin(dLon / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = R * c;
return d;
}
Number.prototype.toRad = function() {
return this * Math.PI / 180;
}