Comment pouvons-nous nous assurer que nous pouvons choisir un endroit?
Eh bien sur la vue de la carte, dans votre écran de carte, vous pouvez ajouter un gestionnaire onPress et cela se déclenche chaque fois que
vous appuyez
quelque part sur la carte et avec cela je ne parle pas de tapotements lorsque vous faites défiler mais lorsque vous
tapez là sans défiler, donc si vous avez vraiment voulez sélectionner quelque chose. Cela se déclenchera alors et cela peut donc être lié à
une fonction que je définis ici qui devrait en quelque sorte stocker l'endroit sélectionné.
Donc, ici, je vais avoir ma fonction de sélection d'emplacement qui obtient un objet événement et c'est ce à quoi
je me lie sur onPress ici.
Maintenant, nous pouvons examiner cet événement pour avoir une idée de ce qu'il y a à l'intérieur, du type de données que nous obtenons.
Alors laissez-moi enregistrer cela
et testons-le, allons sur la carte, puis une fois celui-ci chargé, appuyez simplement quelque part sur la carte, comme ici.
Si nous revenons maintenant en arrière, c'est la sortie que j'obtiens et là vous voyez que c'est un assez gros objet, à
la fin nous y avons un tas de données dont nous n'avons pas
vraiment besoin, c'est cet événement synthétique ici.
Ce que nous avons, ce qui est intéressant, c'est cette propriété d'événement natif qui est encore un autre objet, qui a une propriété
de coordonnées qui est encore un autre objet, qui a une latitude et une longitude.
C'est ce qui nous intéresse à la fin, à
droite, c'est ce que nous voulons
savoir, c'est la paire
de coordonnées que nous voulons obtenir.
C'est donc l'endroit, les coordonnées sur lesquelles l'utilisateur a tapé, c'est ce que
je veux stocker ici et ce serait bien de commencer à ajouter un marqueur à cet endroit afin que nous marquions
cet endroit sur la carte. Pour cela,
bien sûr, nous pouvons utiliser l'état pour enregistrer cet emplacement sélectionné et dans le composant,
puis l'initialiser ici et avoir notre emplacement sélectionné et
définir l'emplacement sélectionné à l'aide de l'état d'utilisation. Au départ, il est vide, nous n'avons pas d'emplacement sélectionné au
départ, puis nous pouvons créer
un marqueur ici si nous en avons un. Pour cela, nous pouvons importer le composant marqueur à partir de cartes natives en ajoutant
ici des importations nommées en plus de cette importation par défaut que nous avons et nous pouvons importer un marqueur à partir de cartes React Native, c'est
aussi simple que cela et nous pouvons rendre ce marqueur en l'ajoutant entre le les balises d'ouverture et de fermeture de la vue cartographique dont
nous avons maintenant
besoin, afin que nous puissions ajouter un marqueur ici.
Maintenant, ce marqueur a besoin d'une configuration, sinon les cartes
React Native ne savent pas où le montrer. Nous pouvons ajouter un titre
par exemple, l'emplacement choisi, mais plus important encore, vous pouvez ajouter un accessoire de coordonnées ici
et qui s'attend à obtenir un objet avec une latitude et une longitude là-dedans. Donc ici, je vais ajouter une nouvelle variable, les coordonnées des marqueurs disons et si j'ai un
emplacement sélectionné et que c'est l'état que je gère là-haut si j'ai cela, alors je veux définir des coordonnées
de marqueurs égales à un objet où vous devez avoir une latitude nommée latitude,
donc ce
n'est pas lat, ce doit être latitude parce que le composant marqueur recherchera
une propriété nommée latitude et qui peut être le
selectedLocation. lat disons,
c'est à nous de savoir comment nous enregistrons ensuite cela, nous ne le faisons pas pour le moment mais plus tard je
l'enregistrerai de telle sorte que nous ayons un accessoire lat là-bas et une longitude qui doit être nommée comme ceci qui peut
contenir la valeur stocké dans selectedLocation. lng.
Maintenant, les coordonnées du marqueur sont définies de manière conditionnelle et ici, nous pouvons maintenant vérifier si les conditions du marqueur existent
et si c'est le cas, nous utilisons ce raccourci pour afficher également un marqueur ici. Maintenant, les coordonnées des marqueurs sont également ce que nous pouvons
alimenter ici et veuillez
noter qu'il s'agit de coordonnées, pas de coordonnées, c'est juste des coordonnées.
À ce stade, ce sont nos coordonnées de marqueur et maintenant nous devons simplement nous assurer que nous définissons finalement l'emplacement sélectionné et bien
sûr, je veux
le faire ici dans mon gestionnaire d'emplacement sélectionné. Là, je veux appeler définir
l'emplacement sélectionné pour définir mon état, y passer un objet et définir mon état sur un objet avec une
clé lat parce que j'essaie d'extraire le lat là-bas de l'événement. nativeEvent comme vous l'avez vu et là-dedans, il y avait cette
propriété de coordonnées qui a une propriété de latitude et puis lng que j'extrais également là-bas devrait
être défini sur event. nativeEvent. coordonnées. longitude. Et avec ce code, nous devrions
pouvoir voir un marqueur sur la carte. Alors essayons, allons sur iOS, chargez
la carte et choisissez
un endroit et
nous voyons un marqueur à l'endroit où je clique. J'espère que c'est la même chose sur
Android, essayons là, ouvrons la carte et en effet là si je
tape quelque
part, j'y place aussi mon marqueur.
Voilà comment nous pouvons travailler avec des marqueurs et comment nous pouvons sélectionner des
endroits, c'est très bien.
Maintenant, en fin de compte, je veux pouvoir cliquer sur un bouton d'enregistrement là-haut qui
n'existe pas encore, qui ferme ensuite cette carte et renvoie l'emplacement sélectionné à mon nouvel écran de lieu à la fin, à
droite, que j'ai ici ainsi que. Je veux revenir à cet écran et bien sûr, enregistrer ma
position sélectionnée.