1 00:00:02,110 --> 00:00:04,450 Wie können wir sicherstellen, dass wir einen Ort auswählen können? 2 00:00:04,870 --> 00:00:10,900 Nun, in der Kartenansicht können Sie auf Ihrem Kartenbildschirm einen onPress-Handler hinzufügen. Dieser wird ausgelöst, wenn Sie 3 00:00:10,900 --> 00:00:11,580 irgendwo 4 00:00:11,680 --> 00:00:16,690 auf die Karte tippen. Damit meine ich nicht Tippen, wenn Sie scrollen, sondern wenn 5 00:00:16,690 --> 00:00:23,130 Sie dort tippen, ohne zu scrollen etwas auswählen wollen. Dies wird dann ausgelöst und kann daher an eine Funktion 6 00:00:23,170 --> 00:00:27,010 gebunden werden, die ich hier definiere und die den ausgewählten Ort speichern soll. 7 00:00:27,010 --> 00:00:33,940 Hier habe ich also meine Select Location Handler-Funktion, die ein Ereignisobjekt erhält, und das binde 8 00:00:33,940 --> 00:00:36,260 ich hier an onPress. 9 00:00:36,260 --> 00:00:42,440 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. 10 00:00:42,440 --> 00:00:44,300 Lassen Sie mich dies 11 00:00:44,330 --> 00:00:52,550 speichern und testen, zur Karte gehen und nach dem Laden einfach irgendwo auf der Karte tippen, wie hier. 12 00:00:52,550 --> 00:00:58,450 Wenn wir jetzt zurückgehen, ist dies die Ausgabe, die ich bekomme, und dort sehen Sie, dass es ein ziemlich großes Objekt 13 00:00:58,700 --> 00:01:02,280 ist. Am Ende bekommen wir eine Menge Daten, die wir nicht wirklich 14 00:01:02,510 --> 00:01:04,700 brauchen. Es ist dieses synthetische Ereignis hier. 15 00:01:04,850 --> 00:01:10,880 Was wir haben, was interessant ist, ist diese native Ereigniseigenschaft, die ein weiteres Objekt ist, die eine Koordinateneigenschaft 16 00:01:10,880 --> 00:01:15,170 hat, die ein weiteres Objekt ist, das einen Breiten- und Längengrad hat. 17 00:01:15,170 --> 00:01:17,090 Das ist es, woran wir am Ende interessiert 18 00:01:17,090 --> 00:01:18,520 sind, richtig, das wollen wir herausfinden, 19 00:01:18,530 --> 00:01:19,700 das ist das 20 00:01:19,700 --> 00:01:21,000 Koordinatenpaar, das wir bekommen wollen. 21 00:01:21,020 --> 00:01:24,640 Dies ist also der Ort, die Koordinaten, auf die der Benutzer getippt hat. 22 00:01:24,650 --> 00:01:30,850 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 23 00:01:30,860 --> 00:01:34,430 Ort auf der Karte markieren. Dazu können 24 00:01:34,420 --> 00:01:42,260 wir natürlich den Status verwenden, um diesen ausgewählten Ort und in der Komponente zu speichern, 25 00:01:43,100 --> 00:01:48,170 diesen dann hier oben initialisieren und unseren ausgewählten Ort festlegen 26 00:01:50,500 --> 00:01:58,870 und den ausgewählten Ort mithilfe des Nutzungsstatus festlegen. Anfangs ist es leer, wir haben anfangs keinen ausgewählten Ort 27 00:01:58,870 --> 00:02:01,200 und dann können wir 28 00:02:01,270 --> 00:02:08,170 hier einen Marker erstellen, wenn wir einen haben. Zu diesem Zweck können wir die Markierungskomponente aus nativen Karten importieren, 29 00:02:08,170 --> 00:02:14,590 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. 30 00:02:14,590 --> 00:02:20,530 Wir können diese Markierung rendern, indem wir sie zwischen den hinzufügen Öffnen und Schließen von Tags der Kartenansicht, die wir 31 00:02:20,530 --> 00:02:21,470 jetzt benötigen, 32 00:02:21,640 --> 00:02:23,780 damit wir hier eine Markierung hinzufügen können. 33 00:02:23,870 --> 00:02:27,090 Jetzt muss dieser Marker konfiguriert werden, andernfalls weiß React Native 34 00:02:27,170 --> 00:02:32,840 Maps nicht, wo er angezeigt werden soll. Wir können beispielsweise einen Titel 35 00:02:33,230 --> 00:02:40,560 hinzufügen, einen ausgewählten Ort, aber was noch wichtiger ist, Sie können hier eine Koordinatenstütze hinzufügen, 36 00:02:40,590 --> 00:02:53,260 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 37 00:02:53,320 --> 00:03:00,190 habe und dies der Zustand ist, den ich dort verwalte, wenn ich das habe, dann möchte ich Markierungskoordinaten gleich 38 00:03:00,190 --> 00:03:05,050 einem Objekt setzen, wo Sie müssen einen Breitengrad mit dem Namen "Breitengrad" haben, es 39 00:03:05,080 --> 00:03:06,070 ist also 40 00:03:06,070 --> 00:03:10,890 kein Breitengrad, sondern ein Breitengrad, da die Markierungskomponente nach einer Eigenschaft mit dem 41 00:03:12,100 --> 00:03:15,390 Namen "Breitengrad" sucht und dies der ausgewählte Standort sein 42 00:03:16,710 --> 00:03:17,860 kann. lat 43 00:03:17,970 --> 00:03:22,970 sagen wir mal, es liegt an uns, wie wir das dann speichern, wir machen es gerade nicht, aber später werde 44 00:03:22,970 --> 00:03:28,100 ich es so speichern, dass wir dort eine lat-Stütze und einen Längengrad haben, der so benannt werden muss, dass er den 45 00:03:28,100 --> 00:03:31,150 Wert halten kann in selectedLocation gespeichert. lng. 46 00:03:31,370 --> 00:03:36,560 Jetzt sind die Markierungskoordinaten bedingt festgelegt. Hier können wir nun überprüfen, ob Markierungsbedingungen vorhanden sind. Wenn dies der 47 00:03:36,890 --> 00:03:44,100 Fall ist, verwenden wir diese Verknüpfung, um auch hier eine Markierung auszugeben. Jetzt können wir hier auch Markierungskoordinaten eingeben. 48 00:03:44,100 --> 00:03:45,900 Bitte beachten Sie, 49 00:03:45,900 --> 00:03:49,890 dass dies Koordinaten sind, keine Koordinaten, sondern nur Koordinaten. 50 00:03:49,890 --> 00:03:56,260 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 51 00:03:56,250 --> 00:03:57,420 möchte ich dies 52 00:03:57,620 --> 00:04:01,740 hier in meinem Handler für ausgewählte Orte tun. Dort möchte ich set selected 53 00:04:01,820 --> 00:04:08,330 location aufrufen, um meinen Status festzulegen, ein Objekt dort zu übergeben und meinen Status auf ein Objekt mit einem Lat-Schlüssel 54 00:04:08,330 --> 00:04:16,450 zu setzen, da ich versuche, Lat des Ereignisses dort unten zu extrahieren. nativeEvent, wie Sie gesehen haben, und dort gab es diese 55 00:04:16,490 --> 00:04:22,580 Koordinateneigenschaft, die eine Breitengradeigenschaft hat, und dann sollte lng, das ich dort unten auch extrahiere, 56 00:04:22,580 --> 00:04:31,520 auf event gesetzt werden. nativeEvent. Koordinaten. Längengrad. Und mit diesem Code sollten wir in 57 00:04:31,520 --> 00:04:35,480 der Lage sein, eine Markierung auf der Karte anzuzeigen. Probieren wir es aus, gehen wir zu 58 00:04:35,480 --> 00:04:36,900 iOS, laden die Karte dort 59 00:04:36,950 --> 00:04:38,240 und wählen einen Ort 60 00:04:41,190 --> 00:04:47,640 aus. An der Stelle, an der ich klicke, sehen wir eine Markierung. Das Gleiche gilt hoffentlich auch für Android. 61 00:04:47,640 --> 00:04:53,480 Probieren Sie es dort aus, öffnen Sie die Karte und platzieren Sie 62 00:04:53,520 --> 00:04:54,720 dort, wenn 63 00:04:58,440 --> 00:05:01,380 ich irgendwo tippe, auch meinen Marker. 64 00:05:01,410 --> 00:05:05,290 So können wir also mit Markern arbeiten und Orte auswählen, es 65 00:05:05,340 --> 00:05:06,820 ist alles schön. 66 00:05:06,810 --> 00:05:12,090 Jetzt möchte ich in der Lage sein, dort oben auf eine Schaltfläche zum Speichern zu 67 00:05:12,090 --> 00:05:19,750 klicken, die noch nicht vorhanden ist. Diese schließt dann diese Karte und übergibt den ausgewählten Ort am Ende wieder an meinen neuen 68 00:05:19,750 --> 00:05:24,940 Ortsbildschirm, den ich hier habe auch. Ich möchte zu diesem Bildschirm zurückkehren und natürlich meinen ausgewählten 69 00:05:24,950 --> 00:05:25,500 Speicherort speichern.