Jetzt möchte ich hier auch eine kleine Kartenvorschau anzeigen und es gibt natürlich verschiedene Möglichkeiten, dies zu
tun. Später werden wir dieser App auch eine interaktive Karte hinzufügen.
Im Moment möchte ich nur ein
statisches Bild haben, also wie ein Kartenschnappschuss, und das Coole ist, dass Google eine API für uns hat, die solche Schnappschüsse generiert.
Sie können bei Google nach der statischen API von Google Maps suchen, um die offizielle Dokumentation zu finden, in
der Sie natürlich alles
darüber erfahren können. Letztendlich ist die Verwendung dieser API sehr einfach.
Sie müssen die Anfrage nur an diese URL senden, und dies gibt Ihnen bereits ein Bild zurück. Sie
können diesen Link also einfach für eine Bildkomponente verwenden und sind gut.
Das einzig schwierige hier ist dieser API-Schlüssel. Dort benötigen Sie Ihre API-Anmeldeinformationen und
dafür benötigen Sie einen API-Schlüssel.
Dazu können Sie hier einfach auf Ihren API-Schlüssel klicken und einen generieren. Jetzt können Sie ein
Projekt auswählen, das Sie bereits haben, oder ein neues Projekt
erstellen. Dazu müssen Sie hier abbrechen und stattdessen etwas weiter nach unten scrollen Aktivieren
Sie zunächst den API-Teil hier und klicken Sie hier auf Erste Schritte.
Sobald Sie dies getan haben, werden Sie zur Google Maps-Plattformkonsole weitergeleitet, wo Sie
jetzt die verschiedenen Google Maps-Funktionen aktivieren können, die Sie verwenden möchten. Hier interessieren mich
Karten, mit denen wir diese interaktive dynamische App später verwenden können Android und ich interessieren uns für Orte.
Diese beiden Dinge sollten also überprüft
werden. Wir brauchen keine Routen, da wir hier keine Navigationsfunktionen erstellen. Damit können wir auf Weiter klicken,
ein Projekt auswählen und jetzt entweder ein vorhandenes Projekt auswählen oder einfach ein neues
erstellen eins und ich werde hier ein neues erstellen und es React Complete Guide nennen, aber Sie können
es benennen, was Sie wollen,
klicken Sie hier und warten Sie, bis es generiert wird.
Dies sollte relativ schnell gehen und jetzt machen wir uns Sorgen um die Preisgestaltung,
während diese geladen wird.
Sie können dies im Allgemeinen kostenlos nutzen, benötigen jedoch ein Abrechnungskonto, und
darum werde ich hier gebeten.
Sie benötigen natürlich ein
Google-Konto und für dieses Google-Konto benötigen Sie eine Kreditkarte, um es verwenden zu können.
Andernfalls können Sie das leider nicht verwenden, es ist das, was es ist.
Sie benötigen also eine
Kreditkarte, müssen ein Abrechnungskonto in Ihrem Google-Konto eingerichtet haben und können dann dieses
angemeldete Google-Konto für dieses Projekt verwenden, was ich hier mache. Wenn diese Option aktiviert ist, können Sie diese weiterhin kostenlos
nutzen. Sie haben eine sehr großzügige kostenlose
Stufe erhalten und im Anhang finden Sie einen Link zur Preisgestaltung der Google Maps-Plattform und nur
dann, wenn Sie bestimmte Grenzwerte verletzen, für die wir nicht verstoßen die geringe Nutzung, die wir hier in diesen
Videos haben, nur wenn Sie diese Grenzen überschreiten würden, würden Sie bezahlen.
Beachten Sie jetzt immer noch, dass es einen Punkt geben kann, an dem Sie bezahlen müssen,
und dass dies davon abhängt, wie oft Sie die API verwenden, und lesen Sie daher unbedingt die Preisdokumente.
Jetzt hier habe ich das alles jetzt aktiviert und ich beende es gerade
und am Ende sollte dir ein API-Schlüssel präsentiert werden, den ich natürlich nach diesen Aufnahmen ungültig machen werde.
Sie können meinen also nicht verwenden, aber Sie sollten
stattdessen Ihren verwenden. Dies ist nun der API-Schlüssel, den Sie hier in diese URL einfügen müssen.
Jetzt kopiere ich einfach die gesamte URL hierher und verschiebe sie in unseren Code. Dort möchte ich jetzt ein
Bild ausgeben, das auf diese URL verweist, da Sie, wie bereits erwähnt, auf diese Weise
dieses Bild und diese URL erhalten können gibt ein Bild zurück.
Jetzt erstelle ich hier eine neue Komponente, die ich MapPreview nennen werde. js, weil ich es später auch
an einer anderen Stelle der App verwenden werde, wo ich React von React
importiere und wo ich dann Bild und Stylesheet von React Native wie folgt importiere.
Dann erstelle ich hier meine Kartenvorschau-Komponente, die natürlich nicht überraschend Requisiten erhält, die später etwas jsx zurückgeben
und hier mit Stylesheet einige Stile einrichten muss. Erstellen und
exportieren Sie natürlich auch diese Kartenvorschau-Komponente.
Jetzt hier möchte ich diese URL generieren, über die ich gerade gesprochen habe.
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
sicher, dass die URL, die Sie gerade aus der Dokumentation hier kopiert haben, in einer Zeile
steht, da dies
standardmäßig nicht der Fall ist. Stellen Sie also sicher, dass
alles in einer Zeile steht, da dies sonst
nicht funktioniert und Sie jetzt natürlich
einige Segmente benötigen Ersetzen Sie zum
Beispiel hier, dass die Mitte gleich Teil ist. Standardmäßig zeigt dies auf die Brooklyn Bridge und
Sie können hier Adressen eingeben, aber Sie können hier auch Längen- und Breitengrade eingeben.
Was ich hier also tun werde, ist, dass ich hier dynamisch zwei durch Komma getrennte Informationen hinzufüge und das erste, was
ist der Breitengrad. Hier erwarte ich,
dass dies auf meine Requisiten kommt, ich
erwarte, dass ich eine Standort-Requisite bekomme, und natürlich kann dies ein beliebiger Requisitenname Ihrer Wahl
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
des
Standorts, den ich in der Vorschau anzeigen möchte. Wenn Sie nun den Zoomfaktor auf 14 setzen,
können Sie mit verschiedenen Faktoren experimentieren. Dies beeinflusst im Wesentlichen, wie weit die Karte vergrößert oder verkleinert wird.
Hier können Sie auch mit Ihrer Größe herumspielen.
Da ich jetzt einen Kartenvorschau-Container habe, den ich normalerweise mit einer Höhe von
200 verwende, setze ich hier die Höhe auf 200 und hier die Breite auf 400.
Natürlich können Sie hier eine größere Größe verwenden, als Sie für den Container verwenden, um das Bild später
anzuzeigen. Beachten Sie jedoch, dass beim Abrufen eines sehr großen Bildes zu viele Daten vorhanden sind
Download, es wird langsamer geladen und Sie brauchen das möglicherweise nicht.
Daher sollten Sie hier eine Größe des Kartenbilds anstreben, die zu dem Container passt, in dem Sie es anzeigen
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.
Sie können hier Satelliten verwenden, aber ich bleibe bei der Standard-Straßenkarte und jetzt können Sie dieser Karte auch
Markierungen hinzufügen.
Jetzt sind ein paar Marker in diesem Dummy-Snippet
eingerichtet. Ich werde alle außer einem entfernen, damit ich hier nur Marker habe, Farbe rot, ein Etikett von a, dies
kann hier
ein einzelnes Zeichen wie ABC
sein und dann den Breiten- und Längengrad, an dem dieser Marker platziert werden soll, und natürlich sind
das wieder Requisiten. Ort. lat und dann hier
ein Komma und danach diese Nummer durch Requisiten ersetzen. Ort. lng.
Das Platzieren eines solchen Markers ist optional, aber ich möchte dem Benutzer natürlich zeigen, wo sich dieser befindet.
Jetzt brauche ich den API-Schlüssel, also kopiere ich diesen hier generierten Schlüssel und ersetze ihn hier.
Jetzt kann ich es nicht mehr so einfügen, aber eigentlich möchte ich dies in einer separaten Datei verwalten,
da ich diesen API-Schlüssel auch an anderen Stellen der App verwenden werde.
Also werde ich hier eine neue Datei erstellen, die ich env nennen werde. js for environment um einige
Umgebungsvariablen einzurichten und dort werde ich ein Objekt mit meinem Google API-Schlüssel einrichten und das sollte dieser Wert hier sein
und dann kann ich dies exportieren und natürlich sollte das einen Namen haben, vars gleich und dann exportiere ich
hier vars.
Damit kann ich einfach aus dieser env-Datei importieren und genau das
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
ein.
Jetzt haben wir also einen Ort, an dem wir diesen Schlüssel ändern und von dem wir ihn dann auch an
allen verschiedenen Stellen unserer App importieren können.
Also hier werde ich env dynamisch injizieren. googleapikey.
Damit habe ich die Bildvorschau-URL eingerichtet.
In dieser Komponente müssen wir natürlich die Bildvorschau zurückgeben, und das ist im Allgemeinen
die Ansicht, die ich hier in der Standortauswahl habe. Also nehme ich es von dort und füge es
wie folgt in die Kartenvorschau ein, obwohl der Fallback-Inhalt dort
tatsächlich von außen weitergegeben werden soll, also schneide ich es wieder aus und verschiebe es wieder in das
Standortauswahl.
Importieren Sie diese neu
hinzugefügte Kartenvorschau-Komponente jedoch nicht hier, sondern importieren Sie sie von. / MapPreview, also diese neue Komponente, an der wir gerade
arbeiten, fügen Sie diese hier hinzu,
kartieren Sie die
Vorschau und lassen Sie diese Überprüfung für diesen Abruf und den Indikator und den Fallback-Text hier durchführen.
In der Kartenvorschau habe ich daher nur Requisitenkinder hier, um auszugeben, was zwischen dem öffnenden und dem schließenden Tag hinzugefügt
wird, aber das ist nur ein Fallback-Inhalt. Natürlich ist
es mir wichtig, hier die echte Vorschau auszugeben. Dazu müssen wir sicherstellen, dass die Bildvorschau-URL auch
dann leer sein kann, falls noch kein Ort ausgewählt wurde. Daher erstelle ich eine variable Bildvorschau-URL
und weise hier nur einen
Wert zu, und ich möchte einen Wert zuweisen wenn Requisiten. Der Standort ist festgelegt, da dies auch nicht festgelegt werden
kann, wenn wir noch keinen Standort ausgewählt haben und die Bildvorschau-URL jetzt entweder leer ist oder diese URL, je nachdem,
ob ein Standort auf der Standort-Requisite übergeben wurde und wir diesen jetzt verwenden können Da unten, um etwas auszugeben,
und da
ich hier die Ansicht verwende, sollten wir natürlich auch sicherstellen, dass
wir die Ansicht importieren.
Wie verwende ich diese URL?
Nun, wenn wir es haben, möchte ich es
verwenden, um ein Bild auszugeben, andernfalls werde ich diesen Requisiten-Fallback-Inhalt für Kinder zeigen.
Hier können wir also nach Requisiten
suchen. Ort, wenn das
festgelegt ist Ich weiß, dass ich auch
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
ein
Bild ausgeben, wenn es nicht festgelegt ist, werde ich Ausgabe Requisiten Kinder wie diese, also werde ich meinen Fallback-Inhalt ausgeben.
Jetzt erhält das Bild hier ein Styling, ein
Kartenbild und eine Quelle, und die Quelle hier nimmt einen URI, der auf die Bildvorschau-URL verweist, da dies eine Netzwerk-URL,
ein Netzwerkbild ist, oder?
Lassen Sie uns nun einfach die Stile aus
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
manuell übergeben und zusammenführen, sodass ich weiterhin Stile übergebe . MapPreview aus meiner Standortauswahl und in der Kartenvorschau möchte ich
dies nun mit meinen hier eingerichteten Stilen zusammenführen. Hier werde ich dies also tatsächlich in ein Objekt
einwickeln, in dem ich alle in der Kartenvorschau eingerichteten Stile hier herausziehe und alle auf dieser Stil-Requisite
eingerichteten Stile zusammenführe, damit wir Stile auch von außen festlegen und mit ihnen zusammenführen können Unsere internen
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
für das Bild selbst ausrichten. Für
das Kartenbild möchte ich
dies hier festlegen Alle verfügbaren Breiten und Höhen, die es bekommen kann, und wir müssen dies einstellen, da
es sich um ein Netzwerk-Image handelt. Wie Sie gelernt haben, müssen Sie für diese die
Breite und Höhe der Bildkomponente einstellen.
Damit haben wir nun die Kartenvorschau-Komponente, die entweder dieses Kartenbild oder unseren Fallback-Inhalt
anzeigt, der von außen
übergeben wird, und dies durch Überprüfen der Standort-Requisite.
An dem Ort, an dem wir die Kartenvorschau-Komponente verwenden, die natürlich die
Standortauswahl ist, müssen wir diese Standort-Requisite übergeben, und die Standort-Requisite
muss, wenn wir die Kartenvorschau überprüfen, am Ende ein Objekt mit einem Breitengrad sein und Längengrad oder ein
lat und lng Schlüssel. Deshalb möchte ich hier
in der Standortauswahl eine solche Requisite abgeben, und genau das schaffen wir hier
mit dem Standort, was natürlich kein Zufall ist. Dies ist ein Objekt mit Längen- und Breitengrad oder es ist anfangs
undefiniert. Wir behandeln diesen Fall auch in der Kartenvorschau-Komponente. Wenn
es nicht definiert ist, zeigen wir nur den Fallback-Inhalt an, der von außen übergeben wird.
Zum Standort können wir also einfach den ausgewählten Ort übergeben und damit sollten wir jetzt ein Setup haben,
in dem wir tatsächlich eine Vorschau des Ortes sehen können.
Jetzt sehen wir hier den Fallback-Inhalt, aber
wenn ich jetzt auf Benutzerstandort abrufen klicke, sehen wir den Spinner und dann sehen wir eine echte Momentaufnahme des Ortes, den wir
ausgewählt haben.
Wie ich bereits erwähnt habe, sitze ich hier nicht, dies ist
nur ein Dummy-Platz, den der Emulator uns gibt. Das gleiche gilt für Android.
Wenn ich hier einen Standort einnehme, ist
dies nun tatsächlich die Google-Zentrale, die ich dort standardmäßig ausgewählt habe.
Das funktioniert also. Als nächsten Schritt möchte ich sicherstellen, dass wir
diesen Ort auch auf einer Karte auswählen können, anstatt uns nur zu lokalisieren.