Obtener las coordenadas exactas en el mapa

  • Autor de la entrada:
  • Categoría de la entrada:React Native

Primero debes instalar los mapas mediante el comando npm install react-native-maps

import React from ‘react’;
import { StyleSheet, View, Text, Dimensions, ScrollView,TouchableOpacity,Platform } from ‘react-native’;
import MapView, { Marker, ProviderPropType,AnimatedRegion, MAP_TYPES } from ‘react-native-maps’;
import * as Location from ‘expo-location’;
import * as Permissions from ‘expo-permissions’;
import { Component } from ‘react’;
import Constants from ‘expo-constants’;

const { width, height } = Dimensions.get(‘window’);

const ASPECT_RATIO = width / height;
const LATITUDE = 6.2259714;
const LONGITUDE = -75.6987737;
const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;

class StaticMap extends React.Component {
constructor(props) {
super(props);

this.state = {
region: {
latitude: LATITUDE,
longitude: LONGITUDE,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA,
},
location: null,
errorMessage: »,
};
}

componentWillMount(){
this._getLocationAsync();
}

_getLocationAsync = async() => {
let {status} = await Permissions.askAsync(Permissions.LOCATION);
if(status !== ‘granted’){
this.setState({
errorMessage: ‘Permission not granted’
})
}
let location = await Location.getCurrentPositionAsync({});
this.setState({
location
})
}

render() {
let text = ‘Waiting..’;
if (this.state.errorMessage) {
text = this.state.errorMessage;
} else if (this.state.location) {
text = JSON.stringify(this.state.location.coords.latitude);
}

return (

<MapView
provider={this.props.provider}
style={styles.map}
scrollEnabled={true}
zoomEnabled={true}
pitchEnabled={false}
rotateEnabled={false}
initialRegion={this.state.region}
showsUserLocation={true}
followsUserLocation={true}
>
<Marker
title=’Usted esta aquí’
description=’This is a description’
coordinate={this.state.region}
/>
{text}

);
}
}

StaticMap.propTypes = {
provider: ProviderPropType,
};

const styles = StyleSheet.create({
container: {
…StyleSheet.absoluteFillObject,
justifyContent: ‘flex-end’,
alignItems: ‘center’,
},
scrollview: {
alignItems: ‘center’,
paddingVertical: 40,
},
map: {
height: ‘100%’,
width: ‘100%’,
},
});

export default StaticMap;