Points géographiques avec Ionic et ParseGeoPoint

utiliser des points géographiques avec le framework ionic introduction parse vous permet d'associer des coordonnées de latitude et de longitude du monde réel à un objet en ajoutant un parsegeopoint à un parseuser , vous pourrez facilement découvrir quel utilisateur est le plus proche d'un autre, afficher les emplacements des utilisateurs de votre application et également stocker les informations de localisation de l'utilisateur, parmi d'autres possibilités vous pouvez également associer un parsegeopoint à n'importe quel parseobject par exemple, si votre application est associée à un magasin avec des affiliés physiques, vous pourrez créer une page pour montrer l'emplacement de ces magasins ou pour montrer à l'utilisateur quel magasin est le plus proche de lui un autre exemple d'utilisation de cette association si votre application est un jeu dans lequel vous avez créé des parseobjects pour représenter des personnages, ajouter des parsegeopoints à ces personnages permettrait de les afficher le long du chemin du joueur ce tutoriel explique comment utiliser certaines fonctionnalités de parsegeopoint via back4app après avoir suivi ce tutoriel, vous serez capable de faire cela prérequis 1 configurer la clé api google installez angular google maps agm importez le sdk en ajoutant la clé générée à /src/app/app module ts 2 récupérer la localisation de l'utilisateur pour récupérer la localisation de l'utilisateur, nous devrons installer le plugin ionic geolocation maintenant que nous avons installé et importé geolocation dans les fournisseurs à /src/app/app module ts, implémentons la méthode pour obtenir la localisation et stockons les résultats dans un attribut de classe 3 créer une page pour afficher la carte maintenant que nous avons la localisation de l'utilisateur, créons une page pour afficher la carte, en utilisant les \[angular google maps] déjà mentionnés tout d'abord, exécutez l'assistant faisons maintenant en sorte qu'il reçoive un marqueur qui contient la position actuelle que la carte affiche et un tableau de marqueurs qui seront les points d'épingle autour de la carte ouvrons maintenant le maps html et faisons le afficher les données 4 afficher la localisation actuelle de l'utilisateur sur la carte maintenant, nous avons une page pour afficher les emplacements de la carte retournons à home ts et implémentons une méthode pour afficher la localisation de l'utilisateur sur la carte utilisons maintenant la facilité de parse et recherchons les pairs les plus proches de la localisation de l'utilisateur vous pouvez voir à quel point c'est simple en gros, tout ce que nous avions à faire était d'instancier un objet de requête pour la collection user et de le faire rechercher la localisation géographique la plus proche en appelant near() 5 configurer back4app pour associer parsegeopoint à parseobjects supposons que l'application exemple que vous construisez soit associée à un groupe de magasins avec des affiliés physiques il serait intéressant de montrer tous les affiliés physiques de ce magasin sur la carte pour ce faire, créez une classe magasins sur le tableau de bord back4pp, enregistrez les magasins existants en tant qu'objets parse, leurs emplacements et après cela, l'application pourra interroger les affiliés physiques et afficher leurs positions sur la carte les étapes suivantes vous aideront avec cela allez sur le site web de back4app connectez vous, trouvez votre application et ouvrez son tableau de bord allez dans core > navigateur > créer une classe, comme montré dans l'image ci dessous dans le champ quel type de classe avez vous besoin ?, choisissez l'option personnalisée dans le champ comment devrions nous l'appeler ?, tapez “ magasins ” puis cliquez sur le bouton créer une classe ensuite, une nouvelle classe appelée “ magasins ” sera affichée et vous devrez insérer 2 colonnes une colonne avec le type de données chaîne appelée nom, ainsi qu'une autre colonne avec le type de données geopoint appelée emplacement votre classe devrait se terminer comme ceci maintenant, remplissez cette classe avec des informations pour ce faire, cliquez sur le bouton ajouter une ligne dans le menu en haut à droite ou au milieu de la page, comme montré dans l'image ci dessous remplissez ensuite la ligne avec les informations requises le nom du magasin et sa latitude et longitude après avoir inséré des données, votre classe stores devrait ressembler à l'image ci dessous si vous souhaitez insérer plus de données, vous pouvez cliquer sur le bouton ajouter une ligne en haut, ou sur le bouton + en dessous de la dernière ligne de données maintenant, vous êtes prêt à utiliser les informations de localisation des magasins dans votre application 6 afficher toutes les localisations des magasins sur la carte maintenant que nous avons stocké la localisation des magasins, codons une méthode pour obtenir les objets et les afficher facile, non ? maintenant, obtenons le plus proche vous pouvez voir que c'est tout comme obtenir l'utilisateur le plus proche comme nous l'avons fait précédemment 7 ajouter des boutons à la page d'accueil vous avez probablement remarqué que nous n'avons aucun moyen d'appeler ces méthodes, ajoutons donc les boutons à home ts et faisons le ! 8 testez votre application connectez vous à back4app website https //www back4app com/ trouvez votre application et cliquez sur tableau de bord > noyau > navigateur > utilisateur et créez quelques utilisateurs avec une localisation associée pour permettre à la méthode getclosestuser de fonctionner exécutez votre application sur un appareil réel ou dans le navigateur pour vous inscrire et vous connecter essayez chaque fonctionnalité ! c'est fait ! à ce stade, vous pouvez utiliser certaines fonctionnalités de parsegeopoint via back4app !