如何在React Native地图上显示持续移动的汽车图标？

Question

我正在使用airbnb的react-native-maps库来开发我的React Native应用程序，该应用程序在主页上显示地图和汽车图标。

它运行良好，但当汽车移动且汽车坐标不断变化时，地图无法平滑地渲染。MapView标记与汽车图标会沿着路径从一个点跳到另一个点。我的期望是在地图上显示一个连续移动的对象，就像在谷歌地图上一样。

以下是我的代码：

this.state = {
  latitude: 22.55231,
  longitude: 88.56772,
  angle: 0
}

componentDidMount(){
  navigator.geolocation.getCurrentPosition(
    position => {
      let latitude = position.coords.latitude;
      let longitude = position.coords.longitude;
      let angle = position.coords.heading;
      this.setState({latitude, longitude, angle});
    },
    error => console.log(error),
    {
      // enableHighAccuracy: true
    }
  );

  navigator.geolocation.watchPosition(
    position => {
      let latitude = position.coords.latitude;
      let longitude = position.coords.longitude;
      let angle = position.coords.heading;
      this.setState({latitude, longitude, angle});
    },
    error => console.log(error),
    {
      // enableHighAccuracy: true
    }
  );  
}

getMapRegion(){
  return {
    latitude: this.state.latitude,
    longitude: this.state.longitude,
    latitudeDelta: 0.9271,
    longitudeDelta: ASPECT_RATIO * 0.9271
  }
}

render(){
  let angle = this.state.angle || 0; 
  return(
    <MapView style={styles.map}
      showUserLocation={true}
      followUserLocation={true}
      region={this.getMapRegion()}>
      <MapView.Marker 
        title={'Hi'}
        style={{
          transform: { rotate: `${angle}deg` },
          width: 20,
          height: 20
        }}
        image={require('../../../images/car-marker-2.png')}
        coordinate={{ latitude: this.state.latitude, longitude: this.state.longitude }}/>
    </MapView>
  );
}

非常感谢您的帮助。

请提供更多信息，以便我更好地理解您需要翻译的内容。

- Sibaprasad Maiti

Answer 1

我认为汽车“跳跃”是因为GPS需要时间来计算新的坐标，你只是发送了新的坐标但没有使过渡缓慢进行。请记住GPS并非即时工作。

您可能需要动画标记。请参见此处的“Animated Marker Position”: https://github.com/airbnb/react-native-maps

- sebastianf182

Answer 2

尝试在watchPosition中传递参数"distanceFilter: 10"。将其设置为0以不过滤位置。默认为100m。在我的情况下它运行良好。

- Rohit Monga