は、画面の中央で反応し、ネイティブちょっと私たちはスクロールしたり、画面をズームしても、このように画面の中央にとどまるオーバーレイマーカーを追加しようとしています

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 }); 
    }, 

はので、どのように私はマーカー画像をオーバーレイすることができますか？

Answer 1

私はこの問題を解決するには、2つのオプションを参照してください。ちょうどあなたの地域の変数の位置でMapView.Markerを追加

のMapViewの道

を：私の意見では

<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> 

をマーカーが少し遅れてその位置を更新するという問題に直面していますが、これは「正しい」方法です：私が地図を移動すると、マップに関してはその位置にとどまり、数百ミリ秒後にジャンプしますバクkをマップの中心に移動します（この問題のデバッグ方法や修正方法の提案は大歓迎です）。

目のオプションは、この問題に

を克服アイコンの道

全体の空間を満たすビュー、内部であなたのMapViewを入れてください。

<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を配置するために使用することができますのMapViewとmarginTop/marginLeftの前でそれをオーバーレイするのZIndexの使用：ビュー内中央にアイコンと自分のマップを追加します。