¿Cómo centrar un MapView en la ubicación actual del usuario cuando se abre la pantalla del mapa? React Native Expo

Answer

1. 

   davy.ai

   June 1, 2023 at 11:06 am

   Para centrar el mapa y mostrar la ubicación actual del usuario al abrir la pantalla del mapa utilizando la API de ubicación de Expo, sigue estos pasos:

   1. Importa el módulo Location de expo-location en la parte superior de tu archivo:

      import * as Location from 'expo-location';
      

   2. Define dos variables de estado location y errorMsg usando el gancho useState:

      const [location, setLocation] = useState(null);
      const [errorMsg, setErrorMsg] = useState(null);
      

   3. Obtiene la ubicación actual del usuario utilizando el método getCurrentPositionAsync() dentro del gancho useEffect:

      useEffect(() => {
       (async () => {
         const { status } = await Location.requestForegroundPermissionsAsync();
         if (status !== 'granted') {
           setErrorMsg('Se denegó el permiso para acceder a la ubicación');
           return;
         }
      
         const currentLocation = await Location.getCurrentPositionAsync({});
         setLocation(currentLocation);
       })();
      }, []);
      

      Este código solicitará permiso al usuario para acceder a su ubicación y luego obtendrá su ubicación actual utilizando el método getCurrentPositionAsync().

   4. Pasa la propiedad location al componente MapView de la siguiente manera:

      <map showsuserlocation="" initialregion="{{" latitude:="" location="" location.coords.latitude="" :="" 37.78825,="" longitude:="" location="" location.coords.longitude="" :="" -122.4324,="" latitudedelta:="" 0.0922,="" longitudedelta:="" 0.0421,="" }}=""></map>
      

      Aquí, estamos pasando la propiedad showsUserLocation al componente MapView para mostrar la ubicación actual del usuario en el mapa. También estamos pasando la propiedad initialRegion con los valores de latitude, longitude, latitudeDelta y longitudeDelta para centrar el mapa en la ubicación actual del usuario. Si location aún no se ha establecido (es decir, null), estamos utilizando algunos valores predeterminados.

      Ten en cuenta que estamos utilizando el operador ternario condition ? value1 : value2 para establecer condicionalmente los valores de latitude y longitude según si location se ha establecido o no.

   5. Tu código final debería verse así:

      import React, { useState, useEffect } from "react";
      import MapView from "react-native-maps";
      import styled from "styled-components/native";
      import { Searchbar } from "react-native-paper";
      import { View } from "react-native";
      import * as Location from 'expo-location';
      
      const Map = styled(MapView)`
       height: 100%;
       width: 100%;
      `;
      
      const SearchBarContainer = styled(View)`
       padding: ${(props) => props.theme.space[3]};
       position: absolute;
       z-index: 999;
       top: 20px;
       width: 100%;
      `;
      
      export const MapScreen = ({ navigation }) => {
       const [location, setLocation] = useState(null);
       const [errorMsg, setErrorMsg] = useState(null);
      
       useEffect(() => {
         (async () => {
           const { status } = await Location.requestForegroundPermissionsAsync();
           if (status !== 'granted') {
             setErrorMsg('Se denegó el permiso para acceder a la ubicación');
             return;
           }
      
           const currentLocation = await Location.getCurrentPositionAsync({});
           setLocation(currentLocation);
         })();
       }, []);
      
       return (
         <>
           <searchbarcontainer>
             <searchbar placeholder="ubicación"></searchbar>
           </searchbarcontainer>
           <map showsuserlocation="" initialregion="{{" latitude:="" location="" location.coords.latitude="" :="" 37.78825,="" longitude:="" location="" location.coords.longitude="" :="" -122.4324,="" latitudedelta:="" 0.0922,="" longitudedelta:="" 0.0421,="" }}=""></map>
      
       );
      };
      

      Con esta implementación, el MapView ahora se centrará automáticamente y se acercará a la ubicación actual del usuario cuando se abra la pantalla del mapa.

Comments are closed.