1 00:00:02,110 --> 00:00:04,450 ¿Cómo podemos asegurarnos de que podemos elegir un lugar? 2 00:00:04,870 --> 00:00:10,900 Bueno, en la vista de mapa, en la pantalla del mapa, puede agregar un controlador onPress y esto se activa cada vez 3 00:00:10,900 --> 00:00:11,580 que toca 4 00:00:11,680 --> 00:00:16,690 en algún lugar del mapa y con eso no me refiero a los toques cuando se desplaza, sino 5 00:00:16,690 --> 00:00:23,130 cuando toca allí sin desplazarse, así que si realmente Quiero seleccionar algo. Esto se activará y, por lo tanto, puede vincularse 6 00:00:23,170 --> 00:00:27,010 a una función que defino aquí, que debería almacenar el lugar seleccionado. 7 00:00:27,010 --> 00:00:33,940 Así que aquí tendré mi función de controlador de ubicación de selección que obtiene un objeto de evento y eso es 8 00:00:33,940 --> 00:00:36,260 a lo que me uno onPress aquí. 9 00:00:36,260 --> 00:00:42,440 Ahora podemos analizar este evento para tener una idea de lo que hay dentro, qué tipo de datos obtenemos. 10 00:00:42,440 --> 00:00:44,300 Así que déjame guardar 11 00:00:44,330 --> 00:00:52,550 esto y probémoslo, vamos al mapa y luego, una vez cargado, simplemente toca en algún lugar del mapa, como aquí. 12 00:00:52,550 --> 00:00:58,450 Si ahora volvemos, esta es la salida que obtengo y allí ves que es un objeto bastante grande, 13 00:00:58,700 --> 00:01:02,280 al final obtenemos un montón de datos allí que realmente no 14 00:01:02,510 --> 00:01:04,700 necesitamos, es este evento sintético aquí. 15 00:01:04,850 --> 00:01:10,880 Lo que sí tenemos, lo que es interesante es esta propiedad de evento nativa que es otro objeto, que tiene 16 00:01:10,880 --> 00:01:15,170 una propiedad de coordenadas que es otro objeto, que tiene una latitud y longitud. 17 00:01:15,170 --> 00:01:17,090 Eso es lo que nos interesa al final, 18 00:01:17,090 --> 00:01:18,520 cierto, eso es lo que queremos 19 00:01:18,530 --> 00:01:19,700 descubrir, ese es el 20 00:01:19,700 --> 00:01:21,000 par de coordenadas que queremos obtener. 21 00:01:21,020 --> 00:01:24,640 Así que este es el lugar, las coordenadas que el usuario hizo clic, 22 00:01:24,650 --> 00:01:30,850 esto es lo que quiero almacenar aquí y sería bueno comenzar para agregar un marcador en ese lugar para que marquemos 23 00:01:30,860 --> 00:01:34,430 ese lugar en el mapa. Para eso, por 24 00:01:34,420 --> 00:01:42,260 supuesto, podemos usar el estado para guardar ese lugar seleccionado y en el componente, luego inicializar 25 00:01:43,100 --> 00:01:48,170 esto aquí y tener nuestra ubicación seleccionada y establecer la ubicación 26 00:01:50,500 --> 00:01:58,870 seleccionada con la ayuda del estado de uso. Inicialmente está vacío, no tenemos una ubicación seleccionada 27 00:01:58,870 --> 00:02:01,200 inicialmente y luego podemos 28 00:02:01,270 --> 00:02:08,170 crear un marcador aquí si tenemos uno. Para eso, podemos importar el componente marcador desde mapas nativos agregando 29 00:02:08,170 --> 00:02:14,590 algunas importaciones con nombre aquí además de esta importación predeterminada que tenemos y podemos importar marcadores desde mapas React Native, es 30 00:02:14,590 --> 00:02:20,530 tan simple como eso y podemos representar este marcador agregándolo entre abrir y cerrar etiquetas de vista de mapa que 31 00:02:20,530 --> 00:02:21,470 ahora necesitamos, 32 00:02:21,640 --> 00:02:23,780 para que podamos agregar un marcador aquí. 33 00:02:23,870 --> 00:02:27,090 Ahora este marcador necesita alguna configuración, de lo contrario 34 00:02:27,170 --> 00:02:32,840 Reaccionar mapas nativos no sabe dónde mostrarlo. Podemos agregar un título, por 35 00:02:33,230 --> 00:02:40,560 ejemplo, ubicación elegida, pero lo que es más importante, puede agregar un accesorio de coordenadas 36 00:02:40,590 --> 00:02:53,260 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 37 00:02:53,320 --> 00:03:00,190 y ese es el estado que estoy administrando allí si tengo eso, entonces quiero establecer coordenadas de marcador 38 00:03:00,190 --> 00:03:05,050 iguales a un objeto donde necesita tener una latitud llamada latitud, por lo 39 00:03:05,080 --> 00:03:06,070 que no 40 00:03:06,070 --> 00:03:10,890 es lat, debe ser latitud porque el componente marcador buscará una propiedad 41 00:03:12,100 --> 00:03:15,390 llamada latitud y esa puede ser la ubicación 42 00:03:16,710 --> 00:03:17,860 seleccionada. digamos, 43 00:03:17,970 --> 00:03:22,970 depende de nosotros cómo guardamos esto, no lo estamos haciendo en este momento, pero más tarde lo 44 00:03:22,970 --> 00:03:28,100 guardaré de modo que tengamos una utilería lat y una longitud que deba llamarse así y que pueda 45 00:03:28,100 --> 00:03:31,150 contener el valor almacenado en selectedLocation. lng. 46 00:03:31,370 --> 00:03:36,560 Ahora las coordenadas del marcador se configuran condicionalmente y aquí podemos verificar si las condiciones del marcador existen y, 47 00:03:36,890 --> 00:03:44,100 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 48 00:03:44,100 --> 00:03:45,900 aquí y tenga en 49 00:03:45,900 --> 00:03:49,890 cuenta que esto es una coordenada, no coordenadas, es solo una coordenada. 50 00:03:49,890 --> 00:03:56,260 En este punto, son nuestras coordenadas de marcador y ahora solo tenemos que asegurarnos de que finalmente establezcamos la ubicación seleccionada y, por 51 00:03:56,250 --> 00:03:57,420 supuesto, quiero hacer 52 00:03:57,620 --> 00:04:01,740 esto aquí en mi controlador de ubicación seleccionado. Allí quiero llamar a la 53 00:04:01,820 --> 00:04:08,330 ubicación seleccionada para establecer mi estado, pasar un objeto allí y establecer mi estado en un objeto con una 54 00:04:08,330 --> 00:04:16,450 tecla lat porque estoy tratando de extraer el lat allí por evento. nativeEvent como viste y allí, estaba esta propiedad de coordenadas 55 00:04:16,490 --> 00:04:22,580 que tiene una propiedad de latitud y luego lng que también estoy extrayendo allí debe 56 00:04:22,580 --> 00:04:31,520 establecerse en event. nativeEvent. coordenadas longitud. Y con este código, deberíamos 57 00:04:31,520 --> 00:04:35,480 poder ver un marcador en el mapa. Así que vamos a intentarlo, vamos a 58 00:04:35,480 --> 00:04:36,900 iOS, cargamos el mapa allí 59 00:04:36,950 --> 00:04:38,240 y elegimos un 60 00:04:41,190 --> 00:04:47,640 lugar y vemos un marcador en el lugar donde hago clic. Espero que sea lo mismo en 61 00:04:47,640 --> 00:04:53,480 Android, intentemos allí, abra el mapa y, de hecho, si toco en 62 00:04:53,520 --> 00:04:54,720 algún lugar, 63 00:04:58,440 --> 00:05:01,380 también coloco mi marcador allí. 64 00:05:01,410 --> 00:05:05,290 Así es como podemos trabajar con marcadores y cómo podemos seleccionar 65 00:05:05,340 --> 00:05:06,820 lugares, todo está bien. 66 00:05:06,810 --> 00:05:12,090 Ahora, en última instancia, quiero poder hacer clic en un botón de guardar allí que 67 00:05:12,090 --> 00:05:19,750 aún no existe, que luego cierra este mapa y devuelve la ubicación seleccionada a mi nueva pantalla de lugar al final, a 68 00:05:19,750 --> 00:05:24,940 la derecha, que tengo aquí también. Quiero volver a esa pantalla y, por supuesto, guardar mi 69 00:05:24,950 --> 00:05:25,500 ubicación seleccionada.