Obtenga la geolocalización actual del usuario usando React-Geolocated

En algunas situaciones, las aplicaciones necesitan acceder a las propiedades de ubicación actual del usuario. Las propiedades de ubicación incluyen latitud, longitud y algo más sobre la ubicación actual del usuario. Desde las propiedades de Ubicación, el usuario puede conocer la geolocalización actual del usuario.

La aplicación puede proporcionar servicios específicos al usuario de acuerdo con la geolocalización actual. Por ejemplo, la aplicación Weather muestra el clima actual de la ubicación geográfica actual del usuario mediante la API de OpenWeatherMap . La aplicación con una integración de mapas puede mostrar la ubicación actual del usuario en el mapa de Google usando la API de Google Maps .

En este tutorial, aprenderemos a acceder a las propiedades de geolocalización actuales de los usuarios en react js mediante el uso del paquete geolocalizado. Al utilizar el paquete geolocalizado de reacción, el usuario puede obtener los siguientes detalles.

• Latitud
• Longitud
• Altitud
• Precisión
• velocidad

Los usuarios primero deben configurar el entorno del proyecto de reacción en su computadora local.

Creando un nuevo proyecto de reacción

Paso 1: para crear una nueva aplicación de reacción, ejecute el siguiente comando en su terminal.

npx create-react-app testapp

Paso 2: ahora, muévase dentro del directorio del proyecto usando el siguiente comando.

cd testapp

Directorio del proyecto: Debería verse como la imagen de abajo.

Paso 3: Instale el paquete react-Geolocated dentro del directorio de su proyecto ejecutando el siguiente comando en la terminal.

npm install react-geolocated --save

Ahora, estamos listos para obtener la geolocalización del usuario utilizando el geolocalizado de reacción.

Sintaxis:

1. Check if browser is supporting geolocated or not
   if(this.props.isGeolocationAvailable) {
     
     a. check if location in browser is enabled or not
        if(this.props.isGeolocationEnabled){
         
         i. check if coordinates of current location is 
             available or not
            if(this.props.coords){
            render the coordinates of current location.
            }  
        }     
    }

Ejemplo: Ahora, edite el archivo app.js y copie/pegue el siguiente código en él.

En este archivo, importaremos el paquete geolocalizado de reacción e imprimiremos las coordenadas de la ubicación actual. Vincularemos el componente App con la función reducer geolocated() . La función Reductor geolocalizada asigna los accesorios al componente de la aplicación cuando se representará.

Nombre de archivo: App.js

import React, { Component } from "react";
 
// Importing geolocated reducer function
import { geolocated } from "react-geolocated";
 
class App extends Component {
  render() {
 
    // Check geolocation supported in
    // browser or not
    return this.props.isGeolocationAvailable ? (
 
      // Check location is enable in
      // browser or not
      this.props.isGeolocationEnabled ? (
 
        // Check coordinates of current
        // location is available or not
        this.props.coords ? (
          <div>
            <h1 style={{ color: "green" }}>GeeksForGeeks</h1>
            <h3 style={{ color: "red" }}>
              Current latitude and longitude of the user is
            </h3>
            <ul>
              <li>latitude - {this.props.coords.latitude}</li>
              <li>longitude - {this.props.coords.longitude}</li>
            </ul>
          </div>
        ) : (
          <h1>Getting the location data</h1>
        )
      ) : (
        <h1>Please enable location on your browser</h1>
      )
    ) : (
      <h1>Please, update your or change the browser </h1>
    );
  }
}
 
// Binding geolocated() reducer function to
// App component, while exporting it
export default geolocated()(App);

Paso para ejecutar: Para ejecutar el proyecto, ingrese el siguiente comando en su terminal en el directorio del proyecto.

npm start

Producción:

Navegadores compatibles: solo debajo del navegador con la versión específica es compatible con la geolocalización de reacción.

• cromo ≥ 5
• Firefox ≥ 3.5
• Internet Explorer ≥ 9
• Ópera ≥ 10,60
• Safari ≥ 5

Referencia: https://www.npmjs.com/package/react-geolocated