Saltar al contenido

Cómo usar la llamada de geolocalización en ReactJS

Los mapas son una forma primaria de mostrar la posición actual de un usuario. Necesitarás algunos parámetros de localización, como la latitud y la longitud, para mostrar la posición actual.

Nota : Antes de usar un mapa, debes tener una clave de la API de Google Map. De lo contrario, el mapa no funcionará y mostrará un error.

Cómo usar la llamada de geolocalización en ReactJS
Cómo usar la llamada de geolocalización en ReactJS

Instale esta biblioteca de mapas, que le permitirá comenzar con un mapa rápidamente.

1npm instalar google-maps-react

powerhell

Utilizando esta biblioteca, se pueden pasar los datos de localización, y en base a esos datos, la localización específica del usuario se resaltará en el mapa.

Abre el nuevo componente y escribe el siguiente fragmento de código.

1234567891011121314151617181920212223242526272829303132333435363738394041importReact,{Componente}de "react";import{Map,GoogleApiWrapper,Marker}de$0027google-maps-react$0027;const mapStyles ={ ancho: $0027100%$0027, altura:$0027100%$0027};claseDemo1extendeComponente{constructor(){super();esto. state={ name: "React"};}render(){return(<div><Mapgoogle={this.props.google}zoom={14}style={mapStyles}initialCenter={{{{ lat:SU_LATITUD, lng:SU_LONGITUD};};MarkeronClick={this. onMarkerClick}name={$0027Este es el nombre de prueba$0027}/;</Map></div;);}}exportdefaultGoogleApiWrapper({ apiKey:$0027API_KEY$0027})(Demo1);

jsx

Nota : Tendrás que sustituir tu clave de la API de Google Maps por la API_KEY. De lo contrario, el mapa no podrá mostrar las propiedades relacionadas con la ubicación.

Basándose en la latitud y la longitud, un mapa será capaz de cargar la ubicación exacta. La ubicación será identificada como un marcador en el mapa.