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

Question

bounty到期在4天内。该问题的答案有资格获得+ 50声望赏金。Matheus cabral正在寻找来自信誉良好的来源的答案：“如果您有一些在用户搜索某个位置时像uber一样工作的代码，请将该代码设置为适合该位置的标记，请帮助我设置此代码...”

如何将地图拟合到目的地？我只需要将相机安装到目标点，而不是两个坐标（像今天这样的初始点和目标点）。任何想法如何做到这一点？使坐标适合此的另一种方法？

{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，一个具有经度，纬度，经度Delta和纬度Delta的对象（后两个是相机与坐标之间的距离/相距远近）]
• 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,
})

这些方法需要在您地图的ref上调用，就像您在代码示例中所做的：this.mapView.fitToCoordinates(...)

您可以使用很多方法将相机安装到目的地，这可能比我上面描述的更适合您的用例。检查RN Maps docs了解更多信息。