реактивное обновление местоположения пользователя

Я хочу использовать маркер просмотра карты для отображения направления/маршрута между местоположением пользователя и пунктом назначения в режиме реагирования и службе json, которая указывала маршрут в виде точек. теперь я хочу, когда пользователь перемещается и его местоположение изменяется, что-то вроде OnCoordinateChange для координаты маркера, вызывает функцию, чтобы я мог отправлять местоположение начальной точки в режиме реального времени в службу маршрутизатора и получать новое направление на основе нового местоположения.

Как я могу это сделать?

вот некоторые части моего кода:

(не обращайте внимания на этот кусок кода #$%@ между двумя блоками комментариев!)


      componentDidMount() {
        //User Location
        navigator.geolocation.getCurrentPosition(
          position => {
          fetch('https://api.openrouteservice.org/v2/directions/foot-walking?api_key='+ OsmDirectionApiKet +'&start='+position.coords.longitude+','+position.coords.latitude+'&end={}')
          .then((response) => response.json())
          .then((responseJson) => {

/*********
Began some of code that just me and god can understand why and has nothing effect on question!!! 
**********/
            var PolylineGetCoordinates = responseJson.features[0].geometry.coordinates;       
            var PolylineFinalCoordinates = [];
            for(i=0;i<PolylineGetCoordinates.length;i++){
                var obj = {};
                obj.longitude = PolylineGetCoordinates[i][0];
                obj.latitude = PolylineGetCoordinates[i][1];
                PolylineFinalCoordinates.push(obj);
            }

/*********
 End some of $%#@ code!!! 
*********/

this.setState({ 
              PolylineCoordinates :PolylineFinalCoordinates
            });
})
          .catch((error) => {
            console.error(error);
          });
          },
          error => {
            this.setState({
              error: 'error'
            });
          }
        );
    }

//-------------------


<Polyline coordinates={PolylineCoordinates} />

react-native react-native-maps
person Pooya Behravesh    schedule 03.08.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

хорошо нашел {ПРОСТОЕ} решение! просто переместил коды в componentDidMount() в другую функцию и изменил коды в componentDidMount на:

componentDidMount() {
    this.getCurrentLocation;
    setInterval(this.getCurrentLocation, 500);
}

и добавил эту строку в конструктор:

this.getCurrentLocation = this.getCurrentLocation.bind(this);
person Pooya Behravesh    schedule 03.08.2019