1 00:00:02,110 --> 00:00:04,450 Come possiamo assicurarci di poter scegliere un posto? 2 00:00:04,870 --> 00:00:10,900 Bene sulla visualizzazione della mappa, nella schermata della mappa, puoi aggiungere un gestore onPress e questo si attiva ogni 3 00:00:10,900 --> 00:00:11,580 volta che 4 00:00:11,680 --> 00:00:16,690 tocchi un punto della mappa e con ciò non intendo i tocchi quando scorri ma quando 5 00:00:16,690 --> 00:00:23,130 tocchi lì senza scorrere, quindi se davvero vuoi selezionare qualcosa. In questo modo verrà attivato e quindi può essere associato a 6 00:00:23,170 --> 00:00:27,010 una funzione che definisco qui che dovrebbe in qualche modo memorizzare il luogo selezionato. 7 00:00:27,010 --> 00:00:33,940 Quindi qui avrò la mia funzione di gestione della posizione selezionata che ottiene un oggetto evento ed è 8 00:00:33,940 --> 00:00:36,260 quello a cui mi associo aPress. 9 00:00:36,260 --> 00:00:42,440 Ora possiamo esaminare questo evento per avere un'idea di cosa c'è dentro, che tipo di dati otteniamo. 10 00:00:42,440 --> 00:00:44,300 Quindi lasciami salvare questo 11 00:00:44,330 --> 00:00:52,550 e proviamolo, andiamo sulla mappa e poi, una volta caricato, tocca semplicemente un punto della mappa, come qui. 12 00:00:52,550 --> 00:00:58,450 Se ora torniamo indietro, questo è l'output che ottengo e lì dentro vedi che è un oggetto abbastanza grande, alla 13 00:00:58,700 --> 00:01:02,280 fine abbiamo un mucchio di dati lì dentro di cui non abbiamo 14 00:01:02,510 --> 00:01:04,700 davvero bisogno, è questo evento sintetico qui. 15 00:01:04,850 --> 00:01:10,880 Ciò che abbiamo, ciò che è interessante è questa proprietà dell'evento nativo che è ancora un altro oggetto, che ha una proprietà 16 00:01:10,880 --> 00:01:15,170 coordinata che è ancora un altro oggetto, che ha una latitudine e una longitudine. 17 00:01:15,170 --> 00:01:17,090 Questo è ciò che ci interessa alla fine, 18 00:01:17,090 --> 00:01:18,520 giusto, è quello che vogliamo scoprire, 19 00:01:18,530 --> 00:01:19,700 questa è la coppia 20 00:01:19,700 --> 00:01:21,000 di coordinate che vogliamo ottenere. 21 00:01:21,020 --> 00:01:24,640 Quindi questo è il posto, le coordinate su cui l'utente ha toccato, 22 00:01:24,650 --> 00:01:30,850 questo è ciò che voglio archiviare qui e sarebbe bello per iniziare aggiungere un marcatore in quel luogo in modo che 23 00:01:30,860 --> 00:01:34,430 segniamo quel luogo sulla mappa. Per quello, 24 00:01:34,420 --> 00:01:42,260 ovviamente, possiamo usare lo stato per salvare il luogo selezionato e nel componente, quindi inizializzarlo 25 00:01:43,100 --> 00:01:48,170 qui e avere la nostra posizione selezionata e impostare 26 00:01:50,500 --> 00:01:58,870 la posizione selezionata con l'aiuto dello stato d'uso. Inizialmente è vuoto, inizialmente non abbiamo una posizione selezionata 27 00:01:58,870 --> 00:02:01,200 e quindi possiamo creare 28 00:02:01,270 --> 00:02:08,170 un indicatore qui se ne abbiamo uno. Per questo, possiamo importare il componente marker dalle mappe native aggiungendo 29 00:02:08,170 --> 00:02:14,590 qui alcune importazioni denominate oltre a questa importazione predefinita che abbiamo e possiamo importare marker dalle mappe native di React, 30 00:02:14,590 --> 00:02:20,530 è semplice e possiamo renderlo aggiungendolo tra aprendo e chiudendo i tag della vista della mappa di cui ora 31 00:02:20,530 --> 00:02:21,470 abbiamo bisogno, 32 00:02:21,640 --> 00:02:23,780 così possiamo aggiungere un marcatore qui. 33 00:02:23,870 --> 00:02:27,090 Ora questo marker ha bisogno di una configurazione, altrimenti le 34 00:02:27,170 --> 00:02:32,840 mappe native di React non sanno dove mostrarlo. Possiamo aggiungere un titolo, ad 35 00:02:33,230 --> 00:02:40,560 esempio, la posizione scelta, ma, soprattutto, puoi aggiungere un oggetto di coordinate qui e che 36 00:02:40,590 --> 00:02:53,260 si aspetta di ottenere un oggetto con una latitudine e una longitudine. Quindi qui, aggiungerò una nuova variabile, diciamo le coordinate del marker e se ho una posizione selezionata 37 00:02:53,320 --> 00:03:00,190 e questo è lo stato che sto gestendo su di essa se ce l'ho, allora voglio impostare coordinate 38 00:03:00,190 --> 00:03:05,050 del marker uguali a un oggetto in cui devi avere una latitudine denominata 39 00:03:05,080 --> 00:03:06,070 latitudine, quindi 40 00:03:06,070 --> 00:03:10,890 non è lat, deve essere latitudine perché il componente marcatore cercherà una 41 00:03:12,100 --> 00:03:15,390 proprietà denominata latitudine e che può essere la posizione 42 00:03:16,710 --> 00:03:17,860 selezionata. diciamo 43 00:03:17,970 --> 00:03:22,970 lat, dipende da noi come poi salviamo questo, non lo stiamo facendo ora ma più tardi lo salverò in 44 00:03:22,970 --> 00:03:28,100 modo tale che ci sia un lat prop lì e una longitudine che deve essere chiamata così che può 45 00:03:28,100 --> 00:03:31,150 contenere il valore memorizzato in selectedLocation. lng. 46 00:03:31,370 --> 00:03:36,560 Ora le coordinate del marker sono impostate in modo condizionale e qui ora possiamo controllare se esistono condizioni del marker 47 00:03:36,890 --> 00:03:44,100 e, in caso affermativo, utilizziamo questa scorciatoia per produrre anche un marker qui. Ora le coordinate dei marker sono anche ciò che possiamo 48 00:03:44,100 --> 00:03:45,900 inserire qui e tieni 49 00:03:45,900 --> 00:03:49,890 presente che si tratta di coordinate, non coordinate, sono solo coordinate. 50 00:03:49,890 --> 00:03:56,260 A questo punto sono le coordinate dei nostri marker e ora dobbiamo solo assicurarci di impostare la posizione selezionata e, 51 00:03:56,250 --> 00:03:57,420 naturalmente, voglio farlo 52 00:03:57,620 --> 00:04:01,740 qui nel mio gestore di posizione selezionato. Lì voglio chiamare set location 53 00:04:01,820 --> 00:04:08,330 selezionata per impostare il mio stato, passare un oggetto lì e impostare il mio stato su un oggetto con 54 00:04:08,330 --> 00:04:16,450 un tasto lat perché sto cercando di estrarre lat laggiù dell'evento. nativeEvent come hai visto e lì dentro, c'era questa proprietà 55 00:04:16,490 --> 00:04:22,580 coordinata che ha una proprietà latitude e quindi lng che sto estraendo laggiù dovrebbe essere 56 00:04:22,580 --> 00:04:31,520 impostato su event. nativeEvent. coordinate. longitudine. E con questo codice, dovremmo essere 57 00:04:31,520 --> 00:04:35,480 in grado di visualizzare un indicatore sulla mappa. Quindi proviamo, andiamo su iOS, cariciamo 58 00:04:35,480 --> 00:04:36,900 la mappa lì e 59 00:04:36,950 --> 00:04:38,240 selezioniamo un posto 60 00:04:41,190 --> 00:04:47,640 e vediamo un marcatore nel punto in cui faccio clic. Lo stesso su Android si spera, proviamo 61 00:04:47,640 --> 00:04:53,480 lì, apro la mappa e in effetti lì se tocco da qualche 62 00:04:53,520 --> 00:04:54,720 parte, posiziono 63 00:04:58,440 --> 00:05:01,380 anche il mio marker lì. 64 00:05:01,410 --> 00:05:05,290 Quindi è così che possiamo lavorare con i marcatori e come possiamo selezionare i 65 00:05:05,340 --> 00:05:06,820 luoghi, è tutto bello. 66 00:05:06,810 --> 00:05:12,090 Ora alla fine voglio essere in grado di fare clic su un pulsante di salvataggio 67 00:05:12,090 --> 00:05:19,750 lassù che non esiste ancora, che quindi chiude questa mappa e passa la posizione selezionata alla schermata del mio nuovo posto alla 68 00:05:19,750 --> 00:05:24,940 fine, a destra, che ho qui anche. Voglio tornare a quella schermata e ovviamente in qualche modo salvare la mia 69 00:05:24,950 --> 00:05:25,500 posizione selezionata.