나는 airbnb로 react-native-maps 라이브러리를 사용하여 Android 용 네이티브 기본 앱을 개발 중입니다. 이 앱은 홈 페이지에지도와 자동차 아이콘을 표시합니다.반응하는 네이티브 맵에서 계속 움직이는 자동차 아이콘을 표시하는 방법은 무엇입니까?
잘 작동하지만 자동차가 움직이고 자동차 좌표가 계속 변경되면지도가 부드럽게 렌더링되지 않습니다. 자동차 아이콘이있는 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>
);
}
:
여기 내 코드입니다.