Как найти ближайшее местоположение с помощью API геолокации в React

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

Оглавление

• Шаг 1. Загрузите React Framework
• Шаг 2. Установите пакет React Geocode
• Шаг 3. Создайте функциональный компонент
• Шаг 4. Получите ближайшее местоположение в React
• Шаг 9: Зарегистрируйте новый компонент
• Шаг 10. Запустите React-сервер

Шаг 1. Загрузите React Framework

Первый начинается с загрузки свежей среды React; вам нужно создать новый проект React, используя create-react-app.

npx create-react-app react-demo

Перейдите в папку проекта:

cd react-demo

Шаг 2. Установите пакет React Geocode

На этом этапе вы выполните предложенную команду и установите библиотеку геокодирования реакции.

npm install react-geocode --legacy-peer-deps

Шаг 3. Создайте функциональный компонент

Внутри папки src/ вам нужно будет создать папку features/, а затем определить компонент LocationComp, добавив указанный код. в файл LocationComp.js.

import React from 'react'
function LocationComp() {
  return (
    <div></div>
  )
}
export default LocationComp

Шаг 4. Получите ближайшее местоположение в React

На предыдущем шаге мы создали новый компонент для получения данных о местоположении; перейдите к файлу features/LocationComp.js и добавьте в него весь указанный код.

import React, { useEffect, useState } from "react";
import Geocode from "react-geocode";
// set Google Maps Geocoding API for purposes of quota management. Its optional but recommended.
Geocode.setApiKey("xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx");
function LocationComp() {
  const [placename, setPlaceName] = useState(null);
  const [error, setError] = useState("");
  const geolocationAPI = navigator.geolocation;
  useEffect(() => {
    if (!geolocationAPI) {
      setError("Geolocation API is not available in your browser!");
    } else {
      Geocode.fromLatLng("48.8583701", "2.2922926").then(
        (response) => {
          const address = response.results[0].formatted_address;
          let city;
          for (let i = 0; i < response.results[0].address_components.length; i++) {
            for (let j = 0; j < response.results[0].address_components[i].types.length; j++) {
              switch (response.results[0].address_components[i].types[j]) {
                case "locality":
                  city = response.results[0].address_components[i].long_name;
                  break;
              }
            }
          }
          setPlaceName(city);
        },
        (error) => {
          console.error(error);
        }
      );
      
    }
  }, []);
  return (
    <>
      <h4>Your coordinates are: {placename}</h4>
    </>
  );
}
export default LocationComp;

Шаг 9: Зарегистрируйте новый компонент

В React файл App.js в идеале является основной точкой входа для нашего приложения. Здесь мы собираемся зарегистрировать компонент местоположения.

Вы можете добавить следующий код в файл src/App.js.

import React from "react";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import LocationComp from "./features/LocationComp";
function App() {
  return (
    <div className="container mt-3">
      <h2 className="mb-3">React Show Current User Location Example</h2>
      <LocationComp />
    </div>
  );
}
export default App;

Шаг 10. Запустите React-сервер

Чтобы запустить сервер разработки, перейдите в папку проекта React. Выполните данную команду и откройте приложение по указанному URL-адресу.

npm start

http://localhost:3000

Заключение

В этом уроке мы узнали, как найти текущее и ближайшее местоположение, используя широту и долготу в приложении React js.