Я использую react-native-maps
, сейчас я могу обновить местоположение драйвера и обновить polyline
.То, чего я хочу достичь, это как Uber, я хочу анимировать автомобиль с новой координатой, а также вращать его в соответствии с курсом.Сейчас я могу обновить полилинию, но без анимации я провел небольшое исследование и узнал, что для этого мы используем Animated Markers
, но не смог найти документацию для этой реализации.мой метод рендеринга:
renderContent() {
if (this.state.loading) {
return (
<Loading />
);
} else if (this.state.error) {
return (
<Card>
<Heading> No directions available </Heading>
<Button>
<Text> Retry </Text>
<Icon name='refresh' />
</Button>
</Card>
);
}
if (this.props.liveLocation.origin !== null) {
const { origin, des, coords } = this.props.liveLocation;
return (
<MapView
provider='google'
style={{ height: '100%', width: '100%' }}
ref={ref => { this.map = ref; }}
initialRegion={{
latitude: Number(origin.lat),
longitude: Number(origin.lng),
longitudeDelta: 0.2,
latitudeDelta: 0.2
}}
onLayout={this.onLayout}
>
{origin != null && <MapView.Marker
coordinate={{ latitude: Number(origin.lat), longitude: Number(origin.lng) }}
>
<Icon name='directions-car' />
</MapView.Marker>}
{des != null && <MapView.Marker
coordinate={{ latitude: Number(des.lat), longitude: Number(des.lng) }}
>
<Icon name='place' />
</MapView.Marker>}
{coords.length > 1 &&
<MapView.Polyline
coordinates={coords}
strokeWidth={2}
strokeColor="black"
/>
}
</MapView>
);
}
}
у источника есть {lat, lng, заголовок и т. д. и т. д.}