如何通过本机上的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，一个具有经度，纬度，经度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了解更多信息。

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