Как получить доступ к местоположению пользователя в React

Для получения местоположения пользователя мы рассмотрим два метода:

1. Использование API геолокации
2. Использование IP API.

Использование API геолокации

API геолокации позволяет пользователю сообщать свое местоположение веб-приложениям, если они того пожелают. Из соображений конфиденциальности у пользователя запрашивается разрешение на отправку информации о местоположении.

Пример

import axios from "axios";
import { useEffect } from "react";
import { useState } from "react";
export default function useGeoLocation() {
    const [locationData, setLocationData] = useState(null)
    useEffect(() => {
        getLocation();
    }, []);
    async function getLocation() {
        // it will return the following attributes:
        // country, countryCode, regionName, city, lat, lon, zip and timezone
        const res = await axios.get("http://ip-api.com/json");
        console.log(res);
        if (res.status === 200)
            setLocationData(res.data)
    }
    return {
        city: locationData?.city,
        lat: locationData?.lat,
        lon: locationData?.lon,
    }
}

Использование IP API

Эти методы основаны на использовании IP-адреса устройства пользователя и различных баз данных геолокации.

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

Кроме того, использование внешних служб для геолокации может привести к задержке и зависимости от доступности и надежности этих служб.

Пример

В этом примере мы создадим пользовательский хук для вызова ip API и возврата атрибутов из него.

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

import axios from "axios";
import { useEffect } from "react";
import { useState } from "react";

export default function useGeoLocation() {
    const [locationData, setLocationData] = useState(null)
    useEffect(() => {
        getLocation();
    }, []);

    async function getLocation() {
        const res = await axios.get("http://ip-api.com/json");
        console.log(res);
        if (res.status === 200)
            setLocationData(res.data)
    }

    return {
        city: locationData?.city,
        country: locationData?.country,
        countryCode: locationData?.countryCode,
        lat: locationData?.lat,
        lon: locationData?.lon,
        region: locationData?.regionName,
        regionCode: locationData?.region,
        timezone: locationData?.timezone,
        zip: locationData?.zip
    }
}

app.js

import React, { useState, useEffect } from "react";
import useGeoLocation from "./useGeoLocation";

function UserLocation() {
    const { city, lat, lon } = useGeoLocation();

    return (
        <div>
            <p>City: {city}</p>
            <p>Latitude: {lat}</p>
            <p>Longitude: {lon}</p>
        </div>
    );
}

Заключение

Получение информации о местоположении пользователя — важный аспект веб-разработки, который позволяет разработчикам создавать персонализированный пользовательский интерфейс. Используя API геолокации, предоставляемый современными браузерами и React, получение и отображение местоположения пользователя стало проще, чем когда-либо прежде.