1
00:00:02,110 --> 00:00:04,450
Comment pouvons-nous nous assurer que nous pouvons choisir un endroit?

2
00:00:04,870 --> 00:00:10,900
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

3
00:00:10,900 --> 00:00:11,580
vous appuyez

4
00:00:11,680 --> 00:00:16,690
quelque part sur la carte et avec cela je ne parle pas de tapotements lorsque vous faites défiler mais lorsque vous

5
00:00:16,690 --> 00:00:23,130
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é à

6
00:00:23,170 --> 00:00:27,010
une fonction que je définis ici qui devrait en quelque sorte stocker l'endroit sélectionné.

7
00:00:27,010 --> 00:00:33,940
Donc, ici, je vais avoir ma fonction de sélection d'emplacement qui obtient un objet événement et c'est ce à quoi

8
00:00:33,940 --> 00:00:36,260
je me lie sur onPress ici.

9
00:00:36,260 --> 00:00:42,440
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.

10
00:00:42,440 --> 00:00:44,300
Alors laissez-moi enregistrer cela

11
00:00:44,330 --> 00:00:52,550
et testons-le, allons sur la carte, puis une fois celui-ci chargé, appuyez simplement quelque part sur la carte, comme ici.

12
00:00:52,550 --> 00:00:58,450
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, à

13
00:00:58,700 --> 00:01:02,280
la fin nous y avons un tas de données dont nous n'avons pas

14
00:01:02,510 --> 00:01:04,700
vraiment besoin, c'est cet événement synthétique ici.

15
00:01:04,850 --> 00:01:10,880
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é

16
00:01:10,880 --> 00:01:15,170
de coordonnées qui est encore un autre objet, qui a une latitude et une longitude.

17
00:01:15,170 --> 00:01:17,090
C'est ce qui nous intéresse à la fin, à

18
00:01:17,090 --> 00:01:18,520
droite, c'est ce que nous voulons

19
00:01:18,530 --> 00:01:19,700
savoir, c'est la paire

20
00:01:19,700 --> 00:01:21,000
de coordonnées que nous voulons obtenir.

21
00:01:21,020 --> 00:01:24,640
C'est donc l'endroit, les coordonnées sur lesquelles l'utilisateur a tapé, c'est ce que

22
00:01:24,650 --> 00:01:30,850
je veux stocker ici et ce serait bien de commencer à ajouter un marqueur à cet endroit afin que nous marquions

23
00:01:30,860 --> 00:01:34,430
cet endroit sur la carte. Pour cela,

24
00:01:34,420 --> 00:01:42,260
bien sûr, nous pouvons utiliser l'état pour enregistrer cet emplacement sélectionné et dans le composant,

25
00:01:43,100 --> 00:01:48,170
puis l'initialiser ici et avoir notre emplacement sélectionné et

26
00:01:50,500 --> 00:01:58,870
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

27
00:01:58,870 --> 00:02:01,200
départ, puis nous pouvons créer

28
00:02:01,270 --> 00:02:08,170
un marqueur ici si nous en avons un. Pour cela, nous pouvons importer le composant marqueur à partir de cartes natives en ajoutant

29
00:02:08,170 --> 00:02:14,590
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

30
00:02:14,590 --> 00:02:20,530
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

31
00:02:20,530 --> 00:02:21,470
nous avons maintenant

32
00:02:21,640 --> 00:02:23,780
besoin, afin que nous puissions ajouter un marqueur ici.

33
00:02:23,870 --> 00:02:27,090
Maintenant, ce marqueur a besoin d'une configuration, sinon les cartes

34
00:02:27,170 --> 00:02:32,840
React Native ne savent pas où le montrer. Nous pouvons ajouter un titre

35
00:02:33,230 --> 00:02:40,560
par exemple, l'emplacement choisi, mais plus important encore, vous pouvez ajouter un accessoire de coordonnées ici

36
00:02:40,590 --> 00:02:53,260
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

37
00:02:53,320 --> 00:03:00,190
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

38
00:03:00,190 --> 00:03:05,050
de marqueurs égales à un objet où vous devez avoir une latitude nommée latitude,

39
00:03:05,080 --> 00:03:06,070
donc ce

40
00:03:06,070 --> 00:03:10,890
n'est pas lat, ce doit être latitude parce que le composant marqueur recherchera

41
00:03:12,100 --> 00:03:15,390
une propriété nommée latitude et qui peut être le

42
00:03:16,710 --> 00:03:17,860
selectedLocation. lat disons,

43
00:03:17,970 --> 00:03:22,970
c'est à nous de savoir comment nous enregistrons ensuite cela, nous ne le faisons pas pour le moment mais plus tard je

44
00:03:22,970 --> 00:03:28,100
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

45
00:03:28,100 --> 00:03:31,150
contenir la valeur stocké dans selectedLocation. lng.

46
00:03:31,370 --> 00:03:36,560
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

47
00:03:36,890 --> 00:03:44,100
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

48
00:03:44,100 --> 00:03:45,900
alimenter ici et veuillez

49
00:03:45,900 --> 00:03:49,890
noter qu'il s'agit de coordonnées, pas de coordonnées, c'est juste des coordonnées.

50
00:03:49,890 --> 00:03:56,260
À 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

51
00:03:56,250 --> 00:03:57,420
sûr, je veux

52
00:03:57,620 --> 00:04:01,740
le faire ici dans mon gestionnaire d'emplacement sélectionné. Là, je veux appeler définir

53
00:04:01,820 --> 00:04:08,330
l'emplacement sélectionné pour définir mon état, y passer un objet et définir mon état sur un objet avec une

54
00:04:08,330 --> 00:04:16,450
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

55
00:04:16,490 --> 00:04:22,580
propriété de coordonnées qui a une propriété de latitude et puis lng que j'extrais également là-bas devrait

56
00:04:22,580 --> 00:04:31,520
être défini sur event. nativeEvent. coordonnées. longitude. Et avec ce code, nous devrions

57
00:04:31,520 --> 00:04:35,480
pouvoir voir un marqueur sur la carte. Alors essayons, allons sur iOS, chargez

58
00:04:35,480 --> 00:04:36,900
la carte et choisissez

59
00:04:36,950 --> 00:04:38,240
un endroit et

60
00:04:41,190 --> 00:04:47,640
nous voyons un marqueur à l'endroit où je clique. J'espère que c'est la même chose sur

61
00:04:47,640 --> 00:04:53,480
Android, essayons là, ouvrons la carte et en effet là si je

62
00:04:53,520 --> 00:04:54,720
tape quelque

63
00:04:58,440 --> 00:05:01,380
part, j'y place aussi mon marqueur.

64
00:05:01,410 --> 00:05:05,290
Voilà comment nous pouvons travailler avec des marqueurs et comment nous pouvons sélectionner des

65
00:05:05,340 --> 00:05:06,820
endroits, c'est très bien.

66
00:05:06,810 --> 00:05:12,090
Maintenant, en fin de compte, je veux pouvoir cliquer sur un bouton d'enregistrement là-haut qui

67
00:05:12,090 --> 00:05:19,750
n'existe pas encore, qui ferme ensuite cette carte et renvoie l'emplacement sélectionné à mon nouvel écran de lieu à la fin, à

68
00:05:19,750 --> 00:05:24,940
droite, que j'ai ici ainsi que. Je veux revenir à cet écran et bien sûr, enregistrer ma

69
00:05:24,950 --> 00:05:25,500
position sélectionnée.