**React Native Maps** - How do I zoom on Marker pressed?-CodePudding

For my internship, I have to create an app with a Maps view and markers called from an API (the standard GraphQL API). But I have to make the map Zoom on the marker when I click on it, and I don't understand how I can do that.
I looked for the documentation and I didn't understand it : animateCamera(camera: Camera, {duration: number}) But what is a camera object ? I don't have one. And how can I call animateCamera ? With a ref (_mapRef.current.animateCamera) ?

Here is my code :

<MapView
  style={styles.map}
  mapType={viewType}
  provider='google'
  ref={_map}
>
  {users !== undefined && 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>

Thanks for the help

PS: This is my first question on Stack, please don't be rude and do not hesitate to tell me if I missed a rule ! :)

PPS: Why does Stack delete my 'Hello' I put at the beginning everytime I edit this post ?

CodePudding user response：

React Native Maps Marker has a prop called onPress, you can use that to check when marker is clicked.

for example:

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

Create a function onMarkerClicked

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

Camera object is present by default to track below attributes

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