Get current location, latitude and longitude in ReactNative using responsive maps

Question

In fact, I am developing a map location, when I click in a specific place, I get the latitude and longitude, but not the current location, latitude and longitude.

I don’t know how to find out.

How can I get them and how can I put a marker in this position.

Here is my code:

class Maps extends React.Component { constructor(props) { super(props); this.state = { region: { latitude: LATITUDE, longitude: LONGITUDE, latitudeDelta: LATITUDE_DELTA, longitudeDelta: LONGITUDE_DELTA, }, marker: { latlng:{ latitude: null, longitude: null, latitudeDelta: LATITUDE_DELTA, longitudeDelta: LONGITUDE_DELTA } } } } componentDidMount() { navigator.geolocation.getCurrentPosition ( (position) => { alert("value:" + position) }, (error) => { console.log(error) }, { enableHighAccuracy: true, timeout: 20000, maximumAge: 10000 } ) } onMapPress(e) { alert("coordinates:" + JSON.stringify(e.nativeEvent.coordinate)) this.setState({ marker: [{ coordinate: e.nativeEvent.coordinate }] }) } render() { return ( <View style={styles.container}> <View style={{flexGrow:1}}> <MapView ref="map" provider={this.props.provider} style={styles.map} onPress={this.onMapPress.bind(this)} provider = {PROVIDER_DEFAULT} mapType="standard" zoomEnabled={true} pitchEnabled={true} showsUserLocation={true} followsUserLocation={true} showsCompass={true} showsBuildings={true} showsTraffic={true} showsIndoors={true}> </MapView> </View> </View> ) } } 

Answer 1

I did this by following these steps using react-native@0.42.3 and react-native-maps@ ^0.13.1 and using react-native@0.44.0 and react-native-maps@ ^0.15.2 per day:

Set the mapRegion object in state , last longitude and last latitude to null :

 state = { mapRegion: null, lastLat: null, lastLong: null, } 

Then, in your componentDidMount() function, observe each change in the current position:

  componentDidMount() { this.watchID = navigator.geolocation.watchPosition((position) => { ... }); } 

When changes happen, update them in your this.state.mapRegion , passing the actual coordinates and delta values ​​(mine may differ from yours, so adapt them):

  componentDidMount() { this.watchID = navigator.geolocation.watchPosition((position) => { // Create the object to update this.state.mapRegion through the onRegionChange function let region = { latitude: position.coords.latitude, longitude: position.coords.longitude, latitudeDelta: 0.00922*1.5, longitudeDelta: 0.00421*1.5 } this.onRegionChange(region, region.latitude, region.longitude); }); } 

Then you need the onRegionChange() function, which is used to "set" new values ​​for your elements in the componentDidMount() function:

  onRegionChange(region, lastLat, lastLong) { this.setState({ mapRegion: region, // If there are no new values set the current ones lastLat: lastLat || this.state.lastLat, lastLong: lastLong || this.state.lastLong }); } 

Disable geolocation on componentWillUnmount() :

  componentWillUnmount() { navigator.geolocation.clearWatch(this.watchID); } 

And pass MapView current current mapRegion object, inside it will be MapView.Marker to show you the current latitude and longitude when they change:

  render() { return ( <View style={{flex: 1}}> <MapView style={styles.map} region={this.state.mapRegion} showsUserLocation={true} followUserLocation={true} onRegionChange={this.onRegionChange.bind(this)}> <MapView.Marker coordinate={{ latitude: (this.state.lastLat + 0.00050) || -36.82339, longitude: (this.state.lastLong + 0.00050) || -73.03569, }}> <View> <Text style={{color: '#000'}}> { this.state.lastLong } / { this.state.lastLat } </Text> </View> </MapView.Marker> </MapView> </View> ); } 

Add StyleSheet.absoluteFillObject for your map to display it correctly using the entire width and height of your device.

 const styles = StyleSheet.create({ map: { ...StyleSheet.absoluteFillObject, } }); 

So, for your onPress() function, you can do something similar to onRegionChange() to get the actual coordinates and set them:

  onMapPress(e) { let region = { latitude: e.nativeEvent.coordinate.latitude, longitude: e.nativeEvent.coordinate.longitude, latitudeDelta: 0.00922*1.5, longitudeDelta: 0.00421*1.5 } this.onRegionChange(region, region.latitude, region.longitude); } 

Check the full code on expo.io (although react-native-maps not installed)

Answer 2

I suggest you read this white paper on geolocation: https://facebook.imtqy.com/react-native/docs/geolocation.html

Then, with the current location, you can put this information in your state.

 navigator.geolocation.getCurrentPosition((position) => { this.setState({position: {longitude: position.longitude, latitude: position.latitude}}); }, (error) => { alert(JSON.stringify(error)) }, { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }); 

Now you can draw your final view using your marker in your rendering method:

 render() { return ( <MapView ...> <MapView.Marker coordinate={this.state.position} title="title" description="description" /> </MapView> ) }