我正在使用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,heading等等}