Así que ahora también quiero mostrar una pequeña vista previa del mapa aquí y hay diferentes formas de
hacerlo, por supuesto, y luego también agregaremos un mapa interactivo a esta aplicación.
Por ahora, solo quiero tener una
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.
Puedes buscar en Google API estática de Google Maps para encontrar la documentación oficial donde puedes aprender
todo sobre eso,
por supuesto, y al final, usar esa API es muy sencillo.
Solo necesita enviar la solicitud a esta URL y esto ya le devuelve una imagen, por lo que
puede usar este enlace en un componente de imagen y estará bien.
Lo único difícil aquí es esta clave de API, allí necesita sus credenciales de API y para
eso, necesita una clave de API.
Ahora para esto, puede hacer clic en su clave API aquí y generar una y ahora puede seleccionar
un proyecto que ya tiene o crear un nuevo proyecto
y para eso debe cancelar aquí y en su lugar desplazarse hacia abajo un poco
más. Para comenzar, active la parte API aquí y haga clic en Comenzar aquí.
Ahora, una vez que lo hace, lo llevan a la consola de la plataforma de
Google Maps, donde ahora puede habilitar las diferentes funciones de Google Maps que desea usar y aquí,
me interesan los mapas que luego nos ayudarán a usar esta aplicación dinámica interactiva en Android y estoy interesado en lugares.
Entonces, estas dos cosas deben verificarse,
no necesitamos las rutas porque no estamos construyendo ninguna función de navegación aquí y con eso, podemos
hacer clic en continuar, seleccionar un proyecto y ahora seleccionar un proyecto existente o
simplemente crear uno nuevo uno y crearé uno nuevo aquí y lo nombraré React Complete Guide pero puede
nombrarlo como quiera, haga clic
en siguiente aquí y espere a que esto se genere.
Esto debería ser relativamente rápido y ahora estamos preocupados por los precios
mientras se está cargando.
En general, puede usar esto de forma gratuita, pero necesita una cuenta de facturación y eso
es lo que me piden aquí.
Por supuesto, necesita una
cuenta de Google y en esta cuenta de Google, debe tener una tarjeta de crédito
para poder usarla, de lo contrario no puede usarla, desafortunadamente, es lo que es.
Por lo tanto, necesita una tarjeta
de crédito, debe tener una cuenta de facturación configurada en su cuenta de Google y luego puede usar esta
cuenta de Google registrada para este proyecto, que es lo que estoy haciendo aquí. Con eso habilitado, aún podrá usarlo de forma
gratuita, obtuvo un nivel gratuito
muy generoso y adjunto encontrará un enlace al precio de la plataforma Google
Maps y solo si infringe ciertos límites que no incumpliremos El poco uso que tenemos
aquí en estos videos, solo si infringe estos límites, pagaría.
Ahora tenga en cuenta que puede haber un punto en el que debe pagar y
que depende de cuánto use la API y, por lo tanto, definitivamente consulte los documentos de precios.
Ahora aquí, tengo todo esto habilitado ahora y estoy terminando esto y para
el final, se te debe presentar una clave API que, por supuesto, invalidaré después de estas grabaciones.
Por lo tanto, no puede usar el mío, pero debe
tomar el suyo y ahora esta es la clave API que debe insertar aquí en esta URL.
Así que ahora simplemente copiaré toda esta URL aquí y la moveré a nuestro código y allí, ahora
quiero generar una imagen aquí que apunte a esa URL porque, como mencioné, así es
como puede obtener esta imagen, esta URL devuelve una imagen
Ahora, lo que haré es crear un nuevo componente aquí que denominaré MapPreview. js porque también lo usaré en
otro lugar de la aplicación más tarde, donde importo React de React y donde
luego importo la imagen y la hoja de estilo de React Native, de esta manera.
Luego, aquí, crearé mi componente de vista previa del mapa que, por supuesto, recibe accesorios, que debe devolver algunos jsx
más tarde y configurar algunos estilos aquí con Stylesheet. crear y, por supuesto,
también exportar este componente de vista previa del mapa.
Ahora aquí, quiero generar esta URL de la que acabo de hablar, por lo
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
fácilmente y luego copiarlo esa URL que acaba de copiar de la documentación aquí, asegúrese de que todo esté
en una línea porque
de forma predeterminada no lo está, así que asegúrese de que esté
todo en una línea, de lo contrario esto
no funcionará y ahora, por supuesto, hay
un par de segmentos que necesita reemplace,
por ejemplo aquí, el centro es igual a parte. De manera predeterminada, esto apunta al Puente de
Brooklyn y puede ingresar direcciones aquí, pero también puede ingresar pares de latitud y longitud aquí.
Entonces, lo que haré aquí es agregar dinámicamente dos piezas de información aquí separadas por una coma y lo primero
es la latitud. Aquí espero obtener
esto en mis accesorios, espero obtener un
accesorio de ubicación y, por supuesto, este puede ser cualquier nombre de accesorio de su
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
latitud
y longitud de la ubicación que quiero previsualizar. Ahora, el factor de zoom, lo estableceré en
14, puede experimentar con diferentes factores, esto influye básicamente en qué tan lejos se acerca o aleja el mapa.
También puedes jugar con tu talla aquí.
Ahora, como tendré un contenedor de vista previa del mapa que normalmente usaré con una altura
de 200, estableceré la altura en 200 aquí y estableceré el ancho, por lo tanto, en 400 aquí.
Por supuesto, puede usar un tamaño mayor aquí del que usará para que el contenedor muestre la imagen más tarde, solo
tenga en cuenta que si está buscando una imagen súper grande aquí, por supuesto, será demasiado grande, demasiados
datos para descargue, se cargará más lentamente y es posible que no necesite eso.
Por lo tanto, debe apuntar a un tamaño de la imagen del mapa que se ajuste al contenedor donde desea mostrarlo, no
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,
podría usar el satélite aquí, pero me adheriré al mapa de ruta estándar y ahora también puede agregar marcadores a
ese mapa.
Ahora hay un par de marcadores configurados en este
fragmento ficticio, me deshaceré de todos ellos, pero uno para que solo tenga marcadores aquí, color rojo, una etiqueta de, este
puede ser
un solo personaje aquí como
ABC y luego la latitud y la longitud donde se debe colocar este marcador y, por supuesto, eso
es de nuevo accesorios. ubicación. lat y luego aquí una
coma y, a partir de entonces, reemplace este número con accesorios. ubicación. lng.
Colocar dicho marcador es opcional pero, por supuesto, quiero mostrarle al usuario dónde está.
Ahora necesito la clave API, así que copiaré esta clave que se generó aquí y la reemplazaré aquí.
Ahora no puedo pegarlo de esta manera, pero en realidad, quiero administrar esto en un archivo separado
porque usaré esa clave API en otros lugares de la aplicación también.
Así que aquí, crearé un nuevo archivo que denominaré env. js para el entorno para
configurar algunas variables de entorno y allí configuraré un objeto con mi clave API de Google y ese debería ser
este valor aquí y luego puedo exportar esto y, por supuesto, debe tener un nombre, vars igual y entonces exporto
vars aquí.
Entonces, con eso, simplemente puedo importar desde ese archivo env y eso
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
aquí.
Entonces, ahora tenemos un lugar donde podemos cambiar esa clave y donde también podemos importarla en todos
los diferentes lugares de nuestra aplicación.
Entonces aquí inyectaré dinámicamente env. googleapikey
Entonces, con eso, configuré la URL de vista previa
de la imagen, ahora en este componente, por supuesto, necesitamos devolver la vista previa de la imagen y, en general,
esa es la vista que tengo aquí en el selector de ubicación. Así que lo tomaré desde allí y lo agregaré en la
vista previa del mapa, de esta manera, aunque el contenido de
reserva allí, en realidad quiero pasarlo desde afuera, así que lo cortaré de nuevo y lo moveré nuevamente al selector de
ubicación.
Sin embargo, no así, sino aquí,
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
que estamos trabajando actualmente, agregue esto
aquí, vista previa del
mapa y luego haga esta comprobación para esta recuperación y el indicador y el texto alternativo aquí.
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
la etiqueta de apertura y cierre, pero eso es solo contenido alternativo,
por supuesto, me importa generar la vista previa real aquí. Ahora para eso tenemos que asegurarnos de que la URL de vista
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é
una URL de vista previa de imagen variable
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
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,
dependiendo de si tenemos una ubicación pasada en el accesorio de ubicación y ahora podemos usar esto allí abajo para generar
algo y,
por cierto, ya que estoy usando la vista aquí, por supuesto, también debemos
asegurarnos de importar la vista.
Ahora, ¿cómo uso esta URL?
Bueno, si lo tenemos, quiero usarlo para generar
una imagen, de lo contrario, mostraré este contenido de respaldo para niños.
Entonces aquí podemos verificar los
accesorios. ubicación, si está
configurado, sé que también tendré una URL
de imagen, por supuesto, también podríamos verificar la existencia de la URL de la imagen y, si está configurada, generaré una
imagen
aquí, si no está configurada, la salida apoya a los niños como este, así que mostraré mi contenido de reserva.
Ahora la imagen aquí recibirá un estilo, una imagen de
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
red, una imagen de red, ¿verdad?
Así que ahora vamos a traer los estilos del
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
aquí y fusionarlo, así que aún pasaré los estilos . MapPreview desde mi selector de ubicación y en la vista previa del mapa,
ahora quiero fusionar esto con mis estilos que estoy configurando aquí. Así que aquí realmente envolveré esto en un objeto donde
extraigo todos los estilos configurados en la vista previa del mapa aquí y los combino en todos los estilos configurados
en este accesorio de estilo para que podamos establecer estilos desde afuera también y fusionarlos con nuestros estilos internos
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
para la imagen en sí, así que
para la imagen del
mapa, allí quiero configurar esto para tomar todo el ancho y la altura disponibles que puede obtener y necesitamos configurar
esto porque es una imagen de red. Como aprendió, para aquellos que necesita establecer el ancho y
la altura del componente de imagen.
Ahora con eso, tenemos el componente de vista previa del mapa que muestra esta imagen del mapa o
nuestro contenido alternativo que se pasa desde
afuera y lo hace al verificar el accesorio de ubicación.
Entonces, en el lugar donde usamos el componente de vista previa del mapa, que por
supuesto es el selector de ubicación, necesitamos pasar este accesorio de ubicación
y el accesorio de ubicación, si verificamos la vista previa del mapa, al final debe ser un objeto con una latitud y longitud
o una tecla lat y lng. Por lo tanto, de vuelta en el
selector de ubicación, quiero pasar un accesorio aquí y, de hecho, eso es exactamente lo que gestionamos aquí con
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
también manejamos este caso en el componente de vista previa
del mapa, si no está definido, solo mostramos el contenido alternativo que se pasa desde afuera.
Entonces, a la ubicación, podemos pasar la ubicación elegida y con eso, ahora deberíamos tener una configuración
donde realmente podamos ver una vista previa del lugar.
Así que ahora aquí, vemos el contenido
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
que elegimos.
Como mencioné, este no es el lugar donde estoy sentado en este momento,
este es solo un lugar falso que el emulador nos brinda. Lo mismo en Android,
si tomo una ubicación aquí, ahora esta
es realmente la sede de Google que seleccioné por defecto allí.
Así que esto funciona, ahora como el siguiente paso, quiero asegurarme de
que también podamos elegir este lugar en un mapa en lugar de solo localizarnos.