Quindi ora voglio anche visualizzare una piccola anteprima della mappa qui e ci sono diversi modi per farlo
ovviamente e in seguito aggiungeremo anche una mappa interattiva a questa app.
Per ora, voglio solo avere un'immagine
statica, quindi come un'istantanea della mappa e la cosa bella è che Google ha un'API per noi che genera tali istantanee.
Puoi cercare l'API statica di Google Maps per trovare la documentazione ufficiale in cui puoi
imparare tutto su
quello, ovviamente e alla fine, usare quell'API è semplicissimo.
Devi solo inviare la richiesta a questo URL e questo ti restituisce già un'immagine, quindi puoi
semplicemente utilizzare questo link su un componente dell'immagine e sei a posto.
L'unica cosa difficile qui è questa cosa chiave API, lì hai bisogno delle tue credenziali API e per
questo, hai bisogno di una chiave API.
Ora, per questo, puoi semplicemente fare clic sulla tua chiave API qui e generarne uno e ora puoi
selezionare un progetto che hai già o creare un nuovo progetto
e per questo è necessario annullare qui e scorrere un po 'più in basso fino a questo
per iniziare, attiva la parte API qui e fai clic su per iniziare qui.
Ora, una volta che lo fai, vieni indirizzato alla console della piattaforma di Google Maps
dove ora puoi abilitare le diverse funzioni di Google Maps che desideri utilizzare e qui sono
interessato alle mappe che in seguito ci aiuteranno a utilizzare questa app dinamica interattiva su Android e sono interessato ai luoghi.
Quindi queste due cose dovrebbero essere
verificate, non abbiamo bisogno dei percorsi perché non stiamo costruendo alcuna funzionalità di navigazione qui e con
ciò, possiamo fare clic su continua, selezionare un progetto e ora selezionare un progetto esistente
o semplicemente crearne uno nuovo uno e ne creerò uno nuovo qui e lo nominerò React Complete Guide
ma puoi nominarlo come preferisci,
fai clic qui accanto e attendi che questo venga generato.
Questo dovrebbe essere relativamente veloce e ora siamo preoccupati per i prezzi
durante il caricamento.
In genere puoi utilizzarlo gratuitamente ma hai bisogno di un account di fatturazione ed è
quello che mi viene chiesto qui.
Naturalmente hai bisogno di
un account Google e su questo account Google, devi avere una carta di
credito per usarlo, altrimenti non puoi purtroppo usarlo, è quello che è.
Quindi hai bisogno di una carta
di credito, devi avere un account di fatturazione impostato nel tuo account Google e quindi puoi utilizzare questo
account Google registrato per questo progetto, che è quello che sto facendo qui. Con quello abilitato, sarai ancora in grado di utilizzarlo
gratuitamente, hai un livello gratuito
molto generoso e in allegato trovi un link ai prezzi della piattaforma di Google
Maps e solo se infrangi determinati limiti che non violeremo il poco utilizzo che abbiamo qui
in questi video, solo se tu violassi questi limiti pagheresti.
Ora sappi ancora che può esserci un punto in cui devi pagare
e che dipende da quanto usi l'API e quindi dai un'occhiata ai documenti sui prezzi.
Ora qui, ho ottenuto tutto abilitato ora e sto solo finendo questo
e alla fine, dovresti essere presentato con una chiave API che ovviamente invaliderò dopo queste registrazioni.
Quindi non puoi usare il mio ma dovresti invece prendere
il tuo e ora questa è la chiave API che devi inserire qui in questo URL.
Quindi ora copierò l'intero URL qui e lo sposterò nel nostro codice e lì, ora voglio
produrre un'immagine qui che punta a quell'URL perché, come ho già detto, ecco
come puoi ottenere questa immagine, questo URL restituisce un'immagine.
Ora quello che farò quindi creerò qui un nuovo componente che chiamerò MapPreview. js perché lo userò anche in
un altro posto dell'app in seguito in cui importerò React da React e
dove quindi importerò immagine e foglio di stile da React Native, in questo modo.
Quindi qui, creerò il mio componente di anteprima della mappa che riceve ovviamente oggetti di scena, che deve restituire qualche jsx
in seguito e impostare alcuni stili qui con Stylesheet. creare e, naturalmente,
esportare anche questo componente di anteprima della mappa.
Ora qui, voglio generare questo URL di cui ho appena parlato, quindi qui
dovrebbe essere generato l'URL di anteprima dell'immagine e ciò può essere fatto usando i segni di spunta qui in modo da poter aggiungere facilmente contenuto dinamico nel
testo e quindi copiarlo in quell'URL che hai appena copiato dalla documentazione qui, assicurati che sia tutto
in una riga
perché per impostazione predefinita non lo è, quindi assicurati che sia
tutto in una riga altrimenti non funzionerà e
ora ovviamente ci sono un paio
di segmenti che devi sostituire, ad
esempio qui, il centro è uguale a parte. Per impostazione predefinita, questo indica il Ponte di Brooklyn
e puoi inserire gli indirizzi qui, ma puoi anche inserire coppie di latitudine e longitudine qui.
Quindi quello che farò qui è aggiungere dinamicamente due informazioni qui separate da una virgola e la prima cosa
è la latitudine. Qui mi aspetto
di ottenere questo sui miei oggetti di scena,
mi aspetto di ottenere un oggetto di posizione e ovviamente questo può essere qualsiasi nome di prop
a tua scelta che quindi dovrebbe avere una chiave lat e qui, voglio avere una chiave lunga, una chiave di lng anche, così che sarà la
latitudine e
la longitudine della posizione che voglio visualizzare in anteprima. Ora il fattore di zoom, lo imposterò
su 14, puoi sperimentare diversi fattori, questo influenza fondamentalmente la distanza di ingrandimento o riduzione della mappa.
Puoi anche giocare con le tue dimensioni qui.
Ora, poiché avrò un contenitore di anteprima della mappa che in genere userò con
un'altezza di 200, imposterò l'altezza su 200 qui e imposterò la larghezza quindi su 400 qui.
Ovviamente, puoi usare una dimensione più grande di quella che utilizzerai per il contenitore per visualizzare l'immagine in un secondo
momento, tieni presente che se stai recuperando un'immagine super grande qui, sarà ovviamente troppo grande, troppi dati
per il download si caricherà più lentamente e potresti non averne bisogno.
Quindi dovresti puntare a una dimensione dell'immagine della mappa qui che si adatta al contenitore in cui vuoi visualizzarla,
non deve avere la stessa identica dimensione ma all'incirca. Ora il tipo di mappa è come dovrebbe essere visualizzata la mappa,
puoi usare il satellite qui ma mi atterrò alla mappa stradale standard e ora puoi anche aggiungere marcatori a
quella mappa.
Ora ci sono un paio di marcatori impostati in
questo frammento fittizio, mi sbarazzerò di tutti loro, ma uno in modo da avere solo marcatori qui, colore rosso, un'etichetta di un,
questo può
essere un singolo personaggio qui
come ABC e poi la latitudine e la longitudine in cui dovrebbe essere posizionato questo marker e, naturalmente, questo
è di nuovo puntelli. Posizione. lat e poi qui
una virgola e, successivamente, sostituisci questo numero con oggetti di scena. Posizione. lng.
Posizionare un marcatore di questo tipo è facoltativo, ma ovviamente voglio mostrare all'utente dove si trova.
Ora ho bisogno della chiave API, quindi copierò questa chiave che è stata generata qui e la sostituirò qui.
Ora non posso incollarlo in questo modo ma in realtà, voglio gestirlo in un file
separato perché userò quella chiave API anche in altri punti dell'app.
Quindi qui, creerò un nuovo file che chiamerò env. js for environment per impostare
alcune variabili di ambiente e lì imposterò un oggetto con la mia chiave API di Google e questo dovrebbe essere
questo valore qui e quindi posso esportare questo e, quindi, che dovrebbe avere un nome, molto diverso e quindi esporto
qui vari.
Quindi, con ciò, posso semplicemente importare da quel file env ed
è proprio quello che farò qui, importare env dal file env qui e che sta per variabili d'ambiente come ho detto e ora iniettare dinamicamente questo
qui.
Quindi ora abbiamo un posto dove possiamo cambiare quella chiave e dove possiamo anche importarla da tutti
i diversi luoghi della nostra app.
Quindi qui inietterò dinamicamente env. googleapikey.
Quindi, con quello, ho impostato l'URL di
anteprima dell'immagine, ora in questo componente, ovviamente dobbiamo restituire l'anteprima dell'immagine e questa è generalmente
quella vista che ho qui nel selettore della posizione. Quindi lo prenderò da lì e lo aggiungerò nell'anteprima
della mappa, in questo modo, anche se il contenuto di fallback
è lì, in realtà voglio passarlo dall'esterno, quindi lo taglierò di nuovo e lo sposterò di nuovo nel selettore di
posizione.
Tuttavia, non in questo modo, ma
qui, importa questo componente di anteprima della mappa appena aggiunto, quindi importalo da. / MapPreview, quindi su questo nuovo componente su cui
stiamo attualmente lavorando, aggiungilo qui, visualizza
l'anteprima della mappa
e quindi fai questo controllo per questo recupero e l'indicatore e il testo di fallback qui.
Quindi, nell'anteprima della mappa, avrò quindi solo oggetti secondari qui per produrre ciò che viene aggiunto tra il tag di
apertura e chiusura, ma questo è solo contenuto di
fallback, ovviamente mi interessa produrre l'anteprima reale qui. Ora per questo dobbiamo assicurarci che anche l'URL di anteprima
dell'immagine possa essere vuoto nel caso in cui non sia stato ancora scelto un posto, quindi creerò un URL di
anteprima dell'immagine variabile e assegnerò solo
un valore qui e voglio assegnare un valore se oggetti di scena. la posizione è impostata perché anche questa non può essere impostata
nel caso in cui non abbiamo ancora scelto una posizione e ora l'URL di anteprima dell'immagine è vuoto o è questo
URL a seconda se abbiamo una posizione passata sul puntello di posizione e ora possiamo usare questa laggiù per
produrre qualcosa
e, dal momento che sto usando view qui, ovviamente dovremmo anche
assicurarci di importare view.
Ora come posso usare questo URL?
Bene, se ce l'abbiamo, voglio usarlo per
produrre un'immagine, altrimenti mostrerò questo contenuto di fallback per bambini.
Quindi qui possiamo verificare la presenza di oggetti
di scena. posizione, se
è impostato, so che avrò anche
un URL di immagine, ovviamente potremmo anche controllare l'esistenza dell'URL dell'immagine e, se impostato, visualizzerò un'immagine qui, se
non
è impostata, l'output sostiene i bambini in questo modo, quindi fornirò il mio contenuto di fallback.
Ora l'immagine qui riceverà uno stile, un'immagine della mappa
e una fonte e la fonte qui prende un URI che punta all'URL di anteprima dell'immagine perché sarà un URL di rete,
un'immagine di rete, giusto?
Quindi ora portiamo semplicemente gli stili dal selettore
della posizione, posso prendere un'anteprima della mappa, ma voglio solo riportare la parte del contenuto giustificata e effettivamente passare qui il resto
manualmente e unirli, quindi passerò comunque agli stili . MapPreview dal selettore della mia posizione e nell'anteprima della mappa, ora voglio
unire questo con i miei stili che sto impostando qui. Quindi qui lo avvolgerò in un oggetto in cui
estrarrò tutti gli stili impostati nell'anteprima della mappa qui e unirò in tutti gli stili impostati su
questo oggetto di stile in modo che possiamo impostare anche gli stili dall'esterno e unirli con i
nostri stili interni e ora per gli stili interni nell'anteprima della mappa, come ho appena detto, avrò giustificato il contenuto e allineato gli
elementi qui e per l'immagine stessa,
quindi per l'immagine della
mappa, lì voglio impostare questo per prendere tutta la larghezza e l'altezza disponibili che può ottenere e dobbiamo
impostarla perché è un'immagine di rete. Come hai appreso, per quelli è necessario impostare la
larghezza e l'altezza del componente dell'immagine.
Ora con ciò, abbiamo il componente di anteprima della mappa che visualizza questa immagine della mappa
o il nostro contenuto di fallback
che viene passato dall'esterno e lo fa controllando la posizione.
Quindi nel luogo in cui utilizziamo il componente di anteprima della mappa che ovviamente
è il selettore della posizione, dobbiamo passare questo prop di posizione e
il prop di posizione, se controlliamo l'anteprima della mappa, alla fine deve essere un oggetto con una latitudine e longitudine o
un tasto lat e lng. Quindi, quindi, nel selettore della posizione,
voglio passare un simile oggetto qui e in effetti, questo è esattamente ciò che gestiamo qui con
il punto di prelievo che ovviamente non è una coincidenza. Questo è un oggetto con latitudine e longitudine o inizialmente non definito
e gestiamo questo caso anche nel componente di anteprima della
mappa, se non è definito, mostriamo semplicemente il contenuto di fallback che viene passato dall'esterno.
Quindi per la posizione, possiamo semplicemente passare nella posizione selezionata e con ciò, ora dovremmo avere una configurazione in
cui siamo effettivamente in grado di vedere un'anteprima del luogo.
Quindi ora qui, vediamo il contenuto
di fallback ma se ora faccio clic su Ottieni posizione utente, vediamo lo spinner e quindi vediamo un'istantanea reale del luogo che
abbiamo scelto.
Come ho già detto, questo non è dove sono seduto in questo momento,
questo è solo un posto fittizio che l'emulatore ci dà. Lo stesso su Android, se
prendo una posizione qui, ora questa è
in realtà la sede di Google che ho selezionato di default lì.
Quindi funziona, ora come passaggio successivo, voglio assicurarmi che
possiamo anche scegliere questo posto su una mappa invece di localizzarci.