Введение
API геолокации позволяет вам узнать, где находится пользователь, и следить за его перемещением, всегда с согласия пользователя. Эту функцию можно использовать как часть пользовательских запросов, например, чтобы направить кого-либо к месту назначения. Его также можно использовать для «геотегирования» некоторого контента, созданного пользователем, например, для обозначения места, где была сделана фотография. API не зависит от устройства; его не волнует, как браузер определяет местоположение, если клиенты могут запрашивать и получать данные о местоположении стандартным способом. Базовый механизм может быть через GPS, Wi-Fi или просто попросить пользователя ввести свое местоположение вручную. Поскольку любой из этих поисков займет некоторое время, API является асинхронным; вы передаете ему метод обратного вызова всякий раз, когда запрашиваете местоположение.
Примером здесь является счетчик пройденного пути, показывающий исходное местоположение и отображающий расстояние, пройденное с момента загрузки страницы.
Шаг 1. Проверьте совместимость
Проверить совместимость можно легко, протестировав наличие объекта геолокации:
// 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>
Следующие несколько шагов будут использовать API геолокации для заполнения всех этих пустых интервалов.
Шаг 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;
});
};
Если приложение в этом домене впервые запрашивает разрешения, браузер обычно проверяет согласие пользователя. В зависимости от браузера также могут быть настройки, позволяющие всегда разрешать или запрещать поиск разрешений, и в этом случае процесс подтверждения будет пропущен.
Запустив этот код, вы теперь сможете увидеть начальную позицию. В зависимости от устройства определения местоположения, которое использует ваш браузер, объект положения может содержать гораздо больше, чем просто широту и долготу, например, он может включать высоту или направление. Вы можете продолжить исследование, записав переменную положения в консоль.
Шаг 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. Показать пройденное расстояние
Этот шаг не имеет прямого отношения к 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;
}