Как разместить карту в точке назначения с помощью MapViewDirections на реагировать родной?

Question

Как вписать карту в пункт назначения? Мне просто нужно подогнать камеру к точке назначения, а не к обеим координатам (начальная и конечная, как сегодня). Как мне это сделать? Еще один способ подгонки координат к этому?

{destination && (
  <Fragment>
    <Directions
      origin={region}
      destination={destination}
      onReady={result => {
        this.setState({ duration: Math.floor(result.duration) });
        this.mapView.fitToCoordinates(result.coordinates, {
          edgePadding: {
            right: getPixelSize(10),
            left: getPixelSize(10),
            top: getPixelSize(10),
            bottom: getPixelSize(50),
          },
          animated: true,
        });
      }}
    />
    <Marker
      onPress={this.pickLocationHandler}
      coordinate={destination}
      centerOffset={{ x: -18, y: -60 }}
      anchor={{ x: 0, y: 0 }}
    //opacity={0.6}
    >
      <LocationBox>
        <LocationText>{destination.title}</LocationText>
      </LocationBox>
    </Marker>
    <Marker
      coordinate={region}
      anchor={{ x: 0, y: 0 }}
      onPress={this.pickLocationHandler}>
      <LocationBox>
        <LocationTimeBox>
          <LocationTimeText>{duration}</LocationTimeText>
          <LocationTimeTextSmall>
            Tempo de Viagem
          </LocationTimeTextSmall>
        </LocationTimeBox>
        <LocationText>{location}</LocationText>
      </LocationBox>
    </Marker>
  </Fragment>
)}

Было бы неплохо, если бы у кого-нибудь был какой-нибудь код, который работает вместе с GooglePlacesAutocomplete.

Answer 1

Предполагая, что вы используете собственные карты-реакции, вы можете использовать следующие методы:

animateToRegion : принимает два параметра:

• region, объект с долготой, широтой, longitudeDelta, latitudeDelta (последние два - насколько близко / далеко ваша камера будет от координат)
• duration, продолжительность анимации в миллисекундах

// focus on NYC

this.mapView.animateToRegion({
  latitude: 40.730610,
  longitude: -73.935242,
  latitudeDelta: 0.026,
  longitudeDelta: 0.027,
}, 2000)

fitToCoordinates : принимает два параметра:

• coordinates, массив координат, которые нужно уместить на экране камеры
• options: edgePadding (сколько отступов должно окружать вид), * ​​1026 * (хотите ли вы анимировать этот вид или нет)

// focus on NYC

this.mapView.animateToRegion([{
  latitude: 40.730610,
  longitude: -73.935242,
}], {
  edgePadding: {
    top: 20,
    right: 20,
    bottom: 20,
    left: 20,
  },
  animated: true,
})

Эти методы нужно вызывать на Ссылка на карту, как в примере с кодом: this.mapView.fitToCoordinates(...)

Существует множество методов, которые вы можете использовать для подгонки камеры к точке назначения, потенциально лучше подходящих для вашего случая использования. чем то, что я описал выше. Проверьте RN Maps docs для получения дополнительной информации.

Answer 2

Это мое решение, я удаляю указания метода и заменяю эту анимацию:

Добавьте этот метод:

  getCoordsFromName(loc) { 
     this.mapView.animateToRegion({
      ...this.state.region,
      latitude: loc.lat,
      longitude: loc.lng,
      latitudeDelta: LATITUDE_DELTA,
      longitudeDelta: LONGITUDE_DELTA,
    });
    this.setState(prevState => {
      return {
        region: {
          ...prevState.region,
          latitude: loc.lat,
          longitude: loc.lng,
        },
      };
    });
  }

соответственно с:

 <MapInput style = {{flex: 1, position : 'absolute'}} notifyChange={loc => this.getCoordsFromName(loc)} />