Ionic práctico: App con REST

Enviar el mapa al lugar donde he visto al pájaro

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Entre los datos que hemos recibido desde el provider, estamos recibiendo la longitud y latitud del lugar del avistamiento del pájaro. Estos datos vamos a usarlos ahora para añadir el mapa centrado sobre este punto.

Transcripción

Crearé ahora la función que se ocupa de abrir el mapa. Vamos primero a programar esa función y luego vamos a asociarla al botón correspondiente. 'openMap' Esta función es la que, como digo, va a abrir ese mapa. Primero, no debería ejecutar esta función si no ha sido cargado el script de Google, así que voy a utilizar el mismo método que usé previamente para comprobar si el script ha sido cargado o no, pero en este caso, en vez de comprobar si no ha sido cargado, voy a comprobar si lo ha sido, y sólo en caso de que lo haya sido, puedo hacer la carga. Para dejarlo correctamente, aquí debería poner un 'else' y hacer que en caso de que no haya sido cargado, poner un 'alert' diciendo 'oye, tienes algún problema de red', o algo parecido. De todas formas, en vez de eso, por no complicar el código me voy a limitar simplemente a poner un 'log' para avisar que efectivamente no se ha cargado. Me interesa cargar el mapa de Google, para ello necesito primero que todo, una variable donde voy a guardar el objeto donde se guardan las coordenadas. Ese objeto va a tener una propiedad 'coords', dentro de la cual va a venir un segundo objeto, que va a tener por un lado, el valor de la latitud, que va a ser igual a -tengo una latitud-, así que la puedo recuperar, es la latitud que he recuperado cuando recibía los datos del servicio para esa diapositiva en concreto. Y además de una latitud también tengo una longitud, así que voy a escribir longitud -pero en inglés-, y voy a recuperar este 'this.long'. Ya tengo el punto; además de ese punto necesito ahora crear un objeto 'latlong', así que voy a crear ese objeto, que más bien es 'latLng', lo voy a poner con minúsculas aunque esta debería ser con mayúsculas. Y voy a utilizar la API de Google, así que 'google.maps.LatLng', con las mayúsculas apropiadas porque si no, no funcionaría. Y como parámetros le voy a pasar... lo copio y lo pego, de este 'position' en concreto voy a recuperar ese 'coords', y dentro de ese 'coords' voy a recuperar la latitud. Como segundo parámetro, de nuevo 'position.coords.longitude'. Y el siguiente paso es crear las opciones que me van a servir para crear ese mapa, así que voy a crear una variable que se a a llamar 'mapOptions' y que va a ser igual a un último objeto en el que paso efectivamente estas opciones, por ejemplo, ¿dónde tiene que estar centrado? En el objeto que acabo de crear, en este 'latLng'. Por otro lado, ¿qué nivel de zoom va a tener? Quiero un buen nivel de zoom porque tiene que acercarse bastante, así que le voy a poner un 15. Y por último, por ejemplo, puedo ponerle un tipo de mapa, un 'mapTypeId', y para recuperar ese 'mapId' puedo utilizar la API de Google Maps, y dentro de ella buscar la constante 'mapTypeId.ROADMAP'. Tengo ya también las propiedades, y ¿qué es lo que me falta? Crear el mapa. Así que voy a crear una variable mapa. Esta la puedo crear aquí, podría hacerla para todo el documento. Voy a crearla aquí y a hacer que sea una variable 'map' y que sea igual a de nuevo, 'new google.maps.Map'. Primero tengo que decirle dónde se va a crear, y para ello voy a utilizar el 'getElementById', que le pasaré ahora un parámetro, y en segundo lugar, le voy a enviar los 'mapOptions'. Y aquí tengo un problema: ¿cuál es el identificador correcto? Porque en realidad es el 'map' este, pero es el 'map' más un index, así que tendré que hacer que cuando se llame a esta función se le pase un index, y ese index va a ser el que se añada dentro del 'Id' y por tanto, me cree ese mapa. Esta función está lista. Me moveré ahora al html y ahí, en el botón de ver el mapa, en este, añadiré el 'click'. Así que voy a hacer un 'click' y lo voy a igualar a la función que tengo que llamar, mejor la copio para no cometer errores, 'openMap'. Aquí, 'openMap', y luego le tengo que enviar un identificador, así que si utilizo esta ahí que había creado previamente y la paso como parámetro; voy a guardar, y ya teniendo la llamada la función correctamente para cada vez que cambie de diapositiva, esta función va a recuperar el índice correctamente y va a funcionar, pero todavía tengo un pequeño problema y es que cuando yo cargo la aplicación este valor 'lat' y 'long' no ha sido cargado nunca porque estos valores solamente se están cargando como el resto de los datos se detalle, cuando se hace un cambio en la diapositiva inicial, así que, si la diapositiva es inicial y no ha habido ningún cambio, no ha habido datos, con lo cual voy a tener que forzar también una llamada a este método. Voy a tener que venir aquí arriba y cuando se ha realizado la carga de todos los datos, cuando tengo todos los datos de pájaros, y solamente en ese caso, voy a hacer que se llame a esa función, y a esa función le voy a pasar el index cero, porque realmente quiero los datos de la primera de las diapositivas. Parece que está todo correcto. Hay otro detalle: los datos que estoy recibiendo, la forma de recibir los datos es la misma que la de 'getAll'; eso significa que voy a recibir aquí un 'array', o dicho de otra manera, aquí no debería encontrar los datos, así que voy a tener que añadir un corchete cero para recuperar solamente el primero de los registros. O sea, voy a recibir un 'array', con lo cual necesito recuperar solamente el primero de los elementos. Vuelvo de nuevo atrás. En realidad debería de poner también que, en caso de que la longitud sea mayor que cero, recupere el 'array', pero por no complicar el código, que ya va a ser bastante complejo de por sí, voy a mantenerlo como está. Y ahora que parece que ya está listo voy a esperar a que se realice la recarga de la página, y cuando haga clic, ahora sí me muestra el mapa, y me muestra además en cada una de las ocasiones un mapa distinto. Aquí podemos ver cómo me está cargando en cada uno de ellos dónde realmente fue visto el pájaro en concreto. Bien, ya tenemos lista la carga de Google Maps. Antes de continuar con ello, hay diferentes formas de cargar mapas de Google. Hay un plug-in específico para Córdoba, para Ionic, para trabajar con Google Maps; de hecho hay otro de Angular que también podría utilizarse. Es una de las formas posibles de trabajar. El utilizar ese plug-in va a servir básicamente para trabajar con el Google Maps nativo del teléfono en vez del Google Maps que se carga dentro de las páginas web, cada uno tiene sus ventajas, por ejemplo, el SDK vía web, la ventaja que tiene es que, por un lado se pueden hacer todos los testeos que se quieran desde el navegador, y por otro lado, además, las posibilidades que ofrece en general, son mayores. A cambio, el sistema de mapas nativo lo que tiene de bueno es que da un rendimiento mejor, entonces dependiendo de para lo que lo vamos a usar, puede merecer una forma de hacerlo u otra.

Ionic práctico: App con REST

Practica creando una aplicación con Ionic, gracias a la combinación de AngularJS, HTML5 y un back-end basado en PHP para servir datos a tu app así como modificar registros.

3:00 horas (38 Videos)
Actualmente no hay comentarios.
 

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.