С помощью этого руководства вы можете получить текущее положение пользователя с помощью веб-API геолокации.

Javascript Geolocation API предоставляет отличный и стандартный способ запроса местоположения пользователя. Местоположение, предоставленное пользователем, может быть определено с помощью GPS, WIFI, IP-геолокации и т. д. Для защиты конфиденциальности пользователя сначала будет запрашиваться разрешение на определение местоположения устройства, и, если пользователь предоставит разрешение, мы сможем определить местонахождение устройства.

API геолокации

В Javascript у нас есть объект navigator.geolocation, который используется для определения местоположения устройств. Мы будем использовать метод getCurrentPosition.

  • getCurrentPosition(): этот метод используется для получения текущего местоположения пользователя. Этот метод вернет объект, который содержит фрагменты информации, такие как широта, долгота, точность в метрах.

Итак приступим..

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

Если браузер поддерживает это, вы можете запросить местоположение пользователя из API геолокации с помощью функции getCurrentPosition.

Метод getCurrentPosition() имеет два параметра: первый — это возвращаемый объект координат, а второй — объект ошибки, если он есть.

Если мы запустим приведенный выше код с помощью кнопки запуска в верхнем меню блока кода, сайт спросит у нас разрешения на то, что сайт хочет узнать наше местоположение. Если мы нажмем кнопку «Разрешить», сайт сможет получить доступ к нашему местоположению и будет вызвана функция successCallBack(), а если мы нажмем кнопку «Блокировать», сайт не сможет получить доступ к нашему местоположению Будет вызвана функция >failureCallBack().

Результат будет выглядеть так:

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

Чтобы преобразовать эти данные в удобочитаемый адрес, мы должны сделать что-то вроде обратного геокодирования.

Существует несколько провайдеров геокодирования. В этом руководстве я использую OpenCage Geocoding API (бесплатно, но для запросов требуется учетная запись и ключ API) для преобразования значений долготы и широты.

Просто зайдите на сайт -> войти/зарегистрироваться и получить свой ключ API. Получив ключ API, вы можете поместить его в свой код.

Вывод будет выглядеть следующим образом:

Кроме того, внутри каждого элемента в массиве результатов есть свойство components, которое дает вам прямой доступ к каждой части местоположения.

Вы можете найти репозиторий кода здесь: https://github.com/nisar1406/geoLocation-api-js

Демо: https://geo-location-api-js.vercel.app/