1 00:00:02,340 --> 00:00:07,350 Jetzt möchte ich hier auch eine kleine Kartenvorschau anzeigen und es gibt natürlich verschiedene Möglichkeiten, dies zu 2 00:00:07,350 --> 00:00:11,000 tun. Später werden wir dieser App auch eine interaktive Karte hinzufügen. 3 00:00:11,010 --> 00:00:12,970 Im Moment möchte ich nur ein 4 00:00:12,960 --> 00:00:19,570 statisches Bild haben, also wie ein Kartenschnappschuss, und das Coole ist, dass Google eine API für uns hat, die solche Schnappschüsse generiert. 5 00:00:19,620 --> 00:00:24,810 Sie können bei Google nach der statischen API von Google Maps suchen, um die offizielle Dokumentation zu finden, in 6 00:00:24,810 --> 00:00:26,010 der Sie natürlich alles 7 00:00:26,190 --> 00:00:29,340 darüber erfahren können. Letztendlich ist die Verwendung dieser API sehr einfach. 8 00:00:29,400 --> 00:00:35,820 Sie müssen die Anfrage nur an diese URL senden, und dies gibt Ihnen bereits ein Bild zurück. Sie 9 00:00:35,820 --> 00:00:40,650 können diesen Link also einfach für eine Bildkomponente verwenden und sind gut. 10 00:00:40,650 --> 00:00:46,740 Das einzig schwierige hier ist dieser API-Schlüssel. Dort benötigen Sie Ihre API-Anmeldeinformationen und 11 00:00:46,740 --> 00:00:49,300 dafür benötigen Sie einen API-Schlüssel. 12 00:00:49,410 --> 00:00:55,590 Dazu können Sie hier einfach auf Ihren API-Schlüssel klicken und einen generieren. Jetzt können Sie ein 13 00:00:55,590 --> 00:00:59,660 Projekt auswählen, das Sie bereits haben, oder ein neues Projekt 14 00:00:59,670 --> 00:01:05,220 erstellen. Dazu müssen Sie hier abbrechen und stattdessen etwas weiter nach unten scrollen Aktivieren 15 00:01:05,250 --> 00:01:10,110 Sie zunächst den API-Teil hier und klicken Sie hier auf Erste Schritte. 16 00:01:10,110 --> 00:01:15,840 Sobald Sie dies getan haben, werden Sie zur Google Maps-Plattformkonsole weitergeleitet, wo Sie 17 00:01:15,840 --> 00:01:21,930 jetzt die verschiedenen Google Maps-Funktionen aktivieren können, die Sie verwenden möchten. Hier interessieren mich 18 00:01:21,930 --> 00:01:29,590 Karten, mit denen wir diese interaktive dynamische App später verwenden können Android und ich interessieren uns für Orte. 19 00:01:29,670 --> 00:01:31,420 Diese beiden Dinge sollten also überprüft 20 00:01:31,470 --> 00:01:36,430 werden. Wir brauchen keine Routen, da wir hier keine Navigationsfunktionen erstellen. Damit können wir auf Weiter klicken, 21 00:01:36,430 --> 00:01:40,600 ein Projekt auswählen und jetzt entweder ein vorhandenes Projekt auswählen oder einfach ein neues 22 00:01:40,600 --> 00:01:45,820 erstellen eins und ich werde hier ein neues erstellen und es React Complete Guide nennen, aber Sie können 23 00:01:45,820 --> 00:01:47,560 es benennen, was Sie wollen, 24 00:01:50,460 --> 00:01:53,370 klicken Sie hier und warten Sie, bis es generiert wird. 25 00:01:53,370 --> 00:01:57,320 Dies sollte relativ schnell gehen und jetzt machen wir uns Sorgen um die Preisgestaltung, 26 00:01:57,360 --> 00:01:58,680 während diese geladen wird. 27 00:01:58,770 --> 00:02:02,970 Sie können dies im Allgemeinen kostenlos nutzen, benötigen jedoch ein Abrechnungskonto, und 28 00:02:02,970 --> 00:02:04,740 darum werde ich hier gebeten. 29 00:02:04,770 --> 00:02:06,080 Sie benötigen natürlich ein 30 00:02:06,150 --> 00:02:09,930 Google-Konto und für dieses Google-Konto benötigen Sie eine Kreditkarte, um es verwenden zu können. 31 00:02:09,930 --> 00:02:13,570 Andernfalls können Sie das leider nicht verwenden, es ist das, was es ist. 32 00:02:13,590 --> 00:02:15,180 Sie benötigen also eine 33 00:02:15,180 --> 00:02:19,590 Kreditkarte, müssen ein Abrechnungskonto in Ihrem Google-Konto eingerichtet haben und können dann dieses 34 00:02:19,590 --> 00:02:26,100 angemeldete Google-Konto für dieses Projekt verwenden, was ich hier mache. Wenn diese Option aktiviert ist, können Sie diese weiterhin kostenlos 35 00:02:26,160 --> 00:02:28,550 nutzen. Sie haben eine sehr großzügige kostenlose 36 00:02:28,550 --> 00:02:33,570 Stufe erhalten und im Anhang finden Sie einen Link zur Preisgestaltung der Google Maps-Plattform und nur 37 00:02:33,810 --> 00:02:39,540 dann, wenn Sie bestimmte Grenzwerte verletzen, für die wir nicht verstoßen die geringe Nutzung, die wir hier in diesen 38 00:02:39,540 --> 00:02:43,200 Videos haben, nur wenn Sie diese Grenzen überschreiten würden, würden Sie bezahlen. 39 00:02:43,200 --> 00:02:47,520 Beachten Sie jetzt immer noch, dass es einen Punkt geben kann, an dem Sie bezahlen müssen, 40 00:02:47,520 --> 00:02:52,340 und dass dies davon abhängt, wie oft Sie die API verwenden, und lesen Sie daher unbedingt die Preisdokumente. 41 00:02:52,380 --> 00:02:57,190 Jetzt hier habe ich das alles jetzt aktiviert und ich beende es gerade 42 00:02:57,300 --> 00:03:03,160 und am Ende sollte dir ein API-Schlüssel präsentiert werden, den ich natürlich nach diesen Aufnahmen ungültig machen werde. 43 00:03:03,180 --> 00:03:06,440 Sie können meinen also nicht verwenden, aber Sie sollten 44 00:03:06,460 --> 00:03:11,610 stattdessen Ihren verwenden. Dies ist nun der API-Schlüssel, den Sie hier in diese URL einfügen müssen. 45 00:03:11,670 --> 00:03:18,150 Jetzt kopiere ich einfach die gesamte URL hierher und verschiebe sie in unseren Code. Dort möchte ich jetzt ein 46 00:03:18,210 --> 00:03:23,790 Bild ausgeben, das auf diese URL verweist, da Sie, wie bereits erwähnt, auf diese Weise 47 00:03:23,790 --> 00:03:27,900 dieses Bild und diese URL erhalten können gibt ein Bild zurück. 48 00:03:27,900 --> 00:03:33,390 Jetzt erstelle ich hier eine neue Komponente, die ich MapPreview nennen werde. js, weil ich es später auch 49 00:03:33,390 --> 00:03:39,090 an einer anderen Stelle der App verwenden werde, wo ich React von React 50 00:03:39,180 --> 00:03:44,890 importiere und wo ich dann Bild und Stylesheet von React Native wie folgt importiere. 51 00:03:47,620 --> 00:03:55,180 Dann erstelle ich hier meine Kartenvorschau-Komponente, die natürlich nicht überraschend Requisiten erhält, die später etwas jsx zurückgeben 52 00:03:55,180 --> 00:04:02,310 und hier mit Stylesheet einige Stile einrichten muss. Erstellen und 53 00:04:04,970 --> 00:04:11,600 exportieren Sie natürlich auch diese Kartenvorschau-Komponente. 54 00:04:12,050 --> 00:04:16,430 Jetzt hier möchte ich diese URL generieren, über die ich gerade gesprochen habe. 55 00:04:17,660 --> 00:04:26,870 Daher sollte hier die Bildvorschau-URL generiert werden. Dies kann mithilfe von Back-Ticks erfolgen, damit ich dem Text einfach dynamischen Inhalt hinzufügen und dann kopieren kann Stellen Sie 56 00:04:26,900 --> 00:04:32,540 sicher, dass die URL, die Sie gerade aus der Dokumentation hier kopiert haben, in einer Zeile 57 00:04:32,540 --> 00:04:34,110 steht, da dies 58 00:04:34,190 --> 00:04:37,790 standardmäßig nicht der Fall ist. Stellen Sie also sicher, dass 59 00:04:37,790 --> 00:04:40,360 alles in einer Zeile steht, da dies sonst 60 00:04:40,370 --> 00:04:42,460 nicht funktioniert und Sie jetzt natürlich 61 00:04:42,460 --> 00:04:44,590 einige Segmente benötigen Ersetzen Sie zum 62 00:04:44,600 --> 00:04:50,210 Beispiel hier, dass die Mitte gleich Teil ist. Standardmäßig zeigt dies auf die Brooklyn Bridge und 63 00:04:50,270 --> 00:04:55,100 Sie können hier Adressen eingeben, aber Sie können hier auch Längen- und Breitengrade eingeben. 64 00:04:55,100 --> 00:05:01,820 Was ich hier also tun werde, ist, dass ich hier dynamisch zwei durch Komma getrennte Informationen hinzufüge und das erste, was 65 00:05:01,820 --> 00:05:04,090 ist der Breitengrad. Hier erwarte ich, 66 00:05:04,100 --> 00:05:06,680 dass dies auf meine Requisiten kommt, ich 67 00:05:06,680 --> 00:05:12,100 erwarte, dass ich eine Standort-Requisite bekomme, und natürlich kann dies ein beliebiger Requisitenname Ihrer Wahl 68 00:05:12,110 --> 00:05:20,600 sein, der dann einen Lat-Schlüssel haben sollte, und hier möchte ich einen langen Schlüssel haben, einen Lng-Schlüssel Dies ist auch der Breiten- und Längengrad 69 00:05:20,660 --> 00:05:21,610 des 70 00:05:21,620 --> 00:05:27,130 Standorts, den ich in der Vorschau anzeigen möchte. Wenn Sie nun den Zoomfaktor auf 14 setzen, 71 00:05:27,200 --> 00:05:33,110 können Sie mit verschiedenen Faktoren experimentieren. Dies beeinflusst im Wesentlichen, wie weit die Karte vergrößert oder verkleinert wird. 72 00:05:33,170 --> 00:05:36,350 Hier können Sie auch mit Ihrer Größe herumspielen. 73 00:05:36,360 --> 00:05:42,230 Da ich jetzt einen Kartenvorschau-Container habe, den ich normalerweise mit einer Höhe von 74 00:05:42,230 --> 00:05:48,520 200 verwende, setze ich hier die Höhe auf 200 und hier die Breite auf 400. 75 00:05:48,740 --> 00:05:55,640 Natürlich können Sie hier eine größere Größe verwenden, als Sie für den Container verwenden, um das Bild später 76 00:05:55,640 --> 00:06:01,610 anzuzeigen. Beachten Sie jedoch, dass beim Abrufen eines sehr großen Bildes zu viele Daten vorhanden sind 77 00:06:01,610 --> 00:06:06,290 Download, es wird langsamer geladen und Sie brauchen das möglicherweise nicht. 78 00:06:06,350 --> 00:06:12,260 Daher sollten Sie hier eine Größe des Kartenbilds anstreben, die zu dem Container passt, in dem Sie es anzeigen 79 00:06:12,260 --> 00:06:18,740 möchten. Sie muss nicht exakt dieselbe Größe haben, sondern ungefähr. Jetzt sollte der Kartentyp so sein, wie die Karte angezeigt werden soll. 80 00:06:18,740 --> 00:06:23,990 Sie können hier Satelliten verwenden, aber ich bleibe bei der Standard-Straßenkarte und jetzt können Sie dieser Karte auch 81 00:06:23,990 --> 00:06:24,870 Markierungen hinzufügen. 82 00:06:24,950 --> 00:06:27,840 Jetzt sind ein paar Marker in diesem Dummy-Snippet 83 00:06:28,040 --> 00:06:34,700 eingerichtet. Ich werde alle außer einem entfernen, damit ich hier nur Marker habe, Farbe rot, ein Etikett von a, dies 84 00:06:34,700 --> 00:06:35,600 kann hier 85 00:06:35,630 --> 00:06:37,220 ein einzelnes Zeichen wie ABC 86 00:06:37,220 --> 00:06:42,890 sein und dann den Breiten- und Längengrad, an dem dieser Marker platziert werden soll, und natürlich sind 87 00:06:42,890 --> 00:06:46,440 das wieder Requisiten. Ort. lat und dann hier 88 00:06:46,490 --> 00:06:53,960 ein Komma und danach diese Nummer durch Requisiten ersetzen. Ort. lng. 89 00:06:54,470 --> 00:07:01,500 Das Platzieren eines solchen Markers ist optional, aber ich möchte dem Benutzer natürlich zeigen, wo sich dieser befindet. 90 00:07:01,740 --> 00:07:09,360 Jetzt brauche ich den API-Schlüssel, also kopiere ich diesen hier generierten Schlüssel und ersetze ihn hier. 91 00:07:09,480 --> 00:07:14,610 Jetzt kann ich es nicht mehr so einfügen, aber eigentlich möchte ich dies in einer separaten Datei verwalten, 92 00:07:14,610 --> 00:07:18,490 da ich diesen API-Schlüssel auch an anderen Stellen der App verwenden werde. 93 00:07:18,570 --> 00:07:24,180 Also werde ich hier eine neue Datei erstellen, die ich env nennen werde. js for environment um einige 94 00:07:24,870 --> 00:07:34,970 Umgebungsvariablen einzurichten und dort werde ich ein Objekt mit meinem Google API-Schlüssel einrichten und das sollte dieser Wert hier sein 95 00:07:34,970 --> 00:07:44,820 und dann kann ich dies exportieren und natürlich sollte das einen Namen haben, vars gleich und dann exportiere ich 96 00:07:44,820 --> 00:07:45,980 hier vars. 97 00:07:46,050 --> 00:07:51,000 Damit kann ich einfach aus dieser env-Datei importieren und genau das 98 00:07:51,000 --> 00:08:02,300 werde ich hier tun, env aus der env-Datei hier importieren und das steht nur für Umgebungsvariablen, wie ich sagte, und füge dies jetzt dynamisch hier 99 00:08:02,300 --> 00:08:03,110 ein. 100 00:08:03,110 --> 00:08:07,670 Jetzt haben wir also einen Ort, an dem wir diesen Schlüssel ändern und von dem wir ihn dann auch an 101 00:08:07,670 --> 00:08:09,550 allen verschiedenen Stellen unserer App importieren können. 102 00:08:09,590 --> 00:08:14,900 Also hier werde ich env dynamisch injizieren. googleapikey. 103 00:08:15,010 --> 00:08:17,900 Damit habe ich die Bildvorschau-URL eingerichtet. 104 00:08:18,100 --> 00:08:23,550 In dieser Komponente müssen wir natürlich die Bildvorschau zurückgeben, und das ist im Allgemeinen 105 00:08:23,560 --> 00:08:30,250 die Ansicht, die ich hier in der Standortauswahl habe. Also nehme ich es von dort und füge es 106 00:08:31,500 --> 00:08:35,130 wie folgt in die Kartenvorschau ein, obwohl der Fallback-Inhalt dort 107 00:08:35,130 --> 00:08:41,790 tatsächlich von außen weitergegeben werden soll, also schneide ich es wieder aus und verschiebe es wieder in das 108 00:08:41,790 --> 00:08:42,420 Standortauswahl. 109 00:08:42,420 --> 00:08:44,370 Importieren Sie diese neu 110 00:08:45,180 --> 00:08:53,440 hinzugefügte Kartenvorschau-Komponente jedoch nicht hier, sondern importieren Sie sie von. / MapPreview, also diese neue Komponente, an der wir gerade 111 00:08:53,480 --> 00:08:55,910 arbeiten, fügen Sie diese hier hinzu, 112 00:08:56,030 --> 00:08:57,960 kartieren Sie die 113 00:08:58,220 --> 00:09:05,240 Vorschau und lassen Sie diese Überprüfung für diesen Abruf und den Indikator und den Fallback-Text hier durchführen. 114 00:09:05,270 --> 00:09:12,250 In der Kartenvorschau habe ich daher nur Requisitenkinder hier, um auszugeben, was zwischen dem öffnenden und dem schließenden Tag hinzugefügt 115 00:09:12,250 --> 00:09:15,480 wird, aber das ist nur ein Fallback-Inhalt. Natürlich ist 116 00:09:15,480 --> 00:09:21,760 es mir wichtig, hier die echte Vorschau auszugeben. Dazu müssen wir sicherstellen, dass die Bildvorschau-URL auch 117 00:09:21,820 --> 00:09:28,190 dann leer sein kann, falls noch kein Ort ausgewählt wurde. Daher erstelle ich eine variable Bildvorschau-URL 118 00:09:28,220 --> 00:09:30,610 und weise hier nur einen 119 00:09:30,610 --> 00:09:37,990 Wert zu, und ich möchte einen Wert zuweisen wenn Requisiten. Der Standort ist festgelegt, da dies auch nicht festgelegt werden 120 00:09:37,990 --> 00:09:44,980 kann, wenn wir noch keinen Standort ausgewählt haben und die Bildvorschau-URL jetzt entweder leer ist oder diese URL, je nachdem, 121 00:09:44,980 --> 00:09:51,400 ob ein Standort auf der Standort-Requisite übergeben wurde und wir diesen jetzt verwenden können Da unten, um etwas auszugeben, 122 00:09:51,400 --> 00:09:52,220 und da 123 00:09:52,220 --> 00:09:56,020 ich hier die Ansicht verwende, sollten wir natürlich auch sicherstellen, dass 124 00:09:56,020 --> 00:09:57,640 wir die Ansicht importieren. 125 00:09:57,870 --> 00:09:59,290 Wie verwende ich diese URL? 126 00:09:59,310 --> 00:10:02,160 Nun, wenn wir es haben, möchte ich es 127 00:10:02,160 --> 00:10:06,170 verwenden, um ein Bild auszugeben, andernfalls werde ich diesen Requisiten-Fallback-Inhalt für Kinder zeigen. 128 00:10:06,240 --> 00:10:08,580 Hier können wir also nach Requisiten 129 00:10:08,580 --> 00:10:10,140 suchen. Ort, wenn das 130 00:10:10,140 --> 00:10:12,230 festgelegt ist Ich weiß, dass ich auch 131 00:10:12,240 --> 00:10:18,600 eine Bild-URL haben werde, könnten wir natürlich auch einfach die Existenz der Bild-URL überprüfen und wenn dies festgelegt ist, werde ich hier 132 00:10:18,600 --> 00:10:19,260 ein 133 00:10:19,260 --> 00:10:25,200 Bild ausgeben, wenn es nicht festgelegt ist, werde ich Ausgabe Requisiten Kinder wie diese, also werde ich meinen Fallback-Inhalt ausgeben. 134 00:10:26,110 --> 00:10:29,960 Jetzt erhält das Bild hier ein Styling, ein 135 00:10:30,040 --> 00:10:39,650 Kartenbild und eine Quelle, und die Quelle hier nimmt einen URI, der auf die Bildvorschau-URL verweist, da dies eine Netzwerk-URL, 136 00:10:39,650 --> 00:10:42,010 ein Netzwerkbild ist, oder? 137 00:10:43,000 --> 00:10:46,330 Lassen Sie uns nun einfach die Stile aus 138 00:10:46,390 --> 00:10:54,520 der Standortauswahl übernehmen. Ich kann eine Kartenvorschau erstellen, aber ich möchte nur den Teil zum Begründen des Inhalts übernehmen und den Rest hier 139 00:10:54,520 --> 00:11:01,390 manuell übergeben und zusammenführen, sodass ich weiterhin Stile übergebe . MapPreview aus meiner Standortauswahl und in der Kartenvorschau möchte ich 140 00:11:01,390 --> 00:11:07,300 dies nun mit meinen hier eingerichteten Stilen zusammenführen. Hier werde ich dies also tatsächlich in ein Objekt 141 00:11:07,300 --> 00:11:13,270 einwickeln, in dem ich alle in der Kartenvorschau eingerichteten Stile hier herausziehe und alle auf dieser Stil-Requisite 142 00:11:13,270 --> 00:11:19,240 eingerichteten Stile zusammenführe, damit wir Stile auch von außen festlegen und mit ihnen zusammenführen können Unsere internen 143 00:11:19,240 --> 00:11:26,980 Stile und jetzt für die internen Stile in der Kartenvorschau, wie ich gerade sagte, muss ich den Inhalt begründen und Elemente hier und 144 00:11:26,980 --> 00:11:29,050 für das Bild selbst ausrichten. Für 145 00:11:29,200 --> 00:11:30,850 das Kartenbild möchte ich 146 00:11:30,910 --> 00:11:37,020 dies hier festlegen Alle verfügbaren Breiten und Höhen, die es bekommen kann, und wir müssen dies einstellen, da 147 00:11:37,040 --> 00:11:41,410 es sich um ein Netzwerk-Image handelt. Wie Sie gelernt haben, müssen Sie für diese die 148 00:11:41,410 --> 00:11:43,040 Breite und Höhe der Bildkomponente einstellen. 149 00:11:44,710 --> 00:11:51,040 Damit haben wir nun die Kartenvorschau-Komponente, die entweder dieses Kartenbild oder unseren Fallback-Inhalt 150 00:11:51,040 --> 00:11:53,690 anzeigt, der von außen 151 00:11:53,920 --> 00:11:57,640 übergeben wird, und dies durch Überprüfen der Standort-Requisite. 152 00:11:57,640 --> 00:12:02,950 An dem Ort, an dem wir die Kartenvorschau-Komponente verwenden, die natürlich die 153 00:12:02,950 --> 00:12:07,330 Standortauswahl ist, müssen wir diese Standort-Requisite übergeben, und die Standort-Requisite 154 00:12:07,330 --> 00:12:15,190 muss, wenn wir die Kartenvorschau überprüfen, am Ende ein Objekt mit einem Breitengrad sein und Längengrad oder ein 155 00:12:15,190 --> 00:12:19,840 lat und lng Schlüssel. Deshalb möchte ich hier 156 00:12:19,910 --> 00:12:25,610 in der Standortauswahl eine solche Requisite abgeben, und genau das schaffen wir hier 157 00:12:25,610 --> 00:12:32,870 mit dem Standort, was natürlich kein Zufall ist. Dies ist ein Objekt mit Längen- und Breitengrad oder es ist anfangs 158 00:12:33,050 --> 00:12:36,300 undefiniert. Wir behandeln diesen Fall auch in der Kartenvorschau-Komponente. Wenn 159 00:12:36,410 --> 00:12:41,060 es nicht definiert ist, zeigen wir nur den Fallback-Inhalt an, der von außen übergeben wird. 160 00:12:41,060 --> 00:12:46,880 Zum Standort können wir also einfach den ausgewählten Ort übergeben und damit sollten wir jetzt ein Setup haben, 161 00:12:46,880 --> 00:12:50,150 in dem wir tatsächlich eine Vorschau des Ortes sehen können. 162 00:12:50,630 --> 00:12:52,490 Jetzt sehen wir hier den Fallback-Inhalt, aber 163 00:12:52,520 --> 00:12:59,120 wenn ich jetzt auf Benutzerstandort abrufen klicke, sehen wir den Spinner und dann sehen wir eine echte Momentaufnahme des Ortes, den wir 164 00:12:59,150 --> 00:13:00,010 ausgewählt haben. 165 00:13:00,080 --> 00:13:02,180 Wie ich bereits erwähnt habe, sitze ich hier nicht, dies ist 166 00:13:02,180 --> 00:13:05,930 nur ein Dummy-Platz, den der Emulator uns gibt. Das gleiche gilt für Android. 167 00:13:05,930 --> 00:13:08,370 Wenn ich hier einen Standort einnehme, ist 168 00:13:08,370 --> 00:13:12,140 dies nun tatsächlich die Google-Zentrale, die ich dort standardmäßig ausgewählt habe. 169 00:13:12,880 --> 00:13:17,370 Das funktioniert also. Als nächsten Schritt möchte ich sicherstellen, dass wir 170 00:13:17,410 --> 00:13:22,570 diesen Ort auch auf einer Karte auswählen können, anstatt uns nur zu lokalisieren.