¿Cómo podemos asegurarnos de que podemos elegir un lugar?
Bueno, en la vista de mapa, en la pantalla del mapa, puede agregar un controlador onPress y esto se activa cada vez
que toca
en algún lugar del mapa y con eso no me refiero a los toques cuando se desplaza, sino
cuando toca allí sin desplazarse, así que si realmente Quiero seleccionar algo. Esto se activará y, por lo tanto, puede vincularse
a una función que defino aquí, que debería almacenar el lugar seleccionado.
Así que aquí tendré mi función de controlador de ubicación de selección que obtiene un objeto de evento y eso es
a lo que me uno onPress aquí.
Ahora podemos analizar este evento para tener una idea de lo que hay dentro, qué tipo de datos obtenemos.
Así que déjame guardar
esto y probémoslo, vamos al mapa y luego, una vez cargado, simplemente toca en algún lugar del mapa, como aquí.
Si ahora volvemos, esta es la salida que obtengo y allí ves que es un objeto bastante grande,
al final obtenemos un montón de datos allí que realmente no
necesitamos, es este evento sintético aquí.
Lo que sí tenemos, lo que es interesante es esta propiedad de evento nativa que es otro objeto, que tiene
una propiedad de coordenadas que es otro objeto, que tiene una latitud y longitud.
Eso es lo que nos interesa al final,
cierto, eso es lo que queremos
descubrir, ese es el
par de coordenadas que queremos obtener.
Así que este es el lugar, las coordenadas que el usuario hizo clic,
esto es lo que quiero almacenar aquí y sería bueno comenzar para agregar un marcador en ese lugar para que marquemos
ese lugar en el mapa. Para eso, por
supuesto, podemos usar el estado para guardar ese lugar seleccionado y en el componente, luego inicializar
esto aquí y tener nuestra ubicación seleccionada y establecer la ubicación
seleccionada con la ayuda del estado de uso. Inicialmente está vacío, no tenemos una ubicación seleccionada
inicialmente y luego podemos
crear un marcador aquí si tenemos uno. Para eso, podemos importar el componente marcador desde mapas nativos agregando
algunas importaciones con nombre aquí además de esta importación predeterminada que tenemos y podemos importar marcadores desde mapas React Native, es
tan simple como eso y podemos representar este marcador agregándolo entre abrir y cerrar etiquetas de vista de mapa que
ahora necesitamos,
para que podamos agregar un marcador aquí.
Ahora este marcador necesita alguna configuración, de lo contrario
Reaccionar mapas nativos no sabe dónde mostrarlo. Podemos agregar un título, por
ejemplo, ubicación elegida, pero lo que es más importante, puede agregar un accesorio de coordenadas
aquí y que espera obtener un objeto con una latitud y longitud allí. Así que aquí, agregaré una nueva variable, coordenadas de marcador, digamos, y si tengo una ubicación seleccionada
y ese es el estado que estoy administrando allí si tengo eso, entonces quiero establecer coordenadas de marcador
iguales a un objeto donde necesita tener una latitud llamada latitud, por lo
que no
es lat, debe ser latitud porque el componente marcador buscará una propiedad
llamada latitud y esa puede ser la ubicación
seleccionada. digamos,
depende de nosotros cómo guardamos esto, no lo estamos haciendo en este momento, pero más tarde lo
guardaré de modo que tengamos una utilería lat y una longitud que deba llamarse así y que pueda
contener el valor almacenado en selectedLocation. lng.
Ahora las coordenadas del marcador se configuran condicionalmente y aquí podemos verificar si las condiciones del marcador existen y,
si es así, usamos este acceso directo para generar también un marcador aquí. Ahora las coordenadas del marcador también es lo que podemos alimentar
aquí y tenga en
cuenta que esto es una coordenada, no coordenadas, es solo una coordenada.
En este punto, son nuestras coordenadas de marcador y ahora solo tenemos que asegurarnos de que finalmente establezcamos la ubicación seleccionada y, por
supuesto, quiero hacer
esto aquí en mi controlador de ubicación seleccionado. Allí quiero llamar a la
ubicación seleccionada para establecer mi estado, pasar un objeto allí y establecer mi estado en un objeto con una
tecla lat porque estoy tratando de extraer el lat allí por evento. nativeEvent como viste y allí, estaba esta propiedad de coordenadas
que tiene una propiedad de latitud y luego lng que también estoy extrayendo allí debe
establecerse en event. nativeEvent. coordenadas longitud. Y con este código, deberíamos
poder ver un marcador en el mapa. Así que vamos a intentarlo, vamos a
iOS, cargamos el mapa allí
y elegimos un
lugar y vemos un marcador en el lugar donde hago clic. Espero que sea lo mismo en
Android, intentemos allí, abra el mapa y, de hecho, si toco en
algún lugar,
también coloco mi marcador allí.
Así es como podemos trabajar con marcadores y cómo podemos seleccionar
lugares, todo está bien.
Ahora, en última instancia, quiero poder hacer clic en un botón de guardar allí que
aún no existe, que luego cierra este mapa y devuelve la ubicación seleccionada a mi nueva pantalla de lugar al final, a
la derecha, que tengo aquí también. Quiero volver a esa pantalla y, por supuesto, guardar mi
ubicación seleccionada.