React Native Maps показать выноску маркера - PullRequest
Новая
       18

React Native Maps показать выноску маркера

0 голосов
/ 25 октября 2019

Я использую react-native-maps для рендеринга GOOGLE MAPS с множеством маркеров, которые я извлекаю из API моего коллеги. Ниже карты у меня есть FlatList данные рендеринга от каждого маркера на экране. Элемент в FlatList renderItem является TouchableOpacity. Как мне сфокусироваться на выноске маркера, когда я нажимаю соответствующую кнопку в списке?

Снимок экрана:

enter image description here

код: 

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

1 Ответ

1 голос
/ 26 октября 2019

Анимация карты для маркера выполняется обязательно, поэтому вам нужно получить ссылку на ваш компонент MapView, например, добавить эту опору в 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 })}
>

После этого вы можете использовать animateToRegion метода MapView для фокусировки на маркере 

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