Para mi pasantía, tengo que crear una aplicación con una vista de Maps y marcadores llamados desde una API (la API estándar de GraphQL). Pero tengo que hacer que el mapa se acerque al marcador cuando hago clic en él, y no entiendo cómo puedo hacer eso.
Busqué la documentación y no la entendí: animateCamera(camera: Camera, {duration: number}) Pero, ¿qué es un objeto de cámara? no tengo uno ¿Y cómo puedo llamar a animateCamera? ¿Con una referencia (_mapRef.current.animateCamera)?
Aquí está mi código:
<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>Gracias por la ayuda
PD: Esta es mi primera pregunta en Stack, ¡no seas grosero y no dudes en decirme si me perdí una regla! :)
PPS: ¿Por qué Stack elimina mi 'Hola' que pongo al principio cada vez que edito esta publicación?
React Native Maps Marker tiene un accesorio llamado onPress, puede usarlo para verificar cuándo se hace clic en el marcador.
por ejemplo:
<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} />Crear una función enMarkerClicked
onMarkerClicked = () => { _map?.current?.getCamera().then((camera) => { camera.zoom += 1; map?.current?.animateCamera(camera); });El objeto de la cámara está presente de forma predeterminada para rastrear debajo de los atributos
export interface Camera { center: LatLng; heading: number; pitch: number; zoom: number; altitude: number; }