반응 네이티브에서 화면 중앙에있는지도에 오버레이 마커를 만드는 방법

Question

안녕하세요, 화면을 스크롤하거나 확대해도 오버레이 마커를 추가하려고합니다.

움직이는 마커는 초기 위치에서 시도했지만 화면을 빨리 움직이면 뒤떨어졌습니다.

componentDidMount: function() { 
    this.fetchData(); 
    navigator.geolocation.getCurrentPosition(
     (position) => { 
     this.setState({ 
      region: { 
      latitude: position.coords.latitude, 
      longitude: position.coords.longitude, 
      latitudeDelta: LATITUDE_DELTA, 
      longitudeDelta: LONGITUDE_DELTA 
      } 
     }); 
     }, 
    ); 
    this.watchID = navigator.geolocation.watchPosition((position) => { 
     const newRegion = { 
     latitude: position.coords.latitude, 
     longitude: position.coords.longitude, 
     latitudeDelta: LATITUDE_DELTA, 
     longitudeDelta: LONGITUDE_DELTA 
     } 

     this.onRegionChange(newRegion); 
    }); 

    }, 

    componentWillUnmount: function() { 
    navigator.geolocation.clearWatch(this.watchID); 
    }, 

    onRegionChange(region) { 
    this.setState({ region }); 
    }, 

그래서 내가 어떻게 마커 이미지를 오버레이 할 수 있습니다 그래서 난 코드가 내가 마커 이동했을되는 화면 여기

의 중심에 마커 이미지를 설정하려면?

<MapView 
    style={styles.map} 
    region={this.state.region} 
    onRegionChange={this.onRegionChange.bind(this)}> 
    <MapView.Marker 
     coordinate={{latitude: this.state.region.latitude, longitude: this.state.region.longitude}} 
    /> 
    </MapView> 

제 생각 :

지도보기 방법은

그냥 지역 변수의 위치와 MapView.Marker을 추가

Answer 1

나는이 문제를 해결하기 위해 두 가지 옵션 참조 이것은 마커가 작은 지연으로 위치를 업데이트한다는 문제에 직면하지만 "올바른"방식입니다.지도를 움직이면지도와 관련하여 위치가 유지되고 몇 백 밀리 초가 지나면 점프됩니다. 박씨 k를지도 중심으로 이동하십시오 (이 문제를 디버그하거나 해결하는 방법에 대한 제안은 매우 환영합니다).

두 번째 옵션은이 문제

에게

전체 공간을 채우는보기 안에 당신의지도보기를 넣어 아이콘 방식을 극복한다.

<View style={StyleSheet.absoluteFillObject}> 
    <Icon name="map-marker" 
    style={{  
     zIndex: 3, 
     position: 'absolute', 
     marginTop: -37, 
     marginLeft: -11, 
     left: '50%', 
     top: '50%'}} 
    size={40} 
    color="#f00" /> 
    <MapView 
    style={StyleSheet.absoluteFillObject} 
    region={this.state.region} 
    onRegionChange={this.onRegionChange.bind(this)}> 
    </MapView> 
</View> 

주 중심에있는 마커의 needletip을하는 데 사용할 수있는지도보기와 marginTop/marginLeft의 앞에 그것을 오버레이 Z- 색인의 사용 :보기 내부에는 중앙에 아이콘과지도를 추가 할 수 있습니다.