12.09.2023 в 16:36

Как использовать Geolocation API с ReactJS

Геолокация используется для определения текущего местоположения сетевого устройства. Его можно использовать в таких приложениях, как Google Maps, Uber, Tripadvisor и т. д.

В ReactJS мы можем найти текущую геолокацию пользователя с помощью Geolocation API JavaScript.

Примечание. Геолокация API поддерживается в нескольких браузерах, поддерживающих HTML 5, таких как Google Chrome, Opera, Edge и т. д.

Теперь мы рассмотрим шаги, которые нам необходимо выполнить, чтобы использовать геолокацию API и найти координаты широты и долготы пользователя.

Во-первых, нам нужно будет импортировать React и необходимые библиотеки, которые будут использоваться в этой реализации. Мы будем использовать хук react useState для управления переменной, в которой хранится геолокация пользователя. Мы добавим следующую строку, чтобы включить эти библиотеки и методы в начало нашей программы.

import React, { useState } from 'react';

Мы объявим функцию компонента App() для нашего проекта React, которая будет загружать страницу приложения. Туда мы заключим все методы геолокации.
Мы объявим функцию компонента App() для нашего проекта React, которая будет загружать страницу приложения. Туда мы заключим все методы геолокации.

const [userLocation, setUserLocation] = useState(null);

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

const getUserLocation = () => { /*insert code here*/ };

В эту функцию getUserLocation мы теперь добавим все методы для определения геолокации пользователя. Сначала мы проверим, поддерживается ли браузером пользователя функция геолокации. Мы будем использовать простой оператор if else, заключающий в себе функцию navigator.geolocation.

if (navigator.geolocation) {
    // what to do if supported
}
else {
    // display an error if not supported
    console.error('Geolocation is not supported by this browser.');
}

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

navigator.geolocation.getCurrentPosition(
    (position) => {
        // what to do once we have the position
    },
    (error) => {
        // display an error if we cant get the users position
        console.error('Error getting user location:', error);
    }
);

Как только мы узнаем положение пользователя, мы можем использовать его для поиска координат пользователя и других соответствующих данных. Чтобы получить доступ к координатам, заключенным в переменную position, мы можем использовать метод poisiton.coords. Теперь мы создадим две переменные для хранения этих координат для дальнейшего использования.

const { latitude, longitude } = position.coords;

Как только мы получим доступ к координатам пользователя, мы обновим нашу переменную userLocation, вызвав функцию setUserLocation().

setUserLocation({ latitude, longitude });

Теперь, когда мы сохранили координаты местоположения пользователя, наша следующая задача — отобразить HTML-код, который будет отражать координаты пользователя на веб-странице. Для этого мы добавим кнопку, и при ее нажатии мы вызовем функцию getUserLocation и обновим переменную userLocation.

<button onClick={getUserLocation}>Get User Location</button>

Мы также должны отобразить местоположение пользователя, если мы его успешно получим. Для этого мы будем использовать оператор && вместе с переменной userLocation, которая включает в себя весь HTML-код для печати координат пользователя. После обновления переменной userLocation она больше не имеет нулевого значения, и утверждение теперь истинно; следовательно, он отображает координаты.

{userLocation && (
    <div>
        <h2>User Location</h2>
        <p>Latitude: {userLocation.latitude}</p>
        <p>Longitude: {userLocation.longitude}</p>
    </div>
)}

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

Полный исходный код

// import the required react libraries
import React, { useState } from 'react';

function App() {
  // const variable array to save the users location
  const [userLocation, setUserLocation] = useState(null);

  // define the function that finds the users geolocation
  const getUserLocation = () => {
    // if geolocation is supported by the users browser
    if (navigator.geolocation) {
      // get the current users location
      navigator.geolocation.getCurrentPosition(
        (position) => {
          // save the geolocation coordinates in two variables
          const { latitude, longitude } = position.coords;
          // update the value of userlocation variable
          setUserLocation({ latitude, longitude });
        },
        // if there was an error getting the users location
        (error) => {
          console.error('Error getting user location:', error);
        }
      );
    }
    // if geolocation is not supported by the users browser
    else {
      console.error('Geolocation is not supported by this browser.');
    }
  };

  // return an HTML page for the user to check their location
  return (
    <div>
      <h1>Geolocation App</h1>
      {/* create a button that is mapped to the function which retrieves the users location */}
      <button onClick={getUserLocation}>Get User Location</button>
      {/* if the user location variable has a value, print the users location */}
      {userLocation && (
        <div>
          <h2>User Location</h2>
          <p>Latitude: {userLocation.latitude}</p>
          <p>Longitude: {userLocation.longitude}</p>
        </div>
      )}
    </div>
  );
}

export default App;

Если вы хотите использовать машинописный текст, исходный код здесь

"use client"

import React, { useState } from "react";

export default function TestGeolocation() {
  const [userLocation, setUserLocation] = useState<{
    latitude: number;
    longitude: number;
  } | null>(null);

  const getUserLocation = () => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        (position) => {
          const { latitude, longitude } = position.coords;

          setUserLocation({ latitude, longitude });
        },

        (error) => {
          console.error("Error get user location: ", error);
        }
      );
    } else {
      console.log("Geolocation is not supported by this browser");
    } 
  };

  return (
    <>
      <h1>Geolocation App</h1>
      {/* create a button that is mapped to the function which retrieves the users location */}
      <button onClick={getUserLocation}>Get User Location</button>
      {/* if the user location variable has a value, print the users location */}
      {userLocation && (
        <div>
          <h2>User Location</h2>
          <p>Latitude: {userLocation.latitude}</p>
          <p>Longitude: {userLocation.longitude}</p>
        </div>
      )}
    </>
  );
}

Источник:

#JavaScript #React

247

Войти на сайт

Как использовать Geolocation API с ReactJS

Полный исходный код

Если вы хотите использовать машинописный текст, исходный код здесь

Источник: