Как использовать API геолокации

Используя API геолокации, мы можем запросить у браузера координаты местоположения пользователя.

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

Он доступен только на страницах, обслуживаемых с использованием HTTPS, в целях безопасности, и он доступен во всех современных браузерах.

navigator.geolocation

The geolocation object

Сwindowэто глобальный объект, к которому мы можем получить доступnavigatorбез указанияwindow.navigator

Вwindow.navigatorсвойство, предоставляемое браузерами, указывает наОбъект навигаторакоторый являетсяобъект-контейнерэто делает нам доступными многие API веб-платформы.

Вgeolocationобъект предоставляет следующие методы:

  • getCurrentPosition()
  • watchPosition()
  • clearWatch()

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

Вот как этот интерфейс выглядит в Chrome:

The permission screen in Chrome

в Firefox:

The permission screen in Firefox

и в Safari:

The permission screen in Safari

Это нужно сделать только один раз для каждого источника. Вы можете изменить принятое решение и отменить решение о разрешении. Вот как вы это делаете с Chrome, щелкнув значок замка рядом с доменом:

Permission details

Как только это разрешение будет предоставлено, мы можем продолжить.

Получение позиции пользователя

Начнем с этого примера кода:

navigator.geolocation.getCurrentPosition(() => {})

Должна появиться панель разрешений. Разрешите разрешение.

Обратите внимание, как я прошел пустойстрелочная функция, потому что функции требуется функция обратного вызова.

Этой функции передаетсяPositionобъект, который содержит фактическое местоположение:

navigator.geolocation.getCurrentPosition(position => {
  console.log(position)
})

Этот объект имеет 2 свойства:

ВCoordinatesОбъект имеет несколько свойств, определяющих местоположение:

  • accuracyточность измерения местоположения, выраженная в метрах
  • altitudeизмеренное значение высоты
  • altitudeAccuracyточность измерения высоты, выраженная в метрах
  • headingнаправление, в котором движется устройство. Выражается в градусах (0 = север, восток = 90, юг = 180, запад = 270)
  • latitudeизмеренное значение широты
  • longitudeизмеренное значение долготы
  • speedскорость, с которой движется устройство, выражается в метрах в секунду.

В зависимости от реализации и устройства некоторые из них будутnull. Например, в Chrome, запущенном на моем MacBook Air, я получил значения только дляaccuracy,latitudeиlongitude.

navigator.geolocation.getCurrentPosition(position => {
  console.log(position.coords.latitude)
  console.log(position.coords.longitude)
})

Наблюдая за изменениями позиции

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

Использование:

navigator.geolocation.watchPosition(position => {
	console.log(position)
})

Конечно, браузер будет запрашивать разрешение также с этим методом, если оно еще не было предоставлено.

Мы можем перестать следить за позицией, позвонив вnavigator.geolocation.clearWatch()метод, передав емуidвернулсяwatchPosition():

const id = navigator.geolocation.watchPosition(position => {
	console.log(position)
})

//stop watching after 10 seconds setTimeout(() => { navigator.geolocation.clearWatch(id) }, 10 * 1000)

Если пользователь отказывает в разрешении

Помните всплывающее окно разрешений, которое показывает браузер, когда мы вызываем один из методов для получения позиции?

Если пользователь отрицает это, мы можем перехватить этот сценарий, добавив функцию обработки ошибок в качестве второго параметра методов.getCurrentPosition()иwatchPosition().

navigator.geolocation.getCurrentPosition(position => {
  console.log(position)
}, error => {
	console.error(error)
})

Объект, переданный второму параметру, содержитcodeсвойство различать типы ошибок:

  • 1означает отказано в разрешении
  • 2означает, что позиция недоступна
  • 3означает тайм-аут

Добавление дополнительных опций

Когда я ранее говорил об ошибках, я упоминал об ошибке тайм-аута. Поиск позиции может занять некоторое время, и мы можем установить максимальное время, разрешенное для выполнения операции, в качестве опции.

Вы можете добавить тайм-аут, добавив к методам третий параметрgetCurrentPosition()иwatchPosition(), объект.

navigator.geolocation.getCurrentPosition(position => {
  console.log(position)
}, error => {
	console.error(error)
}, {

})

Внутри этого объекта мы можем передать свойства

  • timeoutустановить количество миллисекунд до выдачи ошибок запроса
  • maximumAgeдля установки максимального «возраста» позиции, кэшируемой браузером. Мы не принимаем единицы старше установленного количества миллисекунд.
  • enableHighAccuracyлогическое значение по умолчаниюfalse, требуется позиция с максимально возможным уровнем точности (что может занять больше времени и больше мощности)

Пример использования:

navigator.geolocation.getCurrentPosition(position => {
  console.log(position)
}, error => {
	console.error(error)
}, {
  timeout: 1000,
  maximumAge: 10000,
  enableHighAccuracy: true
})

Скачать мою бесплатнуюРуководство для начинающих по JavaScript


Больше руководств по браузеру: