反応しているネイティブマップ上で連続的に移動する車のアイコンを表示するには？

Question

私はairbnbでreact-native-mapsライブラリを使用して、アンドロイドの反応するネイティブアプリを開発しています。このアプリはホームページと車のアイコンを表示します。

これはうまくいきますが、車が動いていて、車の座標が連続的に変化している場合、マップはスムーズに描画されません。車のアイコンを含むMapViewマーカーは、パスに沿って点から点へジャンプします。私の期待は、マップ上に連続的に動くオブジェクトを、Googleマップ上に表示するのと同じように表示することです。この上の任意のヘルプははるかに高く評価されて

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> 
); 
} 

：

は、ここに私のコードです。

Answer 1

私は、GPSが新しい座標を計算するのにかかる時間であり、あなたは新しい座標を送信しているにすぎないが、あなたは移行を緩和していないので、瞬時にGPSが作動しないことに注意してください。

マーカーをアニメートすることができます。 「アニメーションマーカーの位置」を参照：https://github.com/airbnb/react-native-maps