1 00:00:02,340 --> 00:00:07,350 Alors maintenant, je veux également afficher un petit aperçu de la carte ici et il y a bien sûr différentes façons 2 00:00:07,350 --> 00:00:11,000 de le faire et plus tard, nous ajouterons également une carte interactive à cette application. 3 00:00:11,010 --> 00:00:12,970 Pour l'instant, je veux juste avoir une 4 00:00:12,960 --> 00:00:19,570 image statique, donc comme un instantané de carte et la chose intéressante est que Google a une API pour nous qui génère de tels instantanés. 5 00:00:19,620 --> 00:00:24,810 Vous pouvez google pour l'API statique de Google Maps pour trouver la documentation officielle où vous pouvez tout apprendre à 6 00:00:24,810 --> 00:00:26,010 ce sujet bien sûr 7 00:00:26,190 --> 00:00:29,340 et à la fin, l'utilisation de cette API est super simple. 8 00:00:29,400 --> 00:00:35,820 Vous avez juste besoin d'envoyer la demande à cette URL et cela vous donne déjà une image, vous pouvez 9 00:00:35,820 --> 00:00:40,650 donc simplement utiliser ce lien sur un composant d'image et vous êtes bon. 10 00:00:40,650 --> 00:00:46,740 La seule chose délicate ici est cette clé API, vous avez besoin de vos informations d'identification API et pour 11 00:00:46,740 --> 00:00:49,300 cela, vous avez besoin d'une clé API. 12 00:00:49,410 --> 00:00:55,590 Maintenant, pour cela, vous pouvez simplement cliquer sur votre clé API ici et en générer une et maintenant 13 00:00:55,590 --> 00:00:59,660 vous pouvez sélectionner un projet que vous avez déjà ou vous 14 00:00:59,670 --> 00:01:05,220 créez un nouveau projet et pour cela, vous devez annuler ici et faire défiler un peu 15 00:01:05,250 --> 00:01:10,110 plus loin Pour commencer, activez la partie API ici et cliquez sur Commencer ici. 16 00:01:10,110 --> 00:01:15,840 Maintenant, une fois que vous avez fait cela, vous êtes redirigé vers la console de la plate-forme 17 00:01:15,840 --> 00:01:21,930 Google Maps où vous pouvez maintenant activer les différentes fonctionnalités de Google Maps que vous souhaitez utiliser et ici, 18 00:01:21,930 --> 00:01:29,590 je suis intéressé par les cartes qui nous aideront plus tard à utiliser cette application dynamique interactive sur Android et je m'intéresse aux lieux. 19 00:01:29,670 --> 00:01:31,420 Donc, ces deux choses doivent être vérifiées, 20 00:01:31,470 --> 00:01:36,430 nous n'avons pas besoin des itinéraires parce que nous ne construisons aucune fonctionnalité de navigation ici et avec cela, 21 00:01:36,430 --> 00:01:40,600 nous pouvons cliquer sur continuer, sélectionner un projet et maintenant sélectionner un projet existant ou 22 00:01:40,600 --> 00:01:45,820 simplement créer un nouveau un et je vais en créer un nouveau ici et le nommer React Complete Guide mais 23 00:01:45,820 --> 00:01:47,560 vous pouvez le nommer comme 24 00:01:50,460 --> 00:01:53,370 vous voulez, cliquez sur suivant ici et attendez qu'il soit généré. 25 00:01:53,370 --> 00:01:57,320 Cela devrait être relativement rapide et nous nous inquiétons maintenant des prix 26 00:01:57,360 --> 00:01:58,680 pendant le chargement. 27 00:01:58,770 --> 00:02:02,970 Vous pouvez généralement l'utiliser gratuitement, mais vous avez besoin d'un compte de facturation et c'est 28 00:02:02,970 --> 00:02:04,740 ce que l'on me demande ici. 29 00:02:04,770 --> 00:02:06,080 Vous avez besoin d'un 30 00:02:06,150 --> 00:02:09,930 compte Google bien sûr et sur ce compte Google, vous devez avoir une carte de 31 00:02:09,930 --> 00:02:13,570 crédit pour l'utiliser, sinon vous ne pouvez pas l'utiliser malheureusement, c'est ce que c'est. 32 00:02:13,590 --> 00:02:15,180 Vous avez donc besoin d'une carte 33 00:02:15,180 --> 00:02:19,590 de crédit, vous devez avoir un compte de facturation configuré dans votre compte Google et vous pouvez ensuite 34 00:02:19,590 --> 00:02:26,100 utiliser ce compte Google connecté pour ce projet, ce que je fais ici. Avec cela activé, vous pourrez toujours l'utiliser gratuitement, vous avez 35 00:02:26,160 --> 00:02:28,550 obtenu un niveau gratuit très généreux 36 00:02:28,550 --> 00:02:33,570 et vous trouverez ci-joint un lien vers les prix de la plate-forme Google Maps et 37 00:02:33,810 --> 00:02:39,540 uniquement si vous enfreignez certaines limites que nous ne respecterons pas. le peu d'utilisation que nous avons ici 38 00:02:39,540 --> 00:02:43,200 dans ces vidéos, seulement si vous violez ces limites, vous paierez. 39 00:02:43,200 --> 00:02:47,520 Maintenant, sachez qu'il peut y avoir un moment où vous devez payer et que 40 00:02:47,520 --> 00:02:52,340 cela dépend de combien vous utilisez l'API et par conséquent, consultez certainement les documents de tarification. 41 00:02:52,380 --> 00:02:57,190 Maintenant, ici, j'ai tout activé maintenant et je termine juste cela et à la 42 00:02:57,300 --> 00:03:03,160 fin, vous devriez être présenté avec une clé API que je vais bien sûr invalider après ces enregistrements. 43 00:03:03,180 --> 00:03:06,440 Vous ne pouvez donc pas utiliser la mienne, mais vous devez prendre 44 00:03:06,460 --> 00:03:11,610 la vôtre à la place et maintenant, c'est la clé API que vous devez insérer ici dans cette URL. 45 00:03:11,670 --> 00:03:18,150 Alors maintenant, je vais simplement copier cette URL entière ici et la déplacer dans notre code et là, je veux 46 00:03:18,210 --> 00:03:23,790 maintenant sortir une image ici qui pointe vers cette URL parce que comme je l'ai mentionné, voici 47 00:03:23,790 --> 00:03:27,900 comment vous pouvez obtenir cette image, cette URL renvoie une image. 48 00:03:27,900 --> 00:03:33,390 Maintenant, je vais donc créer un nouveau composant ici que je nommerai MapPreview. js parce que je l'utiliserai également 49 00:03:33,390 --> 00:03:39,090 dans un autre endroit de l'application plus tard, où j'importe React de React et 50 00:03:39,180 --> 00:03:44,890 où j'importe ensuite l'image et la feuille de style de React Native, comme ceci. 51 00:03:47,620 --> 00:03:55,180 Ensuite, ici, je vais créer mon composant de prévisualisation de carte qui reçoit des accessoires bien sûr sans surprise, qui doit retourner du 52 00:03:55,180 --> 00:04:02,310 jsx plus tard et configurer certains styles ici avec Stylesheet. créer et bien 53 00:04:04,970 --> 00:04:11,600 sûr également exporter ce composant d'aperçu de carte. 54 00:04:12,050 --> 00:04:16,430 Maintenant, ici, je veux générer cette URL dont je viens de parler, donc ici 55 00:04:17,660 --> 00:04:26,870 l'URL d'aperçu de l'image doit être générée et cela peut être fait en utilisant les tiques de retour ici afin que je puisse ajouter du contenu dynamique dans le texte facilement 56 00:04:26,900 --> 00:04:32,540 puis copier dans cette URL que vous venez de copier de la documentation ici, assurez-vous que tout est sur 57 00:04:32,540 --> 00:04:34,110 une seule ligne car 58 00:04:34,190 --> 00:04:37,790 par défaut ce n'est pas le cas, alors assurez-vous que tout est 59 00:04:37,790 --> 00:04:40,360 sur une seule ligne sinon cela ne fonctionnera 60 00:04:40,370 --> 00:04:42,460 pas et maintenant bien sûr il y 61 00:04:42,460 --> 00:04:44,590 a quelques segments que vous devez remplacer, 62 00:04:44,600 --> 00:04:50,210 par exemple ici, le centre est égal à partie. Par défaut, cela pointe vers le pont de Brooklyn et 63 00:04:50,270 --> 00:04:55,100 vous pouvez entrer des adresses ici, mais vous pouvez également saisir des paires de latitude et de longitude ici. 64 00:04:55,100 --> 00:05:01,820 Donc, ce que je vais faire ici, c'est que je vais ajouter dynamiquement deux informations ici séparées par une virgule et la première chose 65 00:05:01,820 --> 00:05:04,090 est la latitude. Ici, je m'attends 66 00:05:04,100 --> 00:05:06,680 à obtenir ceci sur mes accessoires, je m'attends 67 00:05:06,680 --> 00:05:12,100 à obtenir un accessoire de localisation et bien sûr, cela peut être n'importe quel nom d'accessoire 68 00:05:12,110 --> 00:05:20,600 de votre choix qui devrait alors avoir une clé lat et ici, je veux avoir une clé longue, une clé lng ainsi, ce sera donc la 69 00:05:20,660 --> 00:05:21,610 latitude et 70 00:05:21,620 --> 00:05:27,130 la longitude de l'emplacement que je veux prévisualiser. Maintenant, le facteur de zoom, je vais le régler 71 00:05:27,200 --> 00:05:33,110 à 14, vous pouvez expérimenter différents facteurs, cela influence essentiellement la distance de zoom avant ou arrière de la carte. 72 00:05:33,170 --> 00:05:36,350 Vous pouvez également jouer avec votre taille ici. 73 00:05:36,360 --> 00:05:42,230 Maintenant, puisque j'ai un conteneur d'aperçu de carte que j'utilise généralement avec une hauteur de 200, 74 00:05:42,230 --> 00:05:48,520 je vais régler la hauteur à 200 ici et je vais donc régler la largeur à 400 ici. 75 00:05:48,740 --> 00:05:55,640 Bien sûr, vous pouvez utiliser une taille plus grande ici que celle que vous utiliserez pour que le conteneur affiche l'image plus tard, 76 00:05:55,640 --> 00:06:01,610 sachez que si vous récupérez une image très grande ici, elle sera bien sûr trop grande, trop de données 77 00:06:01,610 --> 00:06:06,290 pour télécharger, il se chargera plus lentement et vous n'en aurez peut-être pas besoin. 78 00:06:06,350 --> 00:06:12,260 Vous devez donc viser une taille de l'image de la carte ici qui correspond au type de conteneur où vous souhaitez l'afficher, 79 00:06:12,260 --> 00:06:18,740 ne doit pas nécessairement avoir la même taille, mais à peu près. Maintenant, le type de carte est la façon dont la carte doit être affichée, 80 00:06:18,740 --> 00:06:23,990 vous pouvez utiliser le satellite ici, mais je m'en tiendrai à la carte routière standard et maintenant vous pouvez également ajouter des marqueurs 81 00:06:23,990 --> 00:06:24,870 à cette carte. 82 00:06:24,950 --> 00:06:27,840 Maintenant, il y a quelques marqueurs mis en place dans 83 00:06:28,040 --> 00:06:34,700 cet extrait factice, je vais m'en débarrasser de tous, mais un pour que je n'aie que des marqueurs ici, de couleur rouge, une 84 00:06:34,700 --> 00:06:35,600 étiquette de 85 00:06:35,630 --> 00:06:37,220 a, cela peut être un 86 00:06:37,220 --> 00:06:42,890 seul caractère ici comme ABC puis la latitude et la longitude où ce marqueur doit être placé et bien sûr, 87 00:06:42,890 --> 00:06:46,440 c'est encore des accessoires. emplacement. lat puis ici une 88 00:06:46,490 --> 00:06:53,960 virgule et par la suite, remplacer ce nombre par des accessoires. emplacement. lng. 89 00:06:54,470 --> 00:07:01,500 Placer un tel marqueur est facultatif mais bien sûr, je veux montrer à l'utilisateur où il se trouve. 90 00:07:01,740 --> 00:07:09,360 Maintenant, j'ai besoin de la clé API, je vais donc copier cette clé qui a été générée ici et la remplacer ici. 91 00:07:09,480 --> 00:07:14,610 Maintenant, je ne peux pas le coller comme ça, mais en fait, je veux gérer cela dans un 92 00:07:14,610 --> 00:07:18,490 fichier séparé car j'utiliserai également cette clé API dans d'autres endroits de l'application. 93 00:07:18,570 --> 00:07:24,180 Alors ici, je vais créer un nouveau fichier que je nommerai env. js pour environnement pour configurer 94 00:07:24,870 --> 00:07:34,970 certaines variables d'environnement et là, je vais configurer un objet avec ma clé API Google et cela devrait être cette valeur 95 00:07:34,970 --> 00:07:44,820 ici et ensuite je peux l'exporter et bien sûr, qui devrait avoir un nom, vars égal et puis j'exporte des 96 00:07:44,820 --> 00:07:45,980 vars ici. 97 00:07:46,050 --> 00:07:51,000 Donc, avec cela, je peux simplement importer à partir de ce fichier env 98 00:07:51,000 --> 00:08:02,300 et c'est exactement ce que je ferai ici, importer env à partir du fichier env ici et qui représente simplement les variables d'environnement comme je l'ai dit et maintenant injecter dynamiquement 99 00:08:02,300 --> 00:08:03,110 ceci ici. 100 00:08:03,110 --> 00:08:07,670 Alors maintenant, nous avons un endroit où nous pouvons changer cette clé et où nous pouvons également l'importer à partir 101 00:08:07,670 --> 00:08:09,550 de tous les différents endroits de notre application. 102 00:08:09,590 --> 00:08:14,900 Ici, je vais injecter dynamiquement env. googleapikey. 103 00:08:15,010 --> 00:08:17,900 Donc, avec cela, j'ai obtenu l'URL d'aperçu 104 00:08:18,100 --> 00:08:23,550 de l'image, maintenant dans ce composant, nous devons bien sûr retourner l'aperçu de l'image et c'est 105 00:08:23,560 --> 00:08:30,250 généralement la vue que j'ai ici dans le sélecteur d'emplacement. Je vais donc le saisir à partir de là et l'ajouter 106 00:08:31,500 --> 00:08:35,130 dans l'aperçu de la carte, comme ceci, bien que le contenu de 107 00:08:35,130 --> 00:08:41,790 secours y soit, je veux en fait le transmettre de l'extérieur, donc je vais le découper à nouveau et le replacer dans le 108 00:08:41,790 --> 00:08:42,420 sélecteur d'emplacement. 109 00:08:42,420 --> 00:08:44,370 Cependant pas comme ça, mais 110 00:08:45,180 --> 00:08:53,440 ici, importez ce composant d'aperçu de carte nouvellement ajouté, alors importez-le depuis. / MapPreview, donc ce nouveau composant sur lequel 111 00:08:53,480 --> 00:08:55,910 nous travaillons actuellement, ajoutez-le 112 00:08:56,030 --> 00:08:57,960 ici, prévisualisez la 113 00:08:58,220 --> 00:09:05,240 carte, puis vérifiez cette extraction et l'indicateur et le texte de secours ici. 114 00:09:05,270 --> 00:09:12,250 Donc, dans l'aperçu de la carte, je n'aurai donc que des accessoires pour les enfants ici pour sortir ce qui est ajouté entre la balise d'ouverture 115 00:09:12,250 --> 00:09:15,480 et de fermeture, mais ce n'est qu'un contenu de secours, bien sûr, 116 00:09:15,480 --> 00:09:21,760 je me soucie de la sortie de l'aperçu réel ici. Maintenant, pour cela, nous devons nous assurer que l'URL de 117 00:09:21,820 --> 00:09:28,190 prévisualisation d'image peut également être vide au cas où aucun endroit n'a encore été choisi, donc je vais créer une URL 118 00:09:28,220 --> 00:09:30,610 de prévisualisation d'image variable et simplement attribuer 119 00:09:30,610 --> 00:09:37,990 une valeur ici et je veux attribuer une valeur si les accessoires. l'emplacement est défini car cela ne peut pas non plus être 120 00:09:37,990 --> 00:09:44,980 défini au cas où nous n'aurions pas encore choisi un emplacement et maintenant l'URL d'aperçu de l'image est vide ou c'est cette URL 121 00:09:44,980 --> 00:09:51,400 selon que nous avons passé un emplacement sur l'accessoire de localisation et que nous pouvons maintenant l'utiliser là-bas pour sortir quelque 122 00:09:51,400 --> 00:09:52,220 chose et 123 00:09:52,220 --> 00:09:56,020 en passant puisque j'utilise view ici, bien sûr, nous devons également nous 124 00:09:56,020 --> 00:09:57,640 assurer que nous importons view. 125 00:09:57,870 --> 00:09:59,290 Maintenant, comment utiliser cette URL? 126 00:09:59,310 --> 00:10:02,160 Eh bien, si nous l'avons, je veux l'utiliser 127 00:10:02,160 --> 00:10:06,170 pour sortir une image, sinon je montrerai ce contenu de secours aux enfants. 128 00:10:06,240 --> 00:10:08,580 Nous pouvons donc vérifier ici les 129 00:10:08,580 --> 00:10:10,140 accessoires. l'emplacement, si cela 130 00:10:10,140 --> 00:10:12,230 est défini, je sais que j'aurai également 131 00:10:12,240 --> 00:10:18,600 une URL d'image, nous pourrions bien sûr également vérifier l'existence de l'URL d'image et si celle-ci est définie, je produirai une image ici, 132 00:10:18,600 --> 00:10:19,260 si 133 00:10:19,260 --> 00:10:25,200 elle n'est pas définie, je les accessoires de sortie des enfants comme ça, donc je vais sortir mon contenu de secours. 134 00:10:26,110 --> 00:10:29,960 Maintenant, l'image ici recevra un style, une image de carte 135 00:10:30,040 --> 00:10:39,650 et une source et la source ici prend un URI qui pointe vers l'URL de prévisualisation de l'image parce que ce sera une URL 136 00:10:39,650 --> 00:10:42,010 réseau, une image réseau, non? 137 00:10:43,000 --> 00:10:46,330 Alors maintenant, apportons simplement les styles à partir du sélecteur 138 00:10:46,390 --> 00:10:54,520 d'emplacement, je peux prendre un aperçu de la carte, mais je veux seulement apporter la partie du contenu justifiée et réellement passer le reste manuellement ici 139 00:10:54,520 --> 00:11:01,390 et le fusionner, donc je vais toujours passer les styles . MapPreview depuis l'intérieur de mon sélecteur de position et dans l'aperçu de la carte, 140 00:11:01,390 --> 00:11:07,300 je veux maintenant fusionner cela avec mes styles que je configure ici. Donc ici, je vais en fait envelopper cela dans un 141 00:11:07,300 --> 00:11:13,270 objet où je retire tous les styles configurés dans l'aperçu de la carte ici et les fusionne dans tous les styles 142 00:11:13,270 --> 00:11:19,240 configurés sur cet accessoire de style afin que nous puissions également définir des styles de l'extérieur et les fusionner avec nos 143 00:11:19,240 --> 00:11:26,980 styles internes et maintenant pour les styles internes sur l'aperçu de la carte, comme je viens de le dire, j'aurai à justifier le contenu et à aligner 144 00:11:26,980 --> 00:11:29,050 les éléments ici et pour l'image elle-même, 145 00:11:29,200 --> 00:11:30,850 donc pour l'image de 146 00:11:30,910 --> 00:11:37,020 la carte, là, je veux définir cela pour prendre toute la largeur et la hauteur disponibles qu'il peut obtenir et nous devons 147 00:11:37,040 --> 00:11:41,410 le définir car il s'agit d'une image réseau. Comme vous l'avez appris, pour ceux dont vous avez besoin de définir 148 00:11:41,410 --> 00:11:43,040 la largeur et la hauteur du composant d'image. 149 00:11:44,710 --> 00:11:51,040 Maintenant, avec cela, nous avons le composant d'aperçu de la carte qui affiche cette image de la carte ou 150 00:11:51,040 --> 00:11:53,690 notre contenu de secours qui est transmis 151 00:11:53,920 --> 00:11:57,640 de l'extérieur et il le fait en vérifiant l'accessoire de localisation. 152 00:11:57,640 --> 00:12:02,950 Donc, à l'endroit où nous utilisons le composant de prévisualisation de la carte, qui est bien 153 00:12:02,950 --> 00:12:07,330 sûr le sélecteur de position, nous devons passer dans cet accessoire de localisation et 154 00:12:07,330 --> 00:12:15,190 le prop de localisation, si nous vérifions l'aperçu de la carte, à la fin doit être un objet avec une latitude et la longitude 155 00:12:15,190 --> 00:12:19,840 ou une touche lat et lng. Donc donc de retour dans le sélecteur 156 00:12:19,910 --> 00:12:25,610 d'emplacement, je veux passer un tel accessoire ici et en effet, c'est exactement ce que nous gérons ici avec 157 00:12:25,610 --> 00:12:32,870 l'emplacement du choix, ce qui n'est bien sûr pas une coïncidence. C'est un objet avec latitude et longitude ou il n'est pas défini au départ 158 00:12:33,050 --> 00:12:36,300 et nous gérons également ce cas dans le composant d'aperçu de 159 00:12:36,410 --> 00:12:41,060 la carte, s'il n'est pas défini, nous montrons simplement le contenu de secours qui est transmis de l'extérieur. 160 00:12:41,060 --> 00:12:46,880 Donc, à l'emplacement, nous pouvons simplement passer à l'emplacement choisi et avec cela, nous devrions maintenant avoir une 161 00:12:46,880 --> 00:12:50,150 configuration où nous pouvons réellement voir un aperçu de l'endroit. 162 00:12:50,630 --> 00:12:52,490 Alors maintenant, ici, nous voyons le contenu 163 00:12:52,520 --> 00:12:59,120 de secours, mais si je clique maintenant sur obtenir l'emplacement de l'utilisateur, nous voyons le spinner et ensuite nous voyons un véritable instantané de l'endroit que 164 00:12:59,150 --> 00:13:00,010 nous avons choisi. 165 00:13:00,080 --> 00:13:02,180 Comme je l'ai mentionné, ce n'est pas où je suis assis en ce 166 00:13:02,180 --> 00:13:05,930 moment, c'est juste un endroit factice que l'émulateur nous donne. La même chose sur Android, 167 00:13:05,930 --> 00:13:08,370 si je prends un emplacement ici, maintenant c'est 168 00:13:08,370 --> 00:13:12,140 en fait le siège de Google que j'ai sélectionné par défaut là-bas. 169 00:13:12,880 --> 00:13:17,370 Donc, cela fonctionne, maintenant comme prochaine étape, je veux m'assurer que nous 170 00:13:17,410 --> 00:13:22,570 pouvons également choisir cet endroit sur une carte au lieu de simplement nous localiser.