JS Framework
Ionic
Geopuntos en Ionic: Optimización de Consultas Geográficas
13 min
uso de puntos geográficos con el marco ionic introducción parse te permite asociar coordenadas de latitud y longitud del mundo real con un objeto al agregar un parsegeopoint a un parseuser , podrás averiguar fácilmente qué usuario está más cerca de otro, mostrar las ubicaciones de los usuarios de tu aplicación y también almacenar la información de ubicación del usuario, entre otras posibilidades también puedes asociar un parsegeopoint a cualquier parseobject por ejemplo, si tu aplicación está asociada con una tienda con afiliados físicos, podrás crear una página para mostrar la ubicación de esas tiendas o para mostrar al usuario qué tienda está más cerca de él otro ejemplo de este uso de asociación si tu aplicación es un juego en el que creaste parseobjects para representar personajes, agregar parsegeopoints a estos personajes permitiría que se mostraran a lo largo del camino del jugador este tutorial explica cómo usar algunas características de parsegeopoint a través de back4app después de seguir este tutorial, podrás hacer esto requisitos previos 1 configurar la clave de api de google instala angular google maps agm importa el sdk agregando la clave generada a /src/app/app module ts 2 recuperar la ubicación del usuario para recuperar la ubicación del usuario, necesitaremos instalar el plugin de geolocalización de ionic ahora que hemos instalado e importado geolocation a los proveedores en /src/app/app module ts, implementemos el método para obtener la ubicación y almacenemos los resultados en un atributo de clase 3 crear una página para mostrar el mapa ahora que tenemos la ubicación del usuario, creemos una página para mostrar el mapa, utilizando el ya mencionado \[angular google maps] primero, ejecuta el asistente ahora hagamos que reciba un marcador que contenga la posición actual que el mapa está mostrando y un array de marcadores que serán los puntos de referencia alrededor del mapa ahora abramos el maps html y hagamos que muestre los datos 4 mostrando la ubicación actual del usuario en el mapa ahora tenemos una página para mostrar las ubicaciones del mapa regresemos a home ts e implementemos un método para mostrar la ubicación del usuario en el mapa ahora aprovechemos la facilidad de parse y busquemos los pares más cercanos a la ubicación del usuario puedes ver lo simple que es básicamente, todo lo que tuvimos que hacer fue instanciar un objeto de consulta para la colección de usuarios y hacer que busque la ubicación geográfica más cercana llamando a near() 5 configurar back4app para asociar parsegeopoint a parseobjects supongamos que la aplicación de ejemplo que estás construyendo está asociada con un grupo de tiendas con afiliados físicos sería interesante mostrar todos los afiliados físicos de esta tienda en el mapa para hacerlo, crea una clase de tiendas en el dashboard de back4pp, guarda las tiendas existentes como parseobjects, sus ubicaciones y después la aplicación podrá consultar los afiliados físicos y mostrar sus posiciones en el mapa los siguientes pasos te ayudarán con eso ve a el sitio web de back4app inicia sesión, encuentra tu aplicación y abre su dashboard ve a core > browser > crear una clase, como se muestra en la imagen a continuación en el campo ¿qué tipo de clase necesitas?, elige la opción personalizada en el campo ¿cómo deberíamos llamarlo?, escribe “ tiendas ” y luego haz clic en el botón crear clase luego se mostrará una nueva clase llamada “ tiendas ” y deberías insertar 2 columnas en ella una columna con tipo de dato string llamada nombre, así como otra columna con tipo de dato geopoint llamada ubicación tu clase debería terminar así ahora, llena esta clase con información para hacerlo, haz clic en el botón agregar una fila en el menú en la parte superior derecha o en el medio de la página, como se muestra en la imagen a continuación luego llena la fila con la información requerida el nombre de la tienda y su latitud y longitud después de insertar algunos datos, tu clase stores debería verse como la imagen de abajo si deseas insertar más datos, puedes hacer clic en el botón agregar una fila en la parte superior, o en el botón + debajo de la última fila de datos ahora estás listo para usar la información de ubicación de las tiendas en tu aplicación 6 muestra la ubicación de todas las tiendas en el mapa ahora que tenemos la ubicación de las tiendas almacenada, codifiquemos un método para obtener los objetos y mostrarlos fácil, ¿verdad? ahora, obtengamos el más cercano puedes ver cómo es como obtener el usuario más cercano como lo hicimos anteriormente 7 agrega botones a la página de inicio probablemente notaste que no tenemos forma de llamar a esos métodos, ¡así que agreguemos los botones a home ts y hagámoslo posible! 8 prueba tu aplicación inicia sesión en sitio web de back4app https //www back4app com/ encuentra tu aplicación y haz clic en dashboard > core > browser > user y crea algunos usuarios con ubicación asociada a ellos para permitir que el método getclosestuser funcione ejecuta tu aplicación en un dispositivo real o en el navegador para registrarte e iniciar sesión ¡prueba cada función! ¡está hecho! en esta etapa, ¡puedes usar algunas funciones de parsegeopoint a través de back4app!