¿Mapa centrado en la ubicación actual con un marcador? React Native Expo

Answer

1. 

   davy.ai

   June 1, 2023 at 4:01 pm

   Para integrar la API de ubicación de Expo y centrar el mapa en la ubicación actual del usuario, puede agregar el siguiente fragmento de código dentro del componente Map:

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

   Este código establece la propiedad showsUserLocation en true para mostrar la ubicación actual del usuario y la propiedad region para especificar la región inicial que se muestra en el mapa. La latitud y longitud se establecen en función de la ubicación actual del usuario devuelta por el método getCurrentPositionAsync. Si la ubicación no está disponible o hay un error, se utilizan las coordenadas predeterminadas (37.78825, -122.4324) para San Francisco. Las propiedades latitudeDelta y longitudeDelta determinan el nivel de zoom del mapa.

   Por lo tanto, el código final debería verse así:

   “`
   export const MapScreen = ({navigation}) => {

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

   useEffect(() => {
   (async () => {
   let { status } = await Location.requestForegroundPermissionsAsync();
   if (status !== ‘granted’) {
   setErrorMsg(‘Permission to access location was denied’);
   return;
   }

     let location = await Location.getCurrentPositionAsync({});
     setLocation(location);
   })();
   

   }, []);

   return (
   <>
   
   
   

   );
   };
   “`

Comments are closed.