Geolocation API позволяет определить местоположение пользователя, если он дал на это согласие.
Geolocation API позволяет определять местоположение пользователя с его согласия. Вы можете использовать эту функцию, например, чтобы направлять пользователя к месту назначения и добавлять геотеги к контенту, созданному пользователем, например отмечать, где была сделана фотография.
Geolocation API также позволяет определять местоположение пользователя и отслеживать его перемещения (только с согласия пользователя и пока открыта страница). Это открывает множество интересных возможностей, например интеграцию с серверными системами для подготовки заказа к получению, если пользователь находится поблизости.
При использовании Geolocation API необходимо учитывать множество факторов. В этом руководстве описаны распространенные сценарии использования и решения.
Сводка
- Используйте геолокацию, когда это полезно для пользователя.
- Запрашивайте разрешение в ответ на действие пользователя.
- Используйте проверку поддержки функций на случай, если браузер пользователя не поддерживает геолокацию.
- Узнайте, как лучше всего использовать геолокацию.
- Протестируйте геолокацию на своем сайте.
Когда использовать геолокацию
- Определите, к какому физическому местоположению пользователь находится ближе всего, чтобы адаптировать интерфейс.
- Подбирать информацию (например, новости) с учетом местоположения пользователя.
- Показывать местоположение пользователя на карте.
- Добавлять в данные, созданные в приложении, теги с местоположением пользователя (например, геотеги к фотографиям).
Запрашивайте разрешения ответственно
Недавние исследования предпочтений аудитории показали, что пользователи не доверяют сайтам, которые запрашивают данные о местоположении сразу после загрузки страницы. Какие рекомендации следует соблюдать?
Исходите из того, что пользователи не будут предоставлять вам данные о своем местоположении
Многие пользователи не захотят предоставлять вам свое местоположение, поэтому вам необходимо принять защитный стиль разработки.
- Обрабатывайте все ошибки, возвращаемые Geolocation API, чтобы адаптировать сайт к таким ситуациям.
- Четко и ясно объясните, зачем вам нужен доступ к данным о местоположении.
- При необходимости используйте резервное решение.
Используйте резервный вариант, если требуется геолокация
Рекомендуем не запрашивать доступ к текущему местоположению пользователя. Однако если вашему сайту или приложению требуется текущее местоположение пользователя, существуют сторонние решения, которые позволяют получить приблизительные данные о том, где сейчас находится пользователь.
Обычно такие решения определяют IP-адрес пользователя и сопоставляют его с физическими адресами, зарегистрированными в базе данных RIPE. Такие данные часто не очень точны и обычно указывают на положение телекоммуникационного узла или вышки сотовой связи, ближайшей к пользователю. Во многих случаях они могут быть неточными, особенно если пользователь использует VPN или другой прокси-сервис.
Всегда запрашивайте доступ к местоположению по жесту пользователя
Пользователи должны понимать, зачем вам нужны эти данные и какую пользу они получат, если предоставят их. Если запрос появляется сразу после загрузки главной страницы, это может вызвать у пользователя негативную реакцию.
Вместо этого покажите пользователю четкий призыв к действию или укажите, что для выполнения операции потребуется доступ к его местоположению. В этом случае пользователю будет проще связать системный запрос на доступ с только что выполненным действием.
Четко указывайте, что действие запрашивает местоположение пользователя.
В исследовании, проведенном командой Google Рекламы, когда пользователя попросили забронировать номер в отеле в Бостоне для предстоящей конференции на сайте одного конкретного отеля, ему было предложено поделиться своим местоположением по GPS сразу после нажатия на призыв к действию "Найти и забронировать" на главной странице.
В некоторых случаях пользователи были недовольны, потому что не понимали, почему им показывают отели в Сан-Франциско, когда они хотят забронировать номер в Бостоне.
Лучше объяснить пользователям, зачем вам нужно знать их местоположение. Добавьте хорошо узнаваемый значок, который используется на разных устройствах, например дальномер, или явный призыв к действию, например "Найти поблизости".
Как ненавязчиво попросить пользователей предоставить доступ к данным о местоположении
У вас нет доступа к действиям пользователей. Вы точно знаете, когда пользователи запрещают доступ к данным о местоположении, но не знаете, когда они его разрешают. Вы понимаете, что доступ получен, только когда появляются результаты.
Если вам нужно, чтобы пользователи выполнили определенное действие, подтолкните их к этому.
Мы рекомендуем создать:
- Настройте таймер, который сработает через короткий промежуток времени, например через 5 секунд.
- Если вы получили сообщение об ошибке, покажите его пользователю.
- Если вы получите положительный ответ, отключите таймер и обработайте результаты.
- Если по истечении времени ожидания вы не получили положительный ответ, покажите пользователю уведомление.
- Если ответ придет позже, а уведомление все ещё будет на экране, удалите его.
button.onclick = function () {
var startPos;
var nudge = document.getElementById('nudge');
var showNudgeBanner = function () {
nudge.style.display = 'block';
};
var hideNudgeBanner = function () {
nudge.style.display = 'none';
};
var nudgeTimeoutId = setTimeout(showNudgeBanner, 5000);
var geoSuccess = function (position) {
hideNudgeBanner();
// We have the location, don't display banner
clearTimeout(nudgeTimeoutId);
// Do magic with location
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
switch (error.code) {
case error.TIMEOUT:
// The user didn't accept the callout
showNudgeBanner();
break;
}
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError);
};
Поддержка браузеров
Большинство браузеров сейчас поддерживают Geolocation API, но перед началом работы всегда рекомендуется проверить, поддерживается ли он.
Проверить совместимость можно, протестировав наличие объекта геолокации:
// check for Geolocation support
if (navigator.geolocation) {
console.log('Geolocation is supported!');
} else {
console.log('Geolocation is not supported for this Browser/OS.');
}
Определение текущего местоположения пользователя
Geolocation API предлагает простой метод однократного получения местоположения пользователя: getCurrentPosition(). Вызов этого метода асинхронно сообщает о текущем местоположении пользователя.
window.onload = function () {
var startPos;
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
navigator.geolocation.getCurrentPosition(geoSuccess);
};
Если приложение в этом домене запрашивает разрешения впервые, браузер обычно проверяет согласие пользователя. В зависимости от браузера, в нем также могут быть настройки, позволяющие всегда разрешать или запрещать запросы разрешений. В этом случае процесс подтверждения пропускается.
В зависимости от устройства определения местоположения, используемого браузером, объект position может содержать не только широту и долготу, но и другие данные, например высоту или направление. Вы не можете сказать, какую дополнительную информацию использует эта система определения местоположения, пока она фактически не вернет данные.
Отслеживание местоположения пользователя
Geolocation API позволяет получить данные о местоположении пользователя (с его согласия) с помощью одного вызова getCurrentPosition().
Если вы хотите постоянно отслеживать местоположение пользователя, используйте метод Geolocation API watchPosition(). Он работает аналогично getCurrentPosition(), но срабатывает несколько раз, когда ПО для определения местоположения:
- Позволяет точнее определить местоположение пользователя.
- Определяет, что положение пользователя меняется.
var watchId = navigator.geolocation.watchPosition(function (position) {
document.getElementById('currentLat').innerHTML = position.coords.latitude;
document.getElementById('currentLon').innerHTML = position.coords.longitude;
});
Когда использовать геолокацию для отслеживания местоположения пользователя
- Вы хотите точнее определять местоположение пользователей.
- Приложение должно обновлять пользовательский интерфейс на основе новых данных о местоположении.
- Вашему приложению необходимо обновить бизнес-логику, когда пользователь входит в определенную зону.
Рекомендации по использованию геолокации
Очищайте память и экономьте заряд батареи
Отслеживание изменений геолокации – платная операция. Хотя в операционных системах могут быть функции, позволяющие приложениям подключаться к геоподсистеме, вы, как веб-разработчик, не знаете, поддерживает ли устройство пользователя отслеживание его местоположения. Кроме того, пока вы отслеживаете местоположение, устройство выполняет много дополнительной обработки.
Когда отслеживать местоположение пользователя больше не нужно, вызовите clearWatch, чтобы отключить системы геолокации.
Корректная обработка ошибок
К сожалению, не все поиски местоположения успешны. Например, если не удалось определить местоположение по GPS или пользователь отключил определение местоположения. В случае ошибки вызывается второй, необязательный аргумент getCurrentPosition(), чтобы вы могли уведомить пользователя в обратном вызове:
window.onload = function () {
var startPos;
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
console.log('Error occurred. Error code: ' + error.code);
// error.code can be:
// 0: unknown error
// 1: permission denied
// 2: position unavailable (error response from location provider)
// 3: timed out
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError);
};
Уменьшите необходимость запускать аппаратное обеспечение для геолокации
Во многих случаях вам не нужно знать точное местоположение пользователя, достаточно приблизительного.
Используйте необязательное свойство maximumAge, чтобы указать браузеру, что нужно использовать недавно полученные данные о местоположении. Это не только ускоряет получение данных, если пользователь уже запрашивал их ранее, но и предотвращает запуск аппаратных интерфейсов геолокации, таких как триангуляция Wi-Fi или GPS.
window.onload = function () {
var startPos;
var geoOptions = {
maximumAge: 5 * 60 * 1000,
};
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
console.log('Error occurred. Error code: ' + error.code);
// error.code can be:
// 0: unknown error
// 1: permission denied
// 2: position unavailable (error response from location provider)
// 3: timed out
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError, geoOptions);
};
Не заставляйте пользователя ждать, установите время ожидания
Если вы не установите тайм-аут, запрос текущего местоположения может никогда не вернуть результат.
window.onload = function () {
var startPos;
var geoOptions = {
timeout: 10 * 1000,
};
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
console.log('Error occurred. Error code: ' + error.code);
// error.code can be:
// 0: unknown error
// 1: permission denied
// 2: position unavailable (error response from location provider)
// 3: timed out
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError, geoOptions);
};
Используйте приблизительное местоположение вместо точного
Если вы хотите найти ближайший к пользователю магазин, вам вряд ли понадобится точность до 1 метра. API предназначен для быстрого определения приблизительного местоположения.
Если вам нужна высокая точность, вы можете переопределить настройки по умолчанию с помощью параметра enableHighAccuracy. Используйте этот режим с осторожностью: он медленнее и расходует больше заряда батареи.
window.onload = function () {
var startPos;
var geoOptions = {
enableHighAccuracy: true,
};
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
console.log('Error occurred. Error code: ' + error.code);
// error.code can be:
// 0: unknown error
// 1: permission denied
// 2: position unavailable (error response from location provider)
// 3: timed out
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError, geoOptions);
};
Как эмулировать геолокацию с помощью инструментов разработчика Chrome
После настройки геолокации вам нужно будет:
- Проверьте, как работает приложение в разных местоположениях.
- Убедитесь, что приложение работает корректно, когда геолокация недоступна.
Это можно сделать с помощью инструментов разработчика Chrome.
- Откройте инструменты разработчика Chrome.
- Нажмите Esc, чтобы открыть панель консоли.
- Открыть меню выдвигающейся панели консоли
- Нажмите Датчики, чтобы открыть вкладку "Датчики".
Здесь вы можете переопределить местоположение, выбрав крупный город из списка, указать собственное местоположение или отключить геолокацию, выбрав вариант Местоположение недоступно.