JS Framework
Ionic
Implementare ParseGeoPoint in Ionic con Back4App: Guida Tecnica
13 min
utilizzare i punti geografici con il framework ionic introduzione parse consente di associare coordinate di latitudine e longitudine del mondo reale a un oggetto aggiungendo un parsegeopoint a un parseuser , sarai in grado di scoprire facilmente quale utente è più vicino a un altro, mostrare le posizioni degli utenti della tua app e anche memorizzare le informazioni sulla posizione dell'utente, tra le altre possibilità puoi anche associare un parsegeopoint a qualsiasi parseobject ad esempio, se la tua app è associata a un negozio con affiliati fisici, sarai in grado di creare una pagina per mostrare la posizione di quei negozi o per mostrare all'utente quale negozio è più vicino a lui un altro esempio di utilizzo di questa associazione se la tua app è un gioco in cui hai creato parseobjects per rappresentare personaggi, aggiungere parsegeopoints a questi personaggi consentirebbe loro di essere mostrati lungo il percorso del giocatore questo tutorial spiega come utilizzare alcune funzionalità di parsegeopoint tramite back4app dopo aver seguito questo tutorial, sarai in grado di fare questo requisiti 1 configura la chiave api di google installa angular google maps agm importa l'sdk aggiungendo la chiave generata a /src/app/app module ts 2 recupera la posizione dell'utente per recuperare la posizione dell'utente, dovremo installare il plugin ionic geolocation ora che abbiamo installato e importato geolocation nei provider in /src/app/app module ts, implementiamo il metodo per ottenere la posizione e memorizziamo i risultati in un attributo della classe 3 crea una pagina per visualizzare la mappa ora che abbiamo la posizione dell'utente, creiamo una pagina per visualizzare la mappa, utilizzando il già menzionato \[angular google maps] per prima cosa, esegui l'assistente facciamo ora in modo che riceva un marker che contiene la posizione attuale che la mappa sta visualizzando e un array di markers che saranno i punti di riferimento sulla mappa apriamo ora maps html e facciamolo visualizzare i dati 4 mostrare la posizione attuale dell'utente sulla mappa ora abbiamo una pagina per visualizzare le posizioni sulla mappa torniamo a home ts e implementiamo un metodo per visualizzare la posizione dell'utente sulla mappa utilizziamo ora la facilità di parse e cerchiamo i peer più vicini alla posizione dell'utente puoi vedere quanto sia semplice fondamentalmente, tutto ciò che dovevamo fare era istanziare un oggetto di query per la collezione user e farlo cercare la geo posizione più vicina chiamando near() 5 configura back4app per associare parsegeopoint a parseobjects supponiamo che l'app di esempio che stai costruendo sia associata a un gruppo di negozi con affiliati fisici sarebbe interessante mostrare tutti gli affiliati fisici di questo negozio sulla mappa per fare ciò, crea una classe negozi nel dashboard di back4pp, salva i negozi esistenti come parseobjects, le loro posizioni e dopo che l'app sarà in grado di interrogare gli affiliati fisici e visualizzare le loro posizioni sulla mappa i seguenti passaggi ti aiuteranno in questo vai al sito web di back4app effettua il login, trova la tua app e apri il suo dashboard vai su core > browser > crea una classe, come mostrato nell'immagine qui sotto nel campo che tipo di classe ti serve?, scegli l'opzione personalizzata nel campo come dovremmo chiamarlo?, digita “ negozi ” e poi clicca sul pulsante crea classe poi verrà mostrata una nuova classe chiamata “ negozi ” e dovresti inserire 2 colonne in essa una colonna con tipo di dato string chiamata nome, così come un'altra colonna con tipo di dato geopoint chiamata posizione la tua classe dovrebbe finire così ora, riempi questa classe con informazioni per fare ciò, clicca sul pulsante aggiungi una riga nel menu in alto a destra o nel mezzo della pagina, come mostrato nell'immagine qui sotto quindi riempi la riga con le informazioni richieste il nome del negozio e la sua latitudine e longitudine dopo aver inserito alcuni dati, la tua classe stores dovrebbe apparire come nell'immagine qui sotto se desideri inserire più dati, puoi fare clic sul pulsante aggiungi una riga in alto, o sul pulsante + sotto l'ultima riga di dati ora sei pronto per utilizzare le informazioni sulla posizione dei negozi nella tua app 6 visualizza tutte le posizioni dei negozi sulla mappa ora che abbiamo memorizzato la posizione dei negozi, codifichiamo un metodo per ottenere gli oggetti e visualizzarli facile, giusto? ora, otteniamo il più vicino puoi vedere com'è simile a ottenere l'utente più vicino come abbiamo fatto in precedenza 7 aggiungi pulsanti alla home page probabilmente hai notato che non abbiamo modo di chiamare quei metodi, quindi aggiungiamo i pulsanti a home ts e facciamolo accadere! 8 testa la tua app accedi a sito web di back4app https //www back4app com/ trova la tua app e fai clic su dashboard > core > browser > user e crea alcuni utenti con posizione associata a loro per consentire al metodo getclosestuser di funzionare esegui la tua app su un dispositivo reale o nel browser per registrarti e accedere prova ogni funzionalità! è fatto! a questo punto, puoi utilizzare alcune funzionalità di parsegeopoint tramite back4app!