1 00:00:02,340 --> 00:00:07,350 Así que ahora también quiero mostrar una pequeña vista previa del mapa aquí y hay diferentes formas de 2 00:00:07,350 --> 00:00:11,000 hacerlo, por supuesto, y luego también agregaremos un mapa interactivo a esta aplicación. 3 00:00:11,010 --> 00:00:12,970 Por ahora, solo quiero tener una 4 00:00:12,960 --> 00:00:19,570 imagen estática, así que, como una instantánea de un mapa, lo bueno es que Google tiene una API para nosotros que genera esas instantáneas. 5 00:00:19,620 --> 00:00:24,810 Puedes buscar en Google API estática de Google Maps para encontrar la documentación oficial donde puedes aprender 6 00:00:24,810 --> 00:00:26,010 todo sobre eso, 7 00:00:26,190 --> 00:00:29,340 por supuesto, y al final, usar esa API es muy sencillo. 8 00:00:29,400 --> 00:00:35,820 Solo necesita enviar la solicitud a esta URL y esto ya le devuelve una imagen, por lo que 9 00:00:35,820 --> 00:00:40,650 puede usar este enlace en un componente de imagen y estará bien. 10 00:00:40,650 --> 00:00:46,740 Lo único difícil aquí es esta clave de API, allí necesita sus credenciales de API y para 11 00:00:46,740 --> 00:00:49,300 eso, necesita una clave de API. 12 00:00:49,410 --> 00:00:55,590 Ahora para esto, puede hacer clic en su clave API aquí y generar una y ahora puede seleccionar 13 00:00:55,590 --> 00:00:59,660 un proyecto que ya tiene o crear un nuevo proyecto 14 00:00:59,670 --> 00:01:05,220 y para eso debe cancelar aquí y en su lugar desplazarse hacia abajo un poco 15 00:01:05,250 --> 00:01:10,110 más. Para comenzar, active la parte API aquí y haga clic en Comenzar aquí. 16 00:01:10,110 --> 00:01:15,840 Ahora, una vez que lo hace, lo llevan a la consola de la plataforma de 17 00:01:15,840 --> 00:01:21,930 Google Maps, donde ahora puede habilitar las diferentes funciones de Google Maps que desea usar y aquí, 18 00:01:21,930 --> 00:01:29,590 me interesan los mapas que luego nos ayudarán a usar esta aplicación dinámica interactiva en Android y estoy interesado en lugares. 19 00:01:29,670 --> 00:01:31,420 Entonces, estas dos cosas deben verificarse, 20 00:01:31,470 --> 00:01:36,430 no necesitamos las rutas porque no estamos construyendo ninguna función de navegación aquí y con eso, podemos 21 00:01:36,430 --> 00:01:40,600 hacer clic en continuar, seleccionar un proyecto y ahora seleccionar un proyecto existente o 22 00:01:40,600 --> 00:01:45,820 simplemente crear uno nuevo uno y crearé uno nuevo aquí y lo nombraré React Complete Guide pero puede 23 00:01:45,820 --> 00:01:47,560 nombrarlo como quiera, haga clic 24 00:01:50,460 --> 00:01:53,370 en siguiente aquí y espere a que esto se genere. 25 00:01:53,370 --> 00:01:57,320 Esto debería ser relativamente rápido y ahora estamos preocupados por los precios 26 00:01:57,360 --> 00:01:58,680 mientras se está cargando. 27 00:01:58,770 --> 00:02:02,970 En general, puede usar esto de forma gratuita, pero necesita una cuenta de facturación y eso 28 00:02:02,970 --> 00:02:04,740 es lo que me piden aquí. 29 00:02:04,770 --> 00:02:06,080 Por supuesto, necesita una 30 00:02:06,150 --> 00:02:09,930 cuenta de Google y en esta cuenta de Google, debe tener una tarjeta de crédito 31 00:02:09,930 --> 00:02:13,570 para poder usarla, de lo contrario no puede usarla, desafortunadamente, es lo que es. 32 00:02:13,590 --> 00:02:15,180 Por lo tanto, necesita una tarjeta 33 00:02:15,180 --> 00:02:19,590 de crédito, debe tener una cuenta de facturación configurada en su cuenta de Google y luego puede usar esta 34 00:02:19,590 --> 00:02:26,100 cuenta de Google registrada para este proyecto, que es lo que estoy haciendo aquí. Con eso habilitado, aún podrá usarlo de forma 35 00:02:26,160 --> 00:02:28,550 gratuita, obtuvo un nivel gratuito 36 00:02:28,550 --> 00:02:33,570 muy generoso y adjunto encontrará un enlace al precio de la plataforma Google 37 00:02:33,810 --> 00:02:39,540 Maps y solo si infringe ciertos límites que no incumpliremos El poco uso que tenemos 38 00:02:39,540 --> 00:02:43,200 aquí en estos videos, solo si infringe estos límites, pagaría. 39 00:02:43,200 --> 00:02:47,520 Ahora tenga en cuenta que puede haber un punto en el que debe pagar y 40 00:02:47,520 --> 00:02:52,340 que depende de cuánto use la API y, por lo tanto, definitivamente consulte los documentos de precios. 41 00:02:52,380 --> 00:02:57,190 Ahora aquí, tengo todo esto habilitado ahora y estoy terminando esto y para 42 00:02:57,300 --> 00:03:03,160 el final, se te debe presentar una clave API que, por supuesto, invalidaré después de estas grabaciones. 43 00:03:03,180 --> 00:03:06,440 Por lo tanto, no puede usar el mío, pero debe 44 00:03:06,460 --> 00:03:11,610 tomar el suyo y ahora esta es la clave API que debe insertar aquí en esta URL. 45 00:03:11,670 --> 00:03:18,150 Así que ahora simplemente copiaré toda esta URL aquí y la moveré a nuestro código y allí, ahora 46 00:03:18,210 --> 00:03:23,790 quiero generar una imagen aquí que apunte a esa URL porque, como mencioné, así es 47 00:03:23,790 --> 00:03:27,900 como puede obtener esta imagen, esta URL devuelve una imagen 48 00:03:27,900 --> 00:03:33,390 Ahora, lo que haré es crear un nuevo componente aquí que denominaré MapPreview. js porque también lo usaré en 49 00:03:33,390 --> 00:03:39,090 otro lugar de la aplicación más tarde, donde importo React de React y donde 50 00:03:39,180 --> 00:03:44,890 luego importo la imagen y la hoja de estilo de React Native, de esta manera. 51 00:03:47,620 --> 00:03:55,180 Luego, aquí, crearé mi componente de vista previa del mapa que, por supuesto, recibe accesorios, que debe devolver algunos jsx 52 00:03:55,180 --> 00:04:02,310 más tarde y configurar algunos estilos aquí con Stylesheet. crear y, por supuesto, 53 00:04:04,970 --> 00:04:11,600 también exportar este componente de vista previa del mapa. 54 00:04:12,050 --> 00:04:16,430 Ahora aquí, quiero generar esta URL de la que acabo de hablar, por lo 55 00:04:17,660 --> 00:04:26,870 que aquí se debe generar la URL de vista previa de la imagen y eso se puede hacer usando ticks atrás aquí para que pueda agregar contenido dinámico al texto 56 00:04:26,900 --> 00:04:32,540 fácilmente y luego copiarlo esa URL que acaba de copiar de la documentación aquí, asegúrese de que todo esté 57 00:04:32,540 --> 00:04:34,110 en una línea porque 58 00:04:34,190 --> 00:04:37,790 de forma predeterminada no lo está, así que asegúrese de que esté 59 00:04:37,790 --> 00:04:40,360 todo en una línea, de lo contrario esto 60 00:04:40,370 --> 00:04:42,460 no funcionará y ahora, por supuesto, hay 61 00:04:42,460 --> 00:04:44,590 un par de segmentos que necesita reemplace, 62 00:04:44,600 --> 00:04:50,210 por ejemplo aquí, el centro es igual a parte. De manera predeterminada, esto apunta al Puente de 63 00:04:50,270 --> 00:04:55,100 Brooklyn y puede ingresar direcciones aquí, pero también puede ingresar pares de latitud y longitud aquí. 64 00:04:55,100 --> 00:05:01,820 Entonces, lo que haré aquí es agregar dinámicamente dos piezas de información aquí separadas por una coma y lo primero 65 00:05:01,820 --> 00:05:04,090 es la latitud. Aquí espero obtener 66 00:05:04,100 --> 00:05:06,680 esto en mis accesorios, espero obtener un 67 00:05:06,680 --> 00:05:12,100 accesorio de ubicación y, por supuesto, este puede ser cualquier nombre de accesorio de su 68 00:05:12,110 --> 00:05:20,600 elección que luego debería tener una tecla lat y aquí, quiero tener una tecla larga, una tecla lng también, así que esa será la 69 00:05:20,660 --> 00:05:21,610 latitud 70 00:05:21,620 --> 00:05:27,130 y longitud de la ubicación que quiero previsualizar. Ahora, el factor de zoom, lo estableceré en 71 00:05:27,200 --> 00:05:33,110 14, puede experimentar con diferentes factores, esto influye básicamente en qué tan lejos se acerca o aleja el mapa. 72 00:05:33,170 --> 00:05:36,350 También puedes jugar con tu talla aquí. 73 00:05:36,360 --> 00:05:42,230 Ahora, como tendré un contenedor de vista previa del mapa que normalmente usaré con una altura 74 00:05:42,230 --> 00:05:48,520 de 200, estableceré la altura en 200 aquí y estableceré el ancho, por lo tanto, en 400 aquí. 75 00:05:48,740 --> 00:05:55,640 Por supuesto, puede usar un tamaño mayor aquí del que usará para que el contenedor muestre la imagen más tarde, solo 76 00:05:55,640 --> 00:06:01,610 tenga en cuenta que si está buscando una imagen súper grande aquí, por supuesto, será demasiado grande, demasiados 77 00:06:01,610 --> 00:06:06,290 datos para descargue, se cargará más lentamente y es posible que no necesite eso. 78 00:06:06,350 --> 00:06:12,260 Por lo tanto, debe apuntar a un tamaño de la imagen del mapa que se ajuste al contenedor donde desea mostrarlo, no 79 00:06:12,260 --> 00:06:18,740 tiene que ser exactamente del mismo tamaño sino más o menos. Ahora, el tipo de mapa es cómo se debe mostrar el mapa, 80 00:06:18,740 --> 00:06:23,990 podría usar el satélite aquí, pero me adheriré al mapa de ruta estándar y ahora también puede agregar marcadores a 81 00:06:23,990 --> 00:06:24,870 ese mapa. 82 00:06:24,950 --> 00:06:27,840 Ahora hay un par de marcadores configurados en este 83 00:06:28,040 --> 00:06:34,700 fragmento ficticio, me deshaceré de todos ellos, pero uno para que solo tenga marcadores aquí, color rojo, una etiqueta de, este 84 00:06:34,700 --> 00:06:35,600 puede ser 85 00:06:35,630 --> 00:06:37,220 un solo personaje aquí como 86 00:06:37,220 --> 00:06:42,890 ABC y luego la latitud y la longitud donde se debe colocar este marcador y, por supuesto, eso 87 00:06:42,890 --> 00:06:46,440 es de nuevo accesorios. ubicación. lat y luego aquí una 88 00:06:46,490 --> 00:06:53,960 coma y, a partir de entonces, reemplace este número con accesorios. ubicación. lng. 89 00:06:54,470 --> 00:07:01,500 Colocar dicho marcador es opcional pero, por supuesto, quiero mostrarle al usuario dónde está. 90 00:07:01,740 --> 00:07:09,360 Ahora necesito la clave API, así que copiaré esta clave que se generó aquí y la reemplazaré aquí. 91 00:07:09,480 --> 00:07:14,610 Ahora no puedo pegarlo de esta manera, pero en realidad, quiero administrar esto en un archivo separado 92 00:07:14,610 --> 00:07:18,490 porque usaré esa clave API en otros lugares de la aplicación también. 93 00:07:18,570 --> 00:07:24,180 Así que aquí, crearé un nuevo archivo que denominaré env. js para el entorno para 94 00:07:24,870 --> 00:07:34,970 configurar algunas variables de entorno y allí configuraré un objeto con mi clave API de Google y ese debería ser 95 00:07:34,970 --> 00:07:44,820 este valor aquí y luego puedo exportar esto y, por supuesto, debe tener un nombre, vars igual y entonces exporto 96 00:07:44,820 --> 00:07:45,980 vars aquí. 97 00:07:46,050 --> 00:07:51,000 Entonces, con eso, simplemente puedo importar desde ese archivo env y eso 98 00:07:51,000 --> 00:08:02,300 es lo que haré aquí, importar env desde el archivo env aquí y eso solo significa variables de entorno como dije y ahora inyectar dinámicamente esto 99 00:08:02,300 --> 00:08:03,110 aquí. 100 00:08:03,110 --> 00:08:07,670 Entonces, ahora tenemos un lugar donde podemos cambiar esa clave y donde también podemos importarla en todos 101 00:08:07,670 --> 00:08:09,550 los diferentes lugares de nuestra aplicación. 102 00:08:09,590 --> 00:08:14,900 Entonces aquí inyectaré dinámicamente env. googleapikey 103 00:08:15,010 --> 00:08:17,900 Entonces, con eso, configuré la URL de vista previa 104 00:08:18,100 --> 00:08:23,550 de la imagen, ahora en este componente, por supuesto, necesitamos devolver la vista previa de la imagen y, en general, 105 00:08:23,560 --> 00:08:30,250 esa es la vista que tengo aquí en el selector de ubicación. Así que lo tomaré desde allí y lo agregaré en la 106 00:08:31,500 --> 00:08:35,130 vista previa del mapa, de esta manera, aunque el contenido de 107 00:08:35,130 --> 00:08:41,790 reserva allí, en realidad quiero pasarlo desde afuera, así que lo cortaré de nuevo y lo moveré nuevamente al selector de 108 00:08:41,790 --> 00:08:42,420 ubicación. 109 00:08:42,420 --> 00:08:44,370 Sin embargo, no así, sino aquí, 110 00:08:45,180 --> 00:08:53,440 importa este componente de vista previa de mapa recién agregado, así que impórtalo desde. / MapPreview, por lo que este nuevo componente en el 111 00:08:53,480 --> 00:08:55,910 que estamos trabajando actualmente, agregue esto 112 00:08:56,030 --> 00:08:57,960 aquí, vista previa del 113 00:08:58,220 --> 00:09:05,240 mapa y luego haga esta comprobación para esta recuperación y el indicador y el texto alternativo aquí. 114 00:09:05,270 --> 00:09:12,250 Por lo tanto, en la vista previa del mapa, por lo tanto, solo tendré accesorios para niños aquí para mostrar lo que se agrega entre 115 00:09:12,250 --> 00:09:15,480 la etiqueta de apertura y cierre, pero eso es solo contenido alternativo, 116 00:09:15,480 --> 00:09:21,760 por supuesto, me importa generar la vista previa real aquí. Ahora para eso tenemos que asegurarnos de que la URL de vista 117 00:09:21,820 --> 00:09:28,190 previa de la imagen en realidad también pueda estar vacía en caso de que aún no se haya elegido un lugar, por lo que crearé 118 00:09:28,220 --> 00:09:30,610 una URL de vista previa de imagen variable 119 00:09:30,610 --> 00:09:37,990 y simplemente asignaré un valor aquí y quiero asignar un valor si los accesorios la ubicación se establece porque eso tampoco se puede establecer en caso 120 00:09:37,990 --> 00:09:44,980 de que aún no hayamos elegido una ubicación y ahora la URL de vista previa de la imagen esté vacía o sea esta URL, 121 00:09:44,980 --> 00:09:51,400 dependiendo de si tenemos una ubicación pasada en el accesorio de ubicación y ahora podemos usar esto allí abajo para generar 122 00:09:51,400 --> 00:09:52,220 algo y, 123 00:09:52,220 --> 00:09:56,020 por cierto, ya que estoy usando la vista aquí, por supuesto, también debemos 124 00:09:56,020 --> 00:09:57,640 asegurarnos de importar la vista. 125 00:09:57,870 --> 00:09:59,290 Ahora, ¿cómo uso esta URL? 126 00:09:59,310 --> 00:10:02,160 Bueno, si lo tenemos, quiero usarlo para generar 127 00:10:02,160 --> 00:10:06,170 una imagen, de lo contrario, mostraré este contenido de respaldo para niños. 128 00:10:06,240 --> 00:10:08,580 Entonces aquí podemos verificar los 129 00:10:08,580 --> 00:10:10,140 accesorios. ubicación, si está 130 00:10:10,140 --> 00:10:12,230 configurado, sé que también tendré una URL 131 00:10:12,240 --> 00:10:18,600 de imagen, por supuesto, también podríamos verificar la existencia de la URL de la imagen y, si está configurada, generaré una 132 00:10:18,600 --> 00:10:19,260 imagen 133 00:10:19,260 --> 00:10:25,200 aquí, si no está configurada, la salida apoya a los niños como este, así que mostraré mi contenido de reserva. 134 00:10:26,110 --> 00:10:29,960 Ahora la imagen aquí recibirá un estilo, una imagen de 135 00:10:30,040 --> 00:10:39,650 mapa y una fuente, y la fuente aquí toma un URI que apunta a la URL de vista previa de la imagen porque será una URL de 136 00:10:39,650 --> 00:10:42,010 red, una imagen de red, ¿verdad? 137 00:10:43,000 --> 00:10:46,330 Así que ahora vamos a traer los estilos del 138 00:10:46,390 --> 00:10:54,520 selector de ubicación, puedo tomar una vista previa del mapa, pero solo quiero traer la parte de contenido justificado y realmente pasar el resto manualmente 139 00:10:54,520 --> 00:11:01,390 aquí y fusionarlo, así que aún pasaré los estilos . MapPreview desde mi selector de ubicación y en la vista previa del mapa, 140 00:11:01,390 --> 00:11:07,300 ahora quiero fusionar esto con mis estilos que estoy configurando aquí. Así que aquí realmente envolveré esto en un objeto donde 141 00:11:07,300 --> 00:11:13,270 extraigo todos los estilos configurados en la vista previa del mapa aquí y los combino en todos los estilos configurados 142 00:11:13,270 --> 00:11:19,240 en este accesorio de estilo para que podamos establecer estilos desde afuera también y fusionarlos con nuestros estilos internos 143 00:11:19,240 --> 00:11:26,980 y ahora para los estilos internos en la vista previa del mapa, como acabo de decir, tendré que justificar el contenido y alinear elementos aquí y 144 00:11:26,980 --> 00:11:29,050 para la imagen en sí, así que 145 00:11:29,200 --> 00:11:30,850 para la imagen del 146 00:11:30,910 --> 00:11:37,020 mapa, allí quiero configurar esto para tomar todo el ancho y la altura disponibles que puede obtener y necesitamos configurar 147 00:11:37,040 --> 00:11:41,410 esto porque es una imagen de red. Como aprendió, para aquellos que necesita establecer el ancho y 148 00:11:41,410 --> 00:11:43,040 la altura del componente de imagen. 149 00:11:44,710 --> 00:11:51,040 Ahora con eso, tenemos el componente de vista previa del mapa que muestra esta imagen del mapa o 150 00:11:51,040 --> 00:11:53,690 nuestro contenido alternativo que se pasa desde 151 00:11:53,920 --> 00:11:57,640 afuera y lo hace al verificar el accesorio de ubicación. 152 00:11:57,640 --> 00:12:02,950 Entonces, en el lugar donde usamos el componente de vista previa del mapa, que por 153 00:12:02,950 --> 00:12:07,330 supuesto es el selector de ubicación, necesitamos pasar este accesorio de ubicación 154 00:12:07,330 --> 00:12:15,190 y el accesorio de ubicación, si verificamos la vista previa del mapa, al final debe ser un objeto con una latitud y longitud 155 00:12:15,190 --> 00:12:19,840 o una tecla lat y lng. Por lo tanto, de vuelta en el 156 00:12:19,910 --> 00:12:25,610 selector de ubicación, quiero pasar un accesorio aquí y, de hecho, eso es exactamente lo que gestionamos aquí con 157 00:12:25,610 --> 00:12:32,870 la ubicación de selección, que por supuesto no es una coincidencia. Ese es un objeto con latitud y longitud o está indefinido inicialmente y 158 00:12:33,050 --> 00:12:36,300 también manejamos este caso en el componente de vista previa 159 00:12:36,410 --> 00:12:41,060 del mapa, si no está definido, solo mostramos el contenido alternativo que se pasa desde afuera. 160 00:12:41,060 --> 00:12:46,880 Entonces, a la ubicación, podemos pasar la ubicación elegida y con eso, ahora deberíamos tener una configuración 161 00:12:46,880 --> 00:12:50,150 donde realmente podamos ver una vista previa del lugar. 162 00:12:50,630 --> 00:12:52,490 Así que ahora aquí, vemos el contenido 163 00:12:52,520 --> 00:12:59,120 alternativo, pero si ahora hago clic en obtener la ubicación del usuario, vemos la rueda giratoria y luego vemos una instantánea real del lugar 164 00:12:59,150 --> 00:13:00,010 que elegimos. 165 00:13:00,080 --> 00:13:02,180 Como mencioné, este no es el lugar donde estoy sentado en este momento, 166 00:13:02,180 --> 00:13:05,930 este es solo un lugar falso que el emulador nos brinda. Lo mismo en Android, 167 00:13:05,930 --> 00:13:08,370 si tomo una ubicación aquí, ahora esta 168 00:13:08,370 --> 00:13:12,140 es realmente la sede de Google que seleccioné por defecto allí. 169 00:13:12,880 --> 00:13:17,370 Así que esto funciona, ahora como el siguiente paso, quiero asegurarme de 170 00:13:17,410 --> 00:13:22,570 que también podamos elegir este lugar en un mapa en lugar de solo localizarnos.