反应性更新用户位置

时间:2019-08-03 19:25:21

标签: react-native react-native-maps

我想使用mapview标记在react-native和以路线为点的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} />

1 个答案:

答案 0 :(得分:0)

找到了一个{SIMPLE}解决方案! 刚刚在另一个函数中移动了componentDidMount()中的代码,并将componentDidMount中的代码更改为:

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

并将此行添加到构造函数中:

this.getCurrentLocation = this.getCurrentLocation.bind(this);