Как дела, ребята? Я веб -разработчик, я хочу поделиться несколькими интересными знаниями, которые я делаю каждый день, и я подумал, что статья – это хороший способ сделать это, поэтому давайте напрямую перейдем к сущности, не заставляя вас утомлять. 😜
Кстати … это моя первая статья! 🤩
В этой статье мы не собираемся использовать ни одной сторонней библиотеки, просто геолокационной API. Во -первых, создайте свое приложение React, используя эту команду,
npx создать геолокацию app-app
Теперь давайте создадим один компонент, называемый geolocation.js в папке SRC. Вы можете создать класс или функциональный компонент, что бы вы ни предпочитали, я создаю здесь компонент класса!
Мы собираемся использовать Геолокация API, который поддерживается каждым браузером.
Прежде всего, мы должны знать, что это устройство поддерживает геолокацию? И для этого мы проверим, используя условие, как указано ниже в методе ComponentDidMount!
componentDidMount() {
if (navigator.geolocation) {
alert("GeoLocation is Available!");
} else {
alert("Sorry Not available!");
}}
В этом коде Навигатор: Это интерфейс, который представляет состояние и идентичность пользовательского агента. Воберите этот навигатор, и вы увидите разные свойства, такие как геолокация.
В приведенном выше коде, если в Navigator есть свойство геолокации, что означает, что устройство поддерживает функциональность местоположения.
Теперь мы знаем, что есть функциональность местоположения, мы должны проверить разрешения, что, если пользователь разрешил получить доступ к своему местоположению или нет! Для этого мы будем использовать Navigator.permissions Анкет
Позвольте мне объяснить этот код,
В методе ComponentDidMount После условия, если мы должны положить Navigator.permissions Чтобы узнать разрешения, которые у нас есть.
Теперь это navigator.permission.query ({name: “geolocation”}) Запрос на статус разрешения для геолокации.
Тогда он вернет объект результата, который содержит подобное состояние,
“Предоставлено” – У нас есть разрешение на доступ к местоположению, поэтому мы можем назвать нашу функцию напрямую! “Приглашение” – Пользователь получит всплывающее окно с просьбой о разрешении! “ОТКАЗАЦИИ” – Пользователь отрицал место обмена.
Для “Предоставлено” и “Приглашение” Укажите, что мы можем создать функцию, чтобы получить текущую позицию пользователя, но для состояния «отказано» мы можем показать инструкции о том, как они могут разрешить разрешение на местонахождение в своем браузере.
Примечание: Вы никак не можете попробовать разрешение на местоположение снова, если пользователь уже отклонил разрешение на местоположение, если пользователь не позволит ему руководство в своем браузере.
Теперь у нас есть разрешение на доступ к местоположению, позвольте нам получить текущую позицию пользователя! Для этого мы собираемся использовать GetCurrentPosition () метод
navigator.geolocation.getCurrentPosition(success[, error[, [options]])
Требуется 3 аргумента.
Успех: Функция обратного вызова, которая принимает GeolocationPosition объект как его единственный входной параметр.
Ошибка (необязательно): Необязательная функция обратного вызова, которая принимает GeolocationPositionError объект как его единственный входной параметр.
Параметры (необязательно): Необязательный PositionOptions объект.
Варианты включают:
максимума:целое число (миллисекунд) | Бесконечность – максимальный возраст кэшированного положения.Тайм -аут:Integer (миллисекунд) – количество времени до обратного вызова ошибки, если 0 никогда не будет вызовом.EnableHighaccuracy:ложный | истинный
Давайте добавим все это в наш код!
С 3 по 19,
Я добавил параметры и две функции обратного вызова, которые являются Успех (POS) который дает нам объект позиции и Ошибки (ERR) что даст нам ошибку!
В строке № 30: я только прошел Успех Функция, потому что нам уже предоставлено разрешение!
В строке № 32: Мы не знаем состояние разрешения, потому что теперь он быстро, если пользователь разрешит, он будет работать Успех или покажет Ошибка !
Ниже вывод в консоли! (Если вы разрешаете разрешение на местоположение)
Ваша текущая позиция: geolocation.js: 12 Latitude: 40,7128 Geolocation.js: 13 Долгота: 74,0060 Geolocation.js: 14 более или менее 31 метра.
Теперь вы можете манипулировать этим кодом на основе ваших требований, я предложу вам использовать console.log () и регистрируйте разные объекты, чтобы узнать больше о них.
Вот и все! Если вы столкнетесь с какой -либо проблемой, прокомментируйте ниже, я постараюсь изо всех сил, чтобы решить ее, и если вам понравилась эта статья, не забудьте поделиться ею.
Кроме того, если вы хотите узнать о ReactJS, не стесняйтесь посетить мой канал на YouTube:
Следуйте за мной в Твиттере, где я делюсь множеством полезных ресурсов!
@code.bucks 😉
Спасибо за чтение. 😉😊
Оригинал: “https://dev.to/codebucks/how-to-get-user-s-location-in-react-js-1691”