Блог

Для моей стажировки мне нужно создать приложение с представлением карт и маркерами, вызываемое из API (стандартный API GraphQL). Но мне нужно увеличить масштаб карты на маркере, когда я нажимаю на него, и я не понимаю, как я могу это сделать.
Я искал документацию и не понял : animateCamera(camera: Camera, {duration: number}) Но что такое объект камеры ? У меня его нет. И как я могу вызвать анимационную камеру ? С ссылкой (_mapRef.current.animateCamera) ?

Вот мой код :

 <MapView
  style={styles.map}
  mapType={viewType}
  provider='google'
  ref={_map}
>
  {users !== undefined amp;amp; users.map((item, index) => (
    <Marker
      key={'user_'   index}
      title={item.username}
      description={item.posts.data.length   ' posts'}
      coordinate={{
        latitude: item.address.geo.lat,
        longitude: item.address.geo.lng
      }}
      onCalloutPress={() => {
        navigation.navigate('SingleUser', {user: item})
      }}
    />
  ))}
</MapView>
 

Спасибо за помощь

PS: Это мой первый вопрос в стеке, пожалуйста, не будьте грубы и не стесняйтесь сообщать мне, если я пропустил правило ! 🙂

PPS: Почему Стек удаляет мое «Привет», которое я ставлю в начале каждый раз, когда редактирую этот пост ?

У маркера React Native Maps есть опора под названием onPress, вы можете использовать ее для проверки нажатия на маркер.

например:

 <Marker
  key={'user_'   index}
  title={item.username}
  description={item.posts.data.length   ' posts'}
  coordinate={{
    latitude: item.address.geo.lat,
    longitude: item.address.geo.lng
  }}
  onCalloutPress={() => {
    navigation.navigate('SingleUser', {user: item})
  }}
  onPress={this.onMarkerClicked}
/>
 

Создайте функцию onMarkerClicked

 onMarkerClicked = () => {
  _map?.current?.getCamera().then((camera) => {
    camera.zoom  = 1;
    map?.current?.animateCamera(camera);
});
 

Объект камеры по умолчанию присутствует для отслеживания ниже атрибутов

 export interface Camera {
   center: LatLng;
   heading: number;
   pitch: number;
   zoom: number;
   altitude: number;
}