Geolocation API в компонентах React

navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options) запрашивает местоположение устройства один раз. Функция обратного вызова при успешном выполнении получает объект GeolocationPosition. Это подходит, когда местоположение нужно получить однократно, например для поиска ближайшего магазина после нажатия кнопки, а не для постоянного отслеживания перемещения.

navigator.geolocation.watchPosition(successCallback, errorCallback, options) непрерывно вызывает функцию обратного вызова при каждом изменении местоположения устройства. Она возвращает числовой идентификатор watchId. Это подходит для сценариев реального времени, например для отслеживания доставки или пошаговой навигации, где местоположение должно оставаться актуальным.

Объект GeolocationPosition содержит свойство coords со значениями latitude, longitude и accuracy (в метрах). Дополнительные необязательные поля включают altitude, altitudeAccuracy, heading и speed. Поле timestamp содержит время получения местоположения.

Функция обратного вызова при ошибке получает объект GeolocationPositionError с числовым свойством code. Код 1 — это PERMISSION_DENIED (пользователь отказал), код 2 — POSITION_UNAVAILABLE (сбой оборудования или сети), а код 3 — TIMEOUT (выполнение запроса заняло слишком много времени). Всегда обрабатывайте все три случая.

Слушатель watchPosition работает бесконечно, пока Вы его не остановите. В useEffect верните функцию очистки, которая вызывает navigator.geolocation.clearWatch(watchId). Если забыть об очистке, отслеживание продолжится после размонтирования компонента, разряжая батарею и потенциально обновляя состояние размонтированного компонента.

Хук useGeolocation управляет состоянием статуса с четырьмя возможными значениями: idle (запрос ещё не отправлялся), loading (запрос выполняется), success (местоположение получено) и error (произошла ошибка). Он также хранит в состоянии position и errorMessage. Компоненты получают понятный и единообразный интерфейс.

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

Как и большинство мощных API браузера, геолокация доступна только в защищённых контекстах. На обычных страницах HTTP значение navigator.geolocation равно undefined. При разработке на localhost она работает без HTTPS. В рабочей среде всегда обеспечивайте работу приложения по HTTPS, иначе пользователи никогда не увидят запрос разрешения.

Необязательный третий аргумент getCurrentPosition и watchPosition принимает объект параметров. enableHighAccuracy: true запрашивает точность уровня GPS, но увеличивает расход энергии. timeout задаёт максимальное количество миллисекунд ожидания. maximumAge разрешает использовать кэшированное местоположение, если оно было получено в течение указанного количества миллисекунд.

Геолокация позволяет реализовать такие функции, как «найти магазин рядом со мной», отслеживание курьера на карте, показ погоды для текущего города, публикации с геометками и расчёт расстояния между пользователем и пунктом назначения. Перед запросом разрешения всегда понятно объясняйте пользователям, зачем приложению нужно их местоположение.

Chrome DevTools позволяет задать фиктивное местоположение устройства. Откройте DevTools, перейдите в меню с тремя точками, выберите «Дополнительные инструменты», а затем «Датчики». Вы можете ввести координаты широты и долготы, чтобы смоделировать любое местоположение. Это гораздо быстрее, чем физически перемещаться в разные места для тестирования функций, зависящих от местоположения.

Что означает значение 1 свойства code объекта GeolocationPositionError?

Используйте getCurrentPosition для однократного получения местоположения, а watchPosition — для непрерывного отслеживания. Всегда вызывайте clearWatch в функции очистки useEffect. Создайте хук useGeolocation с состояниями idle, loading, success и error. Корректно обрабатывайте отказ в разрешении и помните, что в рабочей среде для геолокации требуется HTTPS.