Come possiamo assicurarci di poter scegliere un posto?
Bene sulla visualizzazione della mappa, nella schermata della mappa, puoi aggiungere un gestore onPress e questo si attiva ogni
volta che
tocchi un punto della mappa e con ciò non intendo i tocchi quando scorri ma quando
tocchi lì senza scorrere, quindi se davvero vuoi selezionare qualcosa. In questo modo verrà attivato e quindi può essere associato a
una funzione che definisco qui che dovrebbe in qualche modo memorizzare il luogo selezionato.
Quindi qui avrò la mia funzione di gestione della posizione selezionata che ottiene un oggetto evento ed è
quello a cui mi associo aPress.
Ora possiamo esaminare questo evento per avere un'idea di cosa c'è dentro, che tipo di dati otteniamo.
Quindi lasciami salvare questo
e proviamolo, andiamo sulla mappa e poi, una volta caricato, tocca semplicemente un punto della mappa, come qui.
Se ora torniamo indietro, questo è l'output che ottengo e lì dentro vedi che è un oggetto abbastanza grande, alla
fine abbiamo un mucchio di dati lì dentro di cui non abbiamo
davvero bisogno, è questo evento sintetico qui.
Ciò che abbiamo, ciò che è interessante è questa proprietà dell'evento nativo che è ancora un altro oggetto, che ha una proprietà
coordinata che è ancora un altro oggetto, che ha una latitudine e una longitudine.
Questo è ciò che ci interessa alla fine,
giusto, è quello che vogliamo scoprire,
questa è la coppia
di coordinate che vogliamo ottenere.
Quindi questo è il posto, le coordinate su cui l'utente ha toccato,
questo è ciò che voglio archiviare qui e sarebbe bello per iniziare aggiungere un marcatore in quel luogo in modo che
segniamo quel luogo sulla mappa. Per quello,
ovviamente, possiamo usare lo stato per salvare il luogo selezionato e nel componente, quindi inizializzarlo
qui e avere la nostra posizione selezionata e impostare
la posizione selezionata con l'aiuto dello stato d'uso. Inizialmente è vuoto, inizialmente non abbiamo una posizione selezionata
e quindi possiamo creare
un indicatore qui se ne abbiamo uno. Per questo, possiamo importare il componente marker dalle mappe native aggiungendo
qui alcune importazioni denominate oltre a questa importazione predefinita che abbiamo e possiamo importare marker dalle mappe native di React,
è semplice e possiamo renderlo aggiungendolo tra aprendo e chiudendo i tag della vista della mappa di cui ora
abbiamo bisogno,
così possiamo aggiungere un marcatore qui.
Ora questo marker ha bisogno di una configurazione, altrimenti le
mappe native di React non sanno dove mostrarlo. Possiamo aggiungere un titolo, ad
esempio, la posizione scelta, ma, soprattutto, puoi aggiungere un oggetto di coordinate qui e che
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
e questo è lo stato che sto gestendo su di essa se ce l'ho, allora voglio impostare coordinate
del marker uguali a un oggetto in cui devi avere una latitudine denominata
latitudine, quindi
non è lat, deve essere latitudine perché il componente marcatore cercherà una
proprietà denominata latitudine e che può essere la posizione
selezionata. diciamo
lat, dipende da noi come poi salviamo questo, non lo stiamo facendo ora ma più tardi lo salverò in
modo tale che ci sia un lat prop lì e una longitudine che deve essere chiamata così che può
contenere il valore memorizzato in selectedLocation. lng.
Ora le coordinate del marker sono impostate in modo condizionale e qui ora possiamo controllare se esistono condizioni del marker
e, in caso affermativo, utilizziamo questa scorciatoia per produrre anche un marker qui. Ora le coordinate dei marker sono anche ciò che possiamo
inserire qui e tieni
presente che si tratta di coordinate, non coordinate, sono solo coordinate.
A questo punto sono le coordinate dei nostri marker e ora dobbiamo solo assicurarci di impostare la posizione selezionata e,
naturalmente, voglio farlo
qui nel mio gestore di posizione selezionato. Lì voglio chiamare set location
selezionata per impostare il mio stato, passare un oggetto lì e impostare il mio stato su un oggetto con
un tasto lat perché sto cercando di estrarre lat laggiù dell'evento. nativeEvent come hai visto e lì dentro, c'era questa proprietà
coordinata che ha una proprietà latitude e quindi lng che sto estraendo laggiù dovrebbe essere
impostato su event. nativeEvent. coordinate. longitudine. E con questo codice, dovremmo essere
in grado di visualizzare un indicatore sulla mappa. Quindi proviamo, andiamo su iOS, cariciamo
la mappa lì e
selezioniamo un posto
e vediamo un marcatore nel punto in cui faccio clic. Lo stesso su Android si spera, proviamo
lì, apro la mappa e in effetti lì se tocco da qualche
parte, posiziono
anche il mio marker lì.
Quindi è così che possiamo lavorare con i marcatori e come possiamo selezionare i
luoghi, è tutto bello.
Ora alla fine voglio essere in grado di fare clic su un pulsante di salvataggio
lassù che non esiste ancora, che quindi chiude questa mappa e passa la posizione selezionata alla schermata del mio nuovo posto alla
fine, a destra, che ho qui anche. Voglio tornare a quella schermata e ovviamente in qualche modo salvare la mia
posizione selezionata.