React Native Maps 显示标记标注

Question

我正在使用react-native-maps 来渲染 GOOGLE 地图，其中包含我从同事的 API 中获取的大量标记。在地图下方，我有一个 FlatList 来自屏幕上每个标记的渲染数据。 FlatList 的renderItem 中的项目是TouchableOpacity。当我按下列表中的相应按钮时，如何专注于标记标注？

截图：

代码：

<Container>
  <StatusBar
    barStyle={theme.colors.statusDark}
    backgroundColor={theme.colors.background1}
  />
  <GoogleMaps>
    {markers.map(marker => (
      <MyMarker
        key={marker.uid}
        identifier={marker.uid}
        markerLatitude={marker.position.lat}
        markerLongitude={marker.position.lng}
        title={marker.name}
        address={marker.address}
        cashback={marker.cashback}
      />
    ))}
  </GoogleMaps>
  <DivisorSimple />
  <ListContainer>
    {fetchIsLoading ? (
      <ActivityIndicator size='large' />
    ) : (
      <FlatList
        data={markers}
        renderItem={({ item }) => (
          <ListMapItem
            handleClick={() => {}
            title={item.name}
            address={item.address}
            cashback={item.cashback}
            handleGetRoute={() => handleGetRoute(item.position.lat, item.position.lng)}
          />
        )}
        keyExtractor={item => item.uid}
      />
    )}
  </ListContainer>
</Container>

Answer 1

动画映射到标记是命令式完成的，因此您需要为 MapView 组件获取reference，例如将此道具添加到 MapView：

<MapView
  ...
  ref={ref => this.map = ref}
>
  {data.map(item => <Marker ... />)}
</MapView>

在最简单的情况下，this 应该指代也在渲染您的标记的组件，以便您可以在标记的渲染中引用this.map。如果您的 MapView 组件被包装到其他东西中，您将需要 forward ref 以获取实际 MapView 组件的引用

然后，您需要跟踪当前显示在地图上的区域，并且当用户移动相机时它会发生变化

<MapView
  ...
  onRegionChangeComplete={region => this.setState({ region })}
>

之后，您可以使用MapView's animateToRegion method 关注标记

// ListMapItem's handleClick prop
handleClick={() => {
      // construct new region from marker's lat/lng
      // and current region's deltas to keep zoom level
      const newRegion = {
        latitude: item.position.lat,
        longitude: item.position.lng,
        latitudeDelta: this.state.region.latitudeDelta,
        longitudeDelta: this.state.region.latitudeDelta,
      }
      // animate camera to that region over 500 ms
      this.map.animateToRegion(newRegion, 500)
    }}