Question

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

ScreenShot：

代码：

<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应该引用还渲染标记的组件，以便您可以在Marker的渲染中引用this.map。如果您的MapView组件包装在其他组件中，则需要forward ref才能获得对实际MapView组件的引用

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

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

React Native Maps显示标记标注

1 个答案: