3

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

:

여기 내 코드입니다.

답변

0

GPS가 새로운 좌표를 계산하는 데 걸리는 시간이기 때문에 자동차가 "뛰는"것이라고 생각합니다. 새 좌표를 보내고 있지만 전환을 쉽게 풀지는 못합니다. GPS가 즉시 작동하지 않는다는 것을 명심하십시오.

마커에 애니메이션을 적용 할 수 있습니다. 여기에서 "애니메이션 마커 위치"를 참조하십시오 : https://github.com/airbnb/react-native-maps