I currently on module of tracking the users using the geolocation of google map. I started coding this since 3 days ago, I use the react-native-maps for the mapview, since I already plot all the codes displaying my current location and watching my position where I am now. I found out when I walk outside my marker is not moving, and I try to debug the state of my lat and long, the watching function is not working well.
Question: How to make a real time moving marker without refreshing the application using the GPS of android.
Since I already done creating the function, I will show you guys my codes, so the other having same issue will solved there problem also,
This is my current location on my mobile phone,
As you can see on the top of my google map, is my current location or the lat and long of my location.
14.6211748 , 121.0138529
Now since I already get my lat and long, Using the watch position the GPS automatically detect my lat and long every time move right? The problem here why my lat and long is not changing in real time?
Is there other function for the real time update of lat long?
Now guys, This is my code for that,
My State:
this.state = { currentLocation: { latitude:0, longitude:0, latitudeDelta:0, longitudeDelta:0 }, updatedLocation: { latitude:0, longitude:0, latitudeDelta:0, longitudeDelta:0 }, markerPosition: { latitude:0, longitude:0, latitudeDelta:0, longitudeDelta:0 } }
My async Current Location
watchID: ?number = null; async _currentPosition() { navigator.geolocation.getCurrentPosition((position) => { //lat and long current var lat = parseFloat(position.coords.latitude) var long = parseFloat(position.coords.longitude) var currentLocationValue = { latitude:lat, longitude:long, latitudeDelta:LATTITUDE_DELTA, longitudeDelta:LONGTITUDE_DELTA } this.setState({currentLocation:currentLocationValue}) this.setState({markerPosition:currentLocationValue}) console.log(currentLocationValue); },(error) => alert(JSON.stringify(error)), {enableHighAccuracy: true, distanceFilter: 1, timeout: 1000}) }
For watching position function:
async _updatedPosition() { this.watchID = navigator.geolocation.watchPosition((position) => { //lat and long current var lat = parseFloat(position.coords.latitude) var long = parseFloat(position.coords.longitude) var updateLocationValue = { latitude:lat, longitude:long, latitudeDelta:LATTITUDE_DELTA, longitudeDelta:LONGTITUDE_DELTA } this.setState({updatedLocation:updateLocationValue}) this.setState({markerPosition:updateLocationValue}) console.log(updateLocationValue); },(error) => alert(JSON.stringify(error)), {enableHighAccuracy: true, distanceFilter: 1, timeout: 1000}) }
My Component Mounts:
componentDidMount() { this._currentPosition(); this._updatedPosition(); } componentWillUnmount() { navigator.geolocation.clearWatch(this.watchID) }
My Render function:
render() { return ( <View style={styles.container}> <MapView style = {styles.mapcontainer} region = {this.state.currentLocation} onRegionChange={this.onRegionChange} > <MapView.Marker coordinate={this.state.markerPosition}> <View style={styles.radius}> <View style={styles.marker}/> </View> </MapView.Marker> </MapView> <Text> {this.state.updatedLocation.latitude},{this.state.updatedLocation.longitude} </Text> </View> ) }
