Comments (1)
Yes it does. Whenever origin
, destination
or waypoints
changes, the directions are recalculated.
If you don't want this behaviour you can prevent this by not directly linking the user's “live” location to the origin
prop.
In code that would translate to something like this:
import React, { Component } from 'react';
import MapView from 'react-native-maps';
import MapViewDirections from 'react-native-maps-directions';
class Example extends Component {
constructor(props) {
super(props);
this.state = {
// userLocation = the "live" user location.
// We'll update this whenever the user his/her location changes
// @note: if you don't want to re-render on every user move, consider storing this in a property / field
userLocation: null,
// A cached version of the user location, we'll use this as the origin in MapViewDirections
// By using a cached version (which doens't change), it won't hit the Google Maps Directions API
// whenever the user moves.
userLocationForDirections: null,
};
this.watchID = null;
}
componentDidMount = () => {
navigator.geolocation.getCurrentPosition(
(position) => {
this.setState({
userLocation: position.coords,
userLocationForDirections: position.coords,
});
},
(error) => {
// …
},
{ enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
);
this.watchID = navigator.geolocation.watchPosition((position) => {
this.setState({
userLocation: position.coords
});
});
}
componentWillUnmount = () => {
this.watchID && navigator.geolocation.clearWatch(this.watchID);
}
render() {
const {
userLocation,
userLocationForDirections,
} = this.state;
if (!userLocation || !userLocationForDirections) {
return null;
}
return (
<MapView
// …
>
<MapViewDirections
origin={`${userLocationForDirections.latitude},${userLocationForDirections.longitude}`}
destination={/* … */}
// …
/>
</MapView>
);
}
}
from react-native-maps-directions.
Related Issues (20)
- Fix for timePrecison
- Check render method for 'MapViewDirections' HOT 3
- Render Pre-existing JSON Directions Data in Map HOT 5
- How is this library showing the Steps? HOT 1
- App crashes on real device (iOS only) for some routes with precision={'high'} HOT 2
- how to get get toll info
- Call Directions Api only if new location is not in already made polyline. HOT 2
- Using MapKit instead of Google for directions? HOT 3
- App crashes when GPS is not enabled HOT 1
- How to draw route according to vehicle type
- LinearGradient for the direction color
- I see nothing on my mobile screen(android emulator) HOT 1
- onReady event is firing at the very start.
- Not Supported In React Native 0.63.4
- Any way to get bounds in the data returning from onReady method of MapViewDirections HOT 1
- onReady callback is changing automatically to distance : 0 duration : 0 from its given pickup and destination HOT 1
- Direction line flickering HOT 1
- API ERROR HOT 1
- onReady result json data and navigation
- Please add ability to pass time of departure to timePrecision props
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-maps-directions.