JS Framework
Ionic
Erstellen Sie Standortbasierte Funktionen mit Ionic und Back4App
13 min
verwendung von geo punkten mit dem ionic framework einführung parse ermöglicht es ihnen, reale breiten und längengradkoordinaten mit einem objekt zu verknüpfen wenn sie einen parsegeopoint zu einem parseuser , können sie leicht herausfinden, welcher benutzer einem anderen am nächsten ist, die standorte der benutzer ihrer app anzeigen und auch die standortinformationen des benutzers speichern, unter anderem sie können auch einen parsegeopoint mit jedem parseobject , verknüpfen wenn ihre app beispielsweise mit einem geschäft mit physischen filialen verbunden ist, können sie eine seite erstellen, um den standort dieser geschäfte anzuzeigen oder um dem benutzer zu zeigen, welches geschäft ihm am nächsten ist ein weiteres beispiel für die verwendung dieser verknüpfung wenn ihre app ein spiel ist, in dem sie parseobjects erstellt haben, um charaktere darzustellen, würde das hinzufügen von parsegeopoints zu diesen charakteren es ermöglichen, sie entlang des weges des spielers anzuzeigen dieses tutorial erklärt, wie man einige funktionen von parsegeopoint über back4app verwendet nachdem sie dieses tutorial befolgt haben, werden sie in der lage sein, dies zu tun voraussetzungen 1 google api schlüssel einrichten importieren sie das sdk, indem sie den generierten schlüssel zu /src/app/app module ts hinzufügen 2 standort des benutzers abrufen um den standort des benutzers abzurufen, müssen wir das ionic geolocation plugin installieren jetzt, da wir geolocation installiert und in die provider in /src/app/app module ts importiert haben, lassen sie uns die methode zum abrufen des standorts implementieren und die ergebnisse in einem klassenattribut speichern 3 erstellen sie eine seite zur anzeige der karte jetzt, da wir den standort des benutzers haben, lassen sie uns eine seite erstellen, um die karte anzuzeigen, unter verwendung der bereits erwähnten \[angular google maps] zuerst führen sie den helfer aus lassen sie uns jetzt dafür sorgen, dass es einen marker erhält, der die aktuelle position anzeigt, die die karte darstellt, und ein array von markern, die die pin punkte auf der karte sein werden lassen sie uns jetzt die maps html aufrufen und die daten anzeigen 4 anzeige des aktuellen standorts des benutzers auf der karte jetzt haben wir eine seite, um die kartenstandorte anzuzeigen lassen sie uns zu home ts zurückkehren und eine methode implementieren, um den standort des benutzers auf der karte anzuzeigen lassen sie uns jetzt die einfachheit von parse nutzen und nach den nächstgelegenen peers zum standort des benutzers suchen sie können sehen, wie einfach es ist im grunde mussten wir nur ein abfrageobjekt für die benutzersammlung instanziieren und es nach dem nächstgelegenen geografischen standort suchen, indem wir near() aufrufen 5 richten sie back4app ein, um parsegeopoint mit parseobjects zu verknüpfen angenommen, die beispiel app, die sie erstellen, ist mit einer gruppe von geschäften mit physischen filialen verbunden es wäre interessant, alle physischen filialen dieses geschäfts auf der karte anzuzeigen um dies zu tun, erstellen sie eine stores klasse im back4pp dashboard, speichern sie die vorhandenen geschäfte als parseobjects, deren standorte, und danach wird die app in der lage sein, die physischen filialen abzufragen und deren positionen auf der karte anzuzeigen die folgenden schritte helfen ihnen dabei gehen sie zu back4app website melden sie sich an, finden sie ihre app und öffnen sie deren dashboard gehen sie zu core > browser > erstellen sie eine klasse, wie im bild unten gezeigt wählen sie im feld welchen typ von klasse benötigen sie? die benutzerdefinierte option geben sie im feld wie sollen wir es nennen? „ stores ” ein und klicken sie dann auf die schaltfläche klasse erstellen dann wird eine neue klasse mit dem namen „ stores ” angezeigt, und sie sollten 2 spalten hinzufügen eine spalte mit dem datentyp string namens name sowie eine weitere spalte mit dem datentyp geopoint namens standort ihre klasse sollte so aussehen füllen sie nun diese klasse mit informationen klicken sie dazu auf die schaltfläche zeile hinzufügen im menü oben rechts oder in der mitte der seite, wie im bild unten gezeigt füllen sie dann die zeile mit den erforderlichen informationen aus den namen des geschäfts sowie dessen breiten und längengrad nachdem sie einige daten eingegeben haben, sollte ihre stores klasse wie das bild unten aussehen wenn sie weitere daten eingeben möchten, können sie auf die schaltfläche zeile hinzufügen oben klicken oder auf die schaltfläche + unter der letzten datenzeile jetzt sind sie bereit, die standortinformationen der geschäfte in ihrer app zu verwenden 6 alle geschäfte auf der karte anzeigen jetzt, da wir die standorte der geschäfte gespeichert haben, lassen sie uns eine methode codieren, um die objekte abzurufen und anzuzeigen einfach, oder? jetzt lassen sie uns das nächste holen sie können sehen, dass es genau wie das abrufen des nächsten benutzers ist, wie wir es zuvor gemacht haben 7 schaltflächen zur startseite hinzufügen sie haben wahrscheinlich bemerkt, dass wir keine möglichkeit haben, diese methoden aufzurufen lassen sie uns die schaltflächen in der home ts hinzufügen und es möglich machen! 8 testen sie ihre app melden sie sich an bei back4app website https //www back4app com/ finden sie ihre app und klicken sie auf dashboard > core > browser > benutzer und erstellen sie einige benutzer mit zugeordneten standorten, damit die methode getclosestuser funktioniert führen sie ihre app auf einem echten gerät oder im browser aus, um sich anzumelden und einzuloggen probieren sie jede funktion aus! es ist erledigt! in diesem stadium können sie einige funktionen von parsegeopoint über back4app nutzen!