1 00:00:02,340 --> 00:00:07,350 Quindi ora voglio anche visualizzare una piccola anteprima della mappa qui e ci sono diversi modi per farlo 2 00:00:07,350 --> 00:00:11,000 ovviamente e in seguito aggiungeremo anche una mappa interattiva a questa app. 3 00:00:11,010 --> 00:00:12,970 Per ora, voglio solo avere un'immagine 4 00:00:12,960 --> 00:00:19,570 statica, quindi come un'istantanea della mappa e la cosa bella è che Google ha un'API per noi che genera tali istantanee. 5 00:00:19,620 --> 00:00:24,810 Puoi cercare l'API statica di Google Maps per trovare la documentazione ufficiale in cui puoi 6 00:00:24,810 --> 00:00:26,010 imparare tutto su 7 00:00:26,190 --> 00:00:29,340 quello, ovviamente e alla fine, usare quell'API è semplicissimo. 8 00:00:29,400 --> 00:00:35,820 Devi solo inviare la richiesta a questo URL e questo ti restituisce già un'immagine, quindi puoi 9 00:00:35,820 --> 00:00:40,650 semplicemente utilizzare questo link su un componente dell'immagine e sei a posto. 10 00:00:40,650 --> 00:00:46,740 L'unica cosa difficile qui è questa cosa chiave API, lì hai bisogno delle tue credenziali API e per 11 00:00:46,740 --> 00:00:49,300 questo, hai bisogno di una chiave API. 12 00:00:49,410 --> 00:00:55,590 Ora, per questo, puoi semplicemente fare clic sulla tua chiave API qui e generarne uno e ora puoi 13 00:00:55,590 --> 00:00:59,660 selezionare un progetto che hai già o creare un nuovo progetto 14 00:00:59,670 --> 00:01:05,220 e per questo è necessario annullare qui e scorrere un po 'più in basso fino a questo 15 00:01:05,250 --> 00:01:10,110 per iniziare, attiva la parte API qui e fai clic su per iniziare qui. 16 00:01:10,110 --> 00:01:15,840 Ora, una volta che lo fai, vieni indirizzato alla console della piattaforma di Google Maps 17 00:01:15,840 --> 00:01:21,930 dove ora puoi abilitare le diverse funzioni di Google Maps che desideri utilizzare e qui sono 18 00:01:21,930 --> 00:01:29,590 interessato alle mappe che in seguito ci aiuteranno a utilizzare questa app dinamica interattiva su Android e sono interessato ai luoghi. 19 00:01:29,670 --> 00:01:31,420 Quindi queste due cose dovrebbero essere 20 00:01:31,470 --> 00:01:36,430 verificate, non abbiamo bisogno dei percorsi perché non stiamo costruendo alcuna funzionalità di navigazione qui e con 21 00:01:36,430 --> 00:01:40,600 ciò, possiamo fare clic su continua, selezionare un progetto e ora selezionare un progetto esistente 22 00:01:40,600 --> 00:01:45,820 o semplicemente crearne uno nuovo uno e ne creerò uno nuovo qui e lo nominerò React Complete Guide 23 00:01:45,820 --> 00:01:47,560 ma puoi nominarlo come preferisci, 24 00:01:50,460 --> 00:01:53,370 fai clic qui accanto e attendi che questo venga generato. 25 00:01:53,370 --> 00:01:57,320 Questo dovrebbe essere relativamente veloce e ora siamo preoccupati per i prezzi 26 00:01:57,360 --> 00:01:58,680 durante il caricamento. 27 00:01:58,770 --> 00:02:02,970 In genere puoi utilizzarlo gratuitamente ma hai bisogno di un account di fatturazione ed è 28 00:02:02,970 --> 00:02:04,740 quello che mi viene chiesto qui. 29 00:02:04,770 --> 00:02:06,080 Naturalmente hai bisogno di 30 00:02:06,150 --> 00:02:09,930 un account Google e su questo account Google, devi avere una carta di 31 00:02:09,930 --> 00:02:13,570 credito per usarlo, altrimenti non puoi purtroppo usarlo, è quello che è. 32 00:02:13,590 --> 00:02:15,180 Quindi hai bisogno di una carta 33 00:02:15,180 --> 00:02:19,590 di credito, devi avere un account di fatturazione impostato nel tuo account Google e quindi puoi utilizzare questo 34 00:02:19,590 --> 00:02:26,100 account Google registrato per questo progetto, che è quello che sto facendo qui. Con quello abilitato, sarai ancora in grado di utilizzarlo 35 00:02:26,160 --> 00:02:28,550 gratuitamente, hai un livello gratuito 36 00:02:28,550 --> 00:02:33,570 molto generoso e in allegato trovi un link ai prezzi della piattaforma di Google 37 00:02:33,810 --> 00:02:39,540 Maps e solo se infrangi determinati limiti che non violeremo il poco utilizzo che abbiamo qui 38 00:02:39,540 --> 00:02:43,200 in questi video, solo se tu violassi questi limiti pagheresti. 39 00:02:43,200 --> 00:02:47,520 Ora sappi ancora che può esserci un punto in cui devi pagare 40 00:02:47,520 --> 00:02:52,340 e che dipende da quanto usi l'API e quindi dai un'occhiata ai documenti sui prezzi. 41 00:02:52,380 --> 00:02:57,190 Ora qui, ho ottenuto tutto abilitato ora e sto solo finendo questo 42 00:02:57,300 --> 00:03:03,160 e alla fine, dovresti essere presentato con una chiave API che ovviamente invaliderò dopo queste registrazioni. 43 00:03:03,180 --> 00:03:06,440 Quindi non puoi usare il mio ma dovresti invece prendere 44 00:03:06,460 --> 00:03:11,610 il tuo e ora questa è la chiave API che devi inserire qui in questo URL. 45 00:03:11,670 --> 00:03:18,150 Quindi ora copierò l'intero URL qui e lo sposterò nel nostro codice e lì, ora voglio 46 00:03:18,210 --> 00:03:23,790 produrre un'immagine qui che punta a quell'URL perché, come ho già detto, ecco 47 00:03:23,790 --> 00:03:27,900 come puoi ottenere questa immagine, questo URL restituisce un'immagine. 48 00:03:27,900 --> 00:03:33,390 Ora quello che farò quindi creerò qui un nuovo componente che chiamerò MapPreview. js perché lo userò anche in 49 00:03:33,390 --> 00:03:39,090 un altro posto dell'app in seguito in cui importerò React da React e 50 00:03:39,180 --> 00:03:44,890 dove quindi importerò immagine e foglio di stile da React Native, in questo modo. 51 00:03:47,620 --> 00:03:55,180 Quindi qui, creerò il mio componente di anteprima della mappa che riceve ovviamente oggetti di scena, che deve restituire qualche jsx 52 00:03:55,180 --> 00:04:02,310 in seguito e impostare alcuni stili qui con Stylesheet. creare e, naturalmente, 53 00:04:04,970 --> 00:04:11,600 esportare anche questo componente di anteprima della mappa. 54 00:04:12,050 --> 00:04:16,430 Ora qui, voglio generare questo URL di cui ho appena parlato, quindi qui 55 00:04:17,660 --> 00:04:26,870 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 56 00:04:26,900 --> 00:04:32,540 testo e quindi copiarlo in quell'URL che hai appena copiato dalla documentazione qui, assicurati che sia tutto 57 00:04:32,540 --> 00:04:34,110 in una riga 58 00:04:34,190 --> 00:04:37,790 perché per impostazione predefinita non lo è, quindi assicurati che sia 59 00:04:37,790 --> 00:04:40,360 tutto in una riga altrimenti non funzionerà e 60 00:04:40,370 --> 00:04:42,460 ora ovviamente ci sono un paio 61 00:04:42,460 --> 00:04:44,590 di segmenti che devi sostituire, ad 62 00:04:44,600 --> 00:04:50,210 esempio qui, il centro è uguale a parte. Per impostazione predefinita, questo indica il Ponte di Brooklyn 63 00:04:50,270 --> 00:04:55,100 e puoi inserire gli indirizzi qui, ma puoi anche inserire coppie di latitudine e longitudine qui. 64 00:04:55,100 --> 00:05:01,820 Quindi quello che farò qui è aggiungere dinamicamente due informazioni qui separate da una virgola e la prima cosa 65 00:05:01,820 --> 00:05:04,090 è la latitudine. Qui mi aspetto 66 00:05:04,100 --> 00:05:06,680 di ottenere questo sui miei oggetti di scena, 67 00:05:06,680 --> 00:05:12,100 mi aspetto di ottenere un oggetto di posizione e ovviamente questo può essere qualsiasi nome di prop 68 00:05:12,110 --> 00:05:20,600 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 69 00:05:20,660 --> 00:05:21,610 latitudine e 70 00:05:21,620 --> 00:05:27,130 la longitudine della posizione che voglio visualizzare in anteprima. Ora il fattore di zoom, lo imposterò 71 00:05:27,200 --> 00:05:33,110 su 14, puoi sperimentare diversi fattori, questo influenza fondamentalmente la distanza di ingrandimento o riduzione della mappa. 72 00:05:33,170 --> 00:05:36,350 Puoi anche giocare con le tue dimensioni qui. 73 00:05:36,360 --> 00:05:42,230 Ora, poiché avrò un contenitore di anteprima della mappa che in genere userò con 74 00:05:42,230 --> 00:05:48,520 un'altezza di 200, imposterò l'altezza su 200 qui e imposterò la larghezza quindi su 400 qui. 75 00:05:48,740 --> 00:05:55,640 Ovviamente, puoi usare una dimensione più grande di quella che utilizzerai per il contenitore per visualizzare l'immagine in un secondo 76 00:05:55,640 --> 00:06:01,610 momento, tieni presente che se stai recuperando un'immagine super grande qui, sarà ovviamente troppo grande, troppi dati 77 00:06:01,610 --> 00:06:06,290 per il download si caricherà più lentamente e potresti non averne bisogno. 78 00:06:06,350 --> 00:06:12,260 Quindi dovresti puntare a una dimensione dell'immagine della mappa qui che si adatta al contenitore in cui vuoi visualizzarla, 79 00:06:12,260 --> 00:06:18,740 non deve avere la stessa identica dimensione ma all'incirca. Ora il tipo di mappa è come dovrebbe essere visualizzata la mappa, 80 00:06:18,740 --> 00:06:23,990 puoi usare il satellite qui ma mi atterrò alla mappa stradale standard e ora puoi anche aggiungere marcatori a 81 00:06:23,990 --> 00:06:24,870 quella mappa. 82 00:06:24,950 --> 00:06:27,840 Ora ci sono un paio di marcatori impostati in 83 00:06:28,040 --> 00:06:34,700 questo frammento fittizio, mi sbarazzerò di tutti loro, ma uno in modo da avere solo marcatori qui, colore rosso, un'etichetta di un, 84 00:06:34,700 --> 00:06:35,600 questo può 85 00:06:35,630 --> 00:06:37,220 essere un singolo personaggio qui 86 00:06:37,220 --> 00:06:42,890 come ABC e poi la latitudine e la longitudine in cui dovrebbe essere posizionato questo marker e, naturalmente, questo 87 00:06:42,890 --> 00:06:46,440 è di nuovo puntelli. Posizione. lat e poi qui 88 00:06:46,490 --> 00:06:53,960 una virgola e, successivamente, sostituisci questo numero con oggetti di scena. Posizione. lng. 89 00:06:54,470 --> 00:07:01,500 Posizionare un marcatore di questo tipo è facoltativo, ma ovviamente voglio mostrare all'utente dove si trova. 90 00:07:01,740 --> 00:07:09,360 Ora ho bisogno della chiave API, quindi copierò questa chiave che è stata generata qui e la sostituirò qui. 91 00:07:09,480 --> 00:07:14,610 Ora non posso incollarlo in questo modo ma in realtà, voglio gestirlo in un file 92 00:07:14,610 --> 00:07:18,490 separato perché userò quella chiave API anche in altri punti dell'app. 93 00:07:18,570 --> 00:07:24,180 Quindi qui, creerò un nuovo file che chiamerò env. js for environment per impostare 94 00:07:24,870 --> 00:07:34,970 alcune variabili di ambiente e lì imposterò un oggetto con la mia chiave API di Google e questo dovrebbe essere 95 00:07:34,970 --> 00:07:44,820 questo valore qui e quindi posso esportare questo e, quindi, che dovrebbe avere un nome, molto diverso e quindi esporto 96 00:07:44,820 --> 00:07:45,980 qui vari. 97 00:07:46,050 --> 00:07:51,000 Quindi, con ciò, posso semplicemente importare da quel file env ed 98 00:07:51,000 --> 00:08:02,300 è 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 99 00:08:02,300 --> 00:08:03,110 qui. 100 00:08:03,110 --> 00:08:07,670 Quindi ora abbiamo un posto dove possiamo cambiare quella chiave e dove possiamo anche importarla da tutti 101 00:08:07,670 --> 00:08:09,550 i diversi luoghi della nostra app. 102 00:08:09,590 --> 00:08:14,900 Quindi qui inietterò dinamicamente env. googleapikey. 103 00:08:15,010 --> 00:08:17,900 Quindi, con quello, ho impostato l'URL di 104 00:08:18,100 --> 00:08:23,550 anteprima dell'immagine, ora in questo componente, ovviamente dobbiamo restituire l'anteprima dell'immagine e questa è generalmente 105 00:08:23,560 --> 00:08:30,250 quella vista che ho qui nel selettore della posizione. Quindi lo prenderò da lì e lo aggiungerò nell'anteprima 106 00:08:31,500 --> 00:08:35,130 della mappa, in questo modo, anche se il contenuto di fallback 107 00:08:35,130 --> 00:08:41,790 è lì, in realtà voglio passarlo dall'esterno, quindi lo taglierò di nuovo e lo sposterò di nuovo nel selettore di 108 00:08:41,790 --> 00:08:42,420 posizione. 109 00:08:42,420 --> 00:08:44,370 Tuttavia, non in questo modo, ma 110 00:08:45,180 --> 00:08:53,440 qui, importa questo componente di anteprima della mappa appena aggiunto, quindi importalo da. / MapPreview, quindi su questo nuovo componente su cui 111 00:08:53,480 --> 00:08:55,910 stiamo attualmente lavorando, aggiungilo qui, visualizza 112 00:08:56,030 --> 00:08:57,960 l'anteprima della mappa 113 00:08:58,220 --> 00:09:05,240 e quindi fai questo controllo per questo recupero e l'indicatore e il testo di fallback qui. 114 00:09:05,270 --> 00:09:12,250 Quindi, nell'anteprima della mappa, avrò quindi solo oggetti secondari qui per produrre ciò che viene aggiunto tra il tag di 115 00:09:12,250 --> 00:09:15,480 apertura e chiusura, ma questo è solo contenuto di 116 00:09:15,480 --> 00:09:21,760 fallback, ovviamente mi interessa produrre l'anteprima reale qui. Ora per questo dobbiamo assicurarci che anche l'URL di anteprima 117 00:09:21,820 --> 00:09:28,190 dell'immagine possa essere vuoto nel caso in cui non sia stato ancora scelto un posto, quindi creerò un URL di 118 00:09:28,220 --> 00:09:30,610 anteprima dell'immagine variabile e assegnerò solo 119 00:09:30,610 --> 00:09:37,990 un valore qui e voglio assegnare un valore se oggetti di scena. la posizione è impostata perché anche questa non può essere impostata 120 00:09:37,990 --> 00:09:44,980 nel caso in cui non abbiamo ancora scelto una posizione e ora l'URL di anteprima dell'immagine è vuoto o è questo 121 00:09:44,980 --> 00:09:51,400 URL a seconda se abbiamo una posizione passata sul puntello di posizione e ora possiamo usare questa laggiù per 122 00:09:51,400 --> 00:09:52,220 produrre qualcosa 123 00:09:52,220 --> 00:09:56,020 e, dal momento che sto usando view qui, ovviamente dovremmo anche 124 00:09:56,020 --> 00:09:57,640 assicurarci di importare view. 125 00:09:57,870 --> 00:09:59,290 Ora come posso usare questo URL? 126 00:09:59,310 --> 00:10:02,160 Bene, se ce l'abbiamo, voglio usarlo per 127 00:10:02,160 --> 00:10:06,170 produrre un'immagine, altrimenti mostrerò questo contenuto di fallback per bambini. 128 00:10:06,240 --> 00:10:08,580 Quindi qui possiamo verificare la presenza di oggetti 129 00:10:08,580 --> 00:10:10,140 di scena. posizione, se 130 00:10:10,140 --> 00:10:12,230 è impostato, so che avrò anche 131 00:10:12,240 --> 00:10:18,600 un URL di immagine, ovviamente potremmo anche controllare l'esistenza dell'URL dell'immagine e, se impostato, visualizzerò un'immagine qui, se 132 00:10:18,600 --> 00:10:19,260 non 133 00:10:19,260 --> 00:10:25,200 è impostata, l'output sostiene i bambini in questo modo, quindi fornirò il mio contenuto di fallback. 134 00:10:26,110 --> 00:10:29,960 Ora l'immagine qui riceverà uno stile, un'immagine della mappa 135 00:10:30,040 --> 00:10:39,650 e una fonte e la fonte qui prende un URI che punta all'URL di anteprima dell'immagine perché sarà un URL di rete, 136 00:10:39,650 --> 00:10:42,010 un'immagine di rete, giusto? 137 00:10:43,000 --> 00:10:46,330 Quindi ora portiamo semplicemente gli stili dal selettore 138 00:10:46,390 --> 00:10:54,520 della posizione, posso prendere un'anteprima della mappa, ma voglio solo riportare la parte del contenuto giustificata e effettivamente passare qui il resto 139 00:10:54,520 --> 00:11:01,390 manualmente e unirli, quindi passerò comunque agli stili . MapPreview dal selettore della mia posizione e nell'anteprima della mappa, ora voglio 140 00:11:01,390 --> 00:11:07,300 unire questo con i miei stili che sto impostando qui. Quindi qui lo avvolgerò in un oggetto in cui 141 00:11:07,300 --> 00:11:13,270 estrarrò tutti gli stili impostati nell'anteprima della mappa qui e unirò in tutti gli stili impostati su 142 00:11:13,270 --> 00:11:19,240 questo oggetto di stile in modo che possiamo impostare anche gli stili dall'esterno e unirli con i 143 00:11:19,240 --> 00:11:26,980 nostri stili interni e ora per gli stili interni nell'anteprima della mappa, come ho appena detto, avrò giustificato il contenuto e allineato gli 144 00:11:26,980 --> 00:11:29,050 elementi qui e per l'immagine stessa, 145 00:11:29,200 --> 00:11:30,850 quindi per l'immagine della 146 00:11:30,910 --> 00:11:37,020 mappa, lì voglio impostare questo per prendere tutta la larghezza e l'altezza disponibili che può ottenere e dobbiamo 147 00:11:37,040 --> 00:11:41,410 impostarla perché è un'immagine di rete. Come hai appreso, per quelli è necessario impostare la 148 00:11:41,410 --> 00:11:43,040 larghezza e l'altezza del componente dell'immagine. 149 00:11:44,710 --> 00:11:51,040 Ora con ciò, abbiamo il componente di anteprima della mappa che visualizza questa immagine della mappa 150 00:11:51,040 --> 00:11:53,690 o il nostro contenuto di fallback 151 00:11:53,920 --> 00:11:57,640 che viene passato dall'esterno e lo fa controllando la posizione. 152 00:11:57,640 --> 00:12:02,950 Quindi nel luogo in cui utilizziamo il componente di anteprima della mappa che ovviamente 153 00:12:02,950 --> 00:12:07,330 è il selettore della posizione, dobbiamo passare questo prop di posizione e 154 00:12:07,330 --> 00:12:15,190 il prop di posizione, se controlliamo l'anteprima della mappa, alla fine deve essere un oggetto con una latitudine e longitudine o 155 00:12:15,190 --> 00:12:19,840 un tasto lat e lng. Quindi, quindi, nel selettore della posizione, 156 00:12:19,910 --> 00:12:25,610 voglio passare un simile oggetto qui e in effetti, questo è esattamente ciò che gestiamo qui con 157 00:12:25,610 --> 00:12:32,870 il punto di prelievo che ovviamente non è una coincidenza. Questo è un oggetto con latitudine e longitudine o inizialmente non definito 158 00:12:33,050 --> 00:12:36,300 e gestiamo questo caso anche nel componente di anteprima della 159 00:12:36,410 --> 00:12:41,060 mappa, se non è definito, mostriamo semplicemente il contenuto di fallback che viene passato dall'esterno. 160 00:12:41,060 --> 00:12:46,880 Quindi per la posizione, possiamo semplicemente passare nella posizione selezionata e con ciò, ora dovremmo avere una configurazione in 161 00:12:46,880 --> 00:12:50,150 cui siamo effettivamente in grado di vedere un'anteprima del luogo. 162 00:12:50,630 --> 00:12:52,490 Quindi ora qui, vediamo il contenuto 163 00:12:52,520 --> 00:12:59,120 di fallback ma se ora faccio clic su Ottieni posizione utente, vediamo lo spinner e quindi vediamo un'istantanea reale del luogo che 164 00:12:59,150 --> 00:13:00,010 abbiamo scelto. 165 00:13:00,080 --> 00:13:02,180 Come ho già detto, questo non è dove sono seduto in questo momento, 166 00:13:02,180 --> 00:13:05,930 questo è solo un posto fittizio che l'emulatore ci dà. Lo stesso su Android, se 167 00:13:05,930 --> 00:13:08,370 prendo una posizione qui, ora questa è 168 00:13:08,370 --> 00:13:12,140 in realtà la sede di Google che ho selezionato di default lì. 169 00:13:12,880 --> 00:13:17,370 Quindi funziona, ora come passaggio successivo, voglio assicurarmi che 170 00:13:17,410 --> 00:13:22,570 possiamo anche scegliere questo posto su una mappa invece di localizzarci.