Использование геолокации

Secure context
This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

Geolocation API позволяет пользователю предоставлять свое местоположение web-приложению, если пользователь согласится предоставить его. Из соображений конфиденциальности, у пользователя будет запрошено разрешение на предоставление информации о местоположении.

Концепты и использование

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

API геолокации может быть вызвано через Navigator.geolocation; это заставит браузер пользователя вывести уведомление с запросом для доступа к текущему местоположению. Если его одобрят, то браузер сможет даст весь доступный функционал для работы с информацией о местонахождении (например, GPS).

Тогда разработчику станут доступны несколько разных способов получения соответствующей информации:

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

В обоих случая, методы принимают три аргумента:

  • Обязательную callback-функцию при успехе: если удалось получить местоположение пользователя, то функция вызовется с объектом GeolocationPosition как одним параметром, предоставляющим доступ к данным о месторасположении.
  • Необязательную callback-функцию при ошибке: если не удалось получить позицию, то callback-функция вызовется с объектом GeolocationPositionError как одним параметром, содержащим информацию о том, что пошло не так.
  • Необязательный объект PositionOptions, который содержит надстройки получения данных о местоположении.

Интерфейсы

Geolocation
Главный класс этого API — содержит методы для получения текущего местоположения пользователя, наблюдает за его изменениями и удаляет функции-наблюдатели.
GeolocationPosition
Предоставляет месторасположение пользователя. Экземпляр GeolocationPosition, полученный при успешном вызове одного из методов Geolocation, внутри callback-функции при успехе, содержит метку времени плюс экземпляр объекта GeolocationCoordinates.
GeolocationCoordinates
Предоставлять координаты пользователя; Экземпляр GeolocationCoordinates содержит широту, долготу и прочую важную подобную информацию.
GeolocationPositionError
GeolocationPositionError возвращается при неуспешном вызове методов, содержащихся в Geolocation, внутри callback-функции при ошибке, содержит код ошибки и сообщение.
Navigator.geolocation
Точка входа в API. Возвращает экземпляр объекта Geolocation, из которого становятся доступны все функции и методы.

Словари

PositionOptions
Предоставляет объект, содержащий опции, которые можно передать как параметр в  Geolocation.getCurrentPosition() и Geolocation.watchPosition().

Примеры

In the following example the Geolocation API is used to retrieve the user's latitude and longitude. If sucessful, the available hyperlink is populated with an openstreetmap.org URL that will show their location.

HTML

<button id = "find-me">Show my location</button><br/>
<p id = "status"></p>
<a id = "map-link" target="_blank"></a>

JavaScript

function geoFindMe() {

  const status = document.querySelector('#status');
  const mapLink = document.querySelector('#map-link');

  mapLink.href = '';
  mapLink.textContent = '';

  function success(position) {
    const latitude  = position.coords.latitude;
    const longitude = position.coords.longitude;

    status.textContent = '';
    mapLink.href = `https://www.openstreetmap.org/#map=18/${latitude}/${longitude}`;
    mapLink.textContent = `Latitude: ${latitude} °, Longitude: ${longitude} °`;
  }

  function error() {
    status.textContent = 'Unable to retrieve your location';
  }

  if(!navigator.geolocation) {
    status.textContent = 'Geolocation is not supported by your browser';
  } else {
    status.textContent = 'Locating…';
    navigator.geolocation.getCurrentPosition(success, error);
  }

}

document.querySelector('#find-me').addEventListener('click', geoFindMe);

Result

Спецификации

Спецификация Статус Комментарий
Geolocation API Рекомендация

Поддержка браузерами

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
GeolocationChrome Полная поддержка 5Edge Полная поддержка 12Firefox Полная поддержка 3.5
Замечания
Полная поддержка 3.5
Замечания
Замечания GPSD (GPS daemon) support added in Firefox 3.6. WiFi-based location is provided by Google (privacy) or a custom provider (MLS instructions).
IE Полная поддержка 9Opera Полная поддержка 10.6Safari Полная поддержка 5WebView Android Полная поддержка ≤37Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 11Safari iOS Полная поддержка 5Samsung Internet Android Полная поддержка 1.0
clearWatchChrome Полная поддержка 5Edge Полная поддержка 12Firefox Полная поддержка 3.5IE Полная поддержка 9Opera Полная поддержка 10.6Safari Полная поддержка 5WebView Android Полная поддержка ≤37Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 11Safari iOS Полная поддержка 5Samsung Internet Android Полная поддержка 1.0
getCurrentPositionChrome Полная поддержка 5Edge Полная поддержка 12Firefox Полная поддержка 3.5IE Полная поддержка 9Opera Полная поддержка 10.6Safari Полная поддержка 5WebView Android Полная поддержка ≤37Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 11Safari iOS Полная поддержка 5Samsung Internet Android Полная поддержка 1.0
Secure context requiredChrome Полная поддержка 50Edge Полная поддержка ≤79Firefox Полная поддержка 55IE Нет поддержки НетOpera Полная поддержка 37Safari Полная поддержка ДаWebView Android Полная поддержка 51
Замечания
Полная поддержка 51
Замечания
Замечания Secure context is only required for applications targeting Android Nougat (7) and higher. See bug 603574.
Chrome Android Полная поддержка 50Firefox Android Полная поддержка 55Opera Android Полная поддержка 37Safari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка 5.0
watchPositionChrome Полная поддержка 5Edge Полная поддержка 12Firefox Полная поддержка 3.5IE Полная поддержка 9Opera Полная поддержка 10.6Safari Полная поддержка 5WebView Android Полная поддержка ≤37Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 11Safari iOS Полная поддержка 5Samsung Internet Android Полная поддержка 1.0

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Смотрите замечания реализации.
Смотрите замечания реализации.

Доступность

Так как местоположение, основанное на WiFi, часто предоставляется Google, API местоположения может быть не доступен в Китае. Вы можете использовать местных провайдеров, таких как Baidu, Autonavi или Tencent. Эти сервисы используют IP-адресс пользователя и/или приложение для предоставления наиболее точной позиции.

Смотрите также