Карта всегда находится в центре искомого местоположения - PullRequest
Новая
       51

Карта всегда находится в центре искомого местоположения

3 голосов
/ 11 ноября 2019

Когда я ставлю код: region={this.props.region}, он работает и центрирует карту в искомом месте, но не позволяет выбирать другие маркеры на карте ... он всегда возвращается в искомое место, если я снимаю эточасть кода: region={this.props.region}, я могу выбрать другие маркеры, но при поиске в другом месте камера не перемещается в выбранное место. Как действовать в этом случае?

Вот код: 

<MapView
        provider="google"
        style={styles.map}
        //region={this.props.region}
        initialRegion={this.state.focusedlocation}
        ref={ref => (this.map = ref)}>
        {this.renderMarkers()}
        <MapView.Marker
          onPress={this.pickLocationHandler}
          coordinate={this.props.region}>
          <Image source={markerImage} style={styles.icon} />
        </MapView.Marker>
      </MapView>

Ниже приведен код для анимации маркеров: 

 pickLocationHandler = event => {
const coords = event.nativeEvent.coordinate;
console.log('Location picker Marker', coords);
this.map.animateToRegion({
  ...this.state.focusedlocation,
  latitude: coords.latitude,
  longitude: coords.longitude,
  latitudeDelta: LATITUDE_DELTA,
  longitudeDelta: LONGITUDE_DELTA,
});

Пожалуйстаоткрыть эту закуску ко всему коду

1 Ответ

1 голос
/ 20 ноября 2019

region используется, когда вы хотите контролировать область просмотра карты. В вашем случае вы можете использовать animateCamera, чтобы переместить карту в искомое местоположение. 

this.map.animateCamera({
  center: {latitude, longitude}
})

ОБНОВЛЕНИЕ

map-view.js 

export default class MapView extends Component {
  ...
  animateToLocation = (location) => {
    this.map.animateToRegion({
      latitude: location.latitude,
      longitude: location.longitude,
      latitudeDelta: LATITUDE_DELTA,
      longitudeDelta: LONGITUDE_DELTA,
    });
  }
  ...
  render() {
    return (
      <View style={styles.container} {...this.props}>
      ...
    )
  }
}

map-container.js 

class MapContainer extends React.Component {
  ...
  getCoordsFromName(loc) { 
    this.map.animateToLocation({
      latitude: loc.lat,
      longitude: loc.lng,
    })
  }

  render() {
    return (
      <View style={{ flex: 1}}>
          <MyMapView ref={ref => this.map = ref} region={this.state.region}/>
          <MapInput style = {{flex: 1, position : 'absolute'}} notifyChange={loc => this.getCoordsFromName(loc)} />
      </View>
    );
  }
}
...