как создать оверлей маркер на карте, которая остается в центре экрана в реакции родной

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

Я вижу два варианта решения этой проблемы:

MapView путь

Просто добавьте MapView.Marker с положением переменной области:

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

На мой взгляд это «правильный» способ, хотя я сталкиваюсь с проблемой, что маркер обновляет свое положение с небольшой задержкой: когда я перемещаю карту, она остается на ее позиции по отношению к карте, а после нескольких сотен миллисекунд она прыгает BAC k в центр карты (предложения по отладке или исправлению этой проблемы очень приветствуются).

Второй вариант преодолевает Эта проблема

The Icon путь

Поместите свой MapView внутри View, который заполняет все пространство. Внутри View добавить центрированный значок и карту:

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

Обратите внимание на использовании ZIndex для наложения его перед MapView и MarginTop/MarginLeft, которые могут быть использованы для размещения needletip маркеров в центре.