Get current location, latitude and longitude in ReactNative using react-native-maps
Solution 1
I did it following these steps using [email protected]
and react-native-maps@^0.13.1
and using [email protected]
and react-native-maps@^0.15.2
at the date:
Set a mapRegion
object in the state
, the last longitude
and the last latitude
as null
:
state = {
mapRegion: null,
lastLat: null,
lastLong: null,
}
Then within your componentDidMount()
function watch for each change in the current position:
componentDidMount() {
this.watchID = navigator.geolocation.watchPosition((position) => {
...
});
}
When there are changes update them in your this.state.mapRegion
, passing the actual coords and the delta
values (mine can be different to 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);
}, (error)=>console.log(error));
}
Then you need the onRegionChange()
function, that's being used to "set" new values to your elements within 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
});
}
Unmount the geolocation on componentWillUnmount()
:
componentWillUnmount() {
navigator.geolocation.clearWatch(this.watchID);
}
And render the MapView
passing your current mapRegion
object, the MapView.Marker
inside of it is just 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 the StyleSheet.absoluteFillObject for your map in order to render it properly using the whole width and height of your device.
const styles = StyleSheet.create({
map: {
...StyleSheet.absoluteFillObject,
}
});
So for your onPress()
function you could do something similar to the onRegionChange()
, that's to get the actual coordinates and to 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
isn't installed)
Solution 2
I suggest you to read this official documentation about geolocalisation: https://facebook.github.io/react-native/docs/geolocation.html
Then, with the current location, you can put that information into 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
});
You will be able next, in your render method, to compose your final view with a marker:
render() {
return (
<MapView ...>
<MapView.Marker
coordinate={this.state.position}
title="title"
description="description"
/>
</MapView>
)
}
Solution 3
Look for location permission using the following code:
try {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION
)
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
alert("You can use the location")
}
else {
alert("Location permission denied")
}
}
catch (err) {
console.warn(err)
}
Fetch the current location latitude and longitude using the following code:
this.watchID = navigator.geolocation.watchPosition((position) => {
let region = {
latitude: position.coords.latitude,
longitude: position.coords.longitude,
latitudeDelta: 0.00922*1.5,
longitudeDelta: 0.00421*1.5
}
}
Lavaraju
Updated on February 18, 2020Comments
-
Lavaraju over 4 years
I am developing a map location. When I click in some particular 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 the marker at that 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> ) } }