如何在 React Native 上使用 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

假设你使用的是 react-native-maps，你可以使用这些方法：

animateToRegion：需要两个参数：

region，一个具有经度、纬度、longitudeDelta、latitudeDelta 的对象（最后两个是 close/far 相机与坐标的距离）
duration，动画持续时间，以毫秒为单位

// focus on NYC

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

fitToCoordinates：需要两个参数：

coordinates，要适应相机视图的坐标数组
options：edgePadding（视图周围应该有多少填充），animated（是否要为此视图设置动画）

// 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)} />

如何在 React Native 上使用 MapViewDirections 使地图适合目标点？

How to fit the map in a destination point with MapViewDirections on react native?

google-maps

directions

react-native