Wie können wir sicherstellen, dass wir einen Ort auswählen können?
Nun, in der Kartenansicht können Sie auf Ihrem Kartenbildschirm einen onPress-Handler hinzufügen. Dieser wird ausgelöst, wenn Sie
irgendwo
auf die Karte tippen. Damit meine ich nicht Tippen, wenn Sie scrollen, sondern wenn
Sie dort tippen, ohne zu scrollen etwas auswählen wollen. Dies wird dann ausgelöst und kann daher an eine Funktion
gebunden werden, die ich hier definiere und die den ausgewählten Ort speichern soll.
Hier habe ich also meine Select Location Handler-Funktion, die ein Ereignisobjekt erhält, und das binde
ich hier an onPress.
Jetzt können wir uns dieses Ereignis ansehen, um ein Gefühl dafür zu bekommen, was sich darin befindet und welche Art von Daten wir erhalten.
Lassen Sie mich dies
speichern und testen, zur Karte gehen und nach dem Laden einfach irgendwo auf der Karte tippen, wie hier.
Wenn wir jetzt zurückgehen, ist dies die Ausgabe, die ich bekomme, und dort sehen Sie, dass es ein ziemlich großes Objekt
ist. Am Ende bekommen wir eine Menge Daten, die wir nicht wirklich
brauchen. Es ist dieses synthetische Ereignis hier.
Was wir haben, was interessant ist, ist diese native Ereigniseigenschaft, die ein weiteres Objekt ist, die eine Koordinateneigenschaft
hat, die ein weiteres Objekt ist, das einen Breiten- und Längengrad hat.
Das ist es, woran wir am Ende interessiert
sind, richtig, das wollen wir herausfinden,
das ist das
Koordinatenpaar, das wir bekommen wollen.
Dies ist also der Ort, die Koordinaten, auf die der Benutzer getippt hat.
Dies ist das, was ich hier speichern möchte. Zunächst wäre es schön, an dieser Stelle eine Markierung hinzuzufügen, damit wir diesen
Ort auf der Karte markieren. Dazu können
wir natürlich den Status verwenden, um diesen ausgewählten Ort und in der Komponente zu speichern,
diesen dann hier oben initialisieren und unseren ausgewählten Ort festlegen
und den ausgewählten Ort mithilfe des Nutzungsstatus festlegen. Anfangs ist es leer, wir haben anfangs keinen ausgewählten Ort
und dann können wir
hier einen Marker erstellen, wenn wir einen haben. Zu diesem Zweck können wir die Markierungskomponente aus nativen Karten importieren,
indem wir hier neben diesem Standardimport einige benannte Importe hinzufügen. Außerdem können wir Markierungen aus nativen React-Karten importieren. So einfach ist das.
Wir können diese Markierung rendern, indem wir sie zwischen den hinzufügen Öffnen und Schließen von Tags der Kartenansicht, die wir
jetzt benötigen,
damit wir hier eine Markierung hinzufügen können.
Jetzt muss dieser Marker konfiguriert werden, andernfalls weiß React Native
Maps nicht, wo er angezeigt werden soll. Wir können beispielsweise einen Titel
hinzufügen, einen ausgewählten Ort, aber was noch wichtiger ist, Sie können hier eine Koordinatenstütze hinzufügen,
die erwartet, dass dort ein Objekt mit einem Breiten- und Längengrad angezeigt wird. Also füge ich hier eine neue Variable hinzu, Markierungskoordinaten, sagen wir, und wenn ich einen ausgewählten Ort
habe und dies der Zustand ist, den ich dort verwalte, wenn ich das habe, dann möchte ich Markierungskoordinaten gleich
einem Objekt setzen, wo Sie müssen einen Breitengrad mit dem Namen "Breitengrad" haben, es
ist also
kein Breitengrad, sondern ein Breitengrad, da die Markierungskomponente nach einer Eigenschaft mit dem
Namen "Breitengrad" sucht und dies der ausgewählte Standort sein
kann. lat
sagen wir mal, es liegt an uns, wie wir das dann speichern, wir machen es gerade nicht, aber später werde
ich es so speichern, dass wir dort eine lat-Stütze und einen Längengrad haben, der so benannt werden muss, dass er den
Wert halten kann in selectedLocation gespeichert. lng.
Jetzt sind die Markierungskoordinaten bedingt festgelegt. Hier können wir nun überprüfen, ob Markierungsbedingungen vorhanden sind. Wenn dies der
Fall ist, verwenden wir diese Verknüpfung, um auch hier eine Markierung auszugeben. Jetzt können wir hier auch Markierungskoordinaten eingeben.
Bitte beachten Sie,
dass dies Koordinaten sind, keine Koordinaten, sondern nur Koordinaten.
An diesem Punkt sind es unsere Markierungskoordinaten, und jetzt müssen wir nur noch sicherstellen, dass wir den ausgewählten Ort festlegen, und natürlich
möchte ich dies
hier in meinem Handler für ausgewählte Orte tun. Dort möchte ich set selected
location aufrufen, um meinen Status festzulegen, ein Objekt dort zu übergeben und meinen Status auf ein Objekt mit einem Lat-Schlüssel
zu setzen, da ich versuche, Lat des Ereignisses dort unten zu extrahieren. nativeEvent, wie Sie gesehen haben, und dort gab es diese
Koordinateneigenschaft, die eine Breitengradeigenschaft hat, und dann sollte lng, das ich dort unten auch extrahiere,
auf event gesetzt werden. nativeEvent. Koordinaten. Längengrad. Und mit diesem Code sollten wir in
der Lage sein, eine Markierung auf der Karte anzuzeigen. Probieren wir es aus, gehen wir zu
iOS, laden die Karte dort
und wählen einen Ort
aus. An der Stelle, an der ich klicke, sehen wir eine Markierung. Das Gleiche gilt hoffentlich auch für Android.
Probieren Sie es dort aus, öffnen Sie die Karte und platzieren Sie
dort, wenn
ich irgendwo tippe, auch meinen Marker.
So können wir also mit Markern arbeiten und Orte auswählen, es
ist alles schön.
Jetzt möchte ich in der Lage sein, dort oben auf eine Schaltfläche zum Speichern zu
klicken, die noch nicht vorhanden ist. Diese schließt dann diese Karte und übergibt den ausgewählten Ort am Ende wieder an meinen neuen
Ortsbildschirm, den ich hier habe auch. Ich möchte zu diesem Bildschirm zurückkehren und natürlich meinen ausgewählten
Speicherort speichern.