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
de le faire et plus tard, nous ajouterons également une carte interactive à cette application.
Pour l'instant, je veux juste avoir une
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.
Vous pouvez google pour l'API statique de Google Maps pour trouver la documentation officielle où vous pouvez tout apprendre à
ce sujet bien sûr
et à la fin, l'utilisation de cette API est super simple.
Vous avez juste besoin d'envoyer la demande à cette URL et cela vous donne déjà une image, vous pouvez
donc simplement utiliser ce lien sur un composant d'image et vous êtes bon.
La seule chose délicate ici est cette clé API, vous avez besoin de vos informations d'identification API et pour
cela, vous avez besoin d'une clé API.
Maintenant, pour cela, vous pouvez simplement cliquer sur votre clé API ici et en générer une et maintenant
vous pouvez sélectionner un projet que vous avez déjà ou vous
créez un nouveau projet et pour cela, vous devez annuler ici et faire défiler un peu
plus loin Pour commencer, activez la partie API ici et cliquez sur Commencer ici.
Maintenant, une fois que vous avez fait cela, vous êtes redirigé vers la console de la plate-forme
Google Maps où vous pouvez maintenant activer les différentes fonctionnalités de Google Maps que vous souhaitez utiliser et ici,
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.
Donc, ces deux choses doivent être vérifiées,
nous n'avons pas besoin des itinéraires parce que nous ne construisons aucune fonctionnalité de navigation ici et avec cela,
nous pouvons cliquer sur continuer, sélectionner un projet et maintenant sélectionner un projet existant ou
simplement créer un nouveau un et je vais en créer un nouveau ici et le nommer React Complete Guide mais
vous pouvez le nommer comme
vous voulez, cliquez sur suivant ici et attendez qu'il soit généré.
Cela devrait être relativement rapide et nous nous inquiétons maintenant des prix
pendant le chargement.
Vous pouvez généralement l'utiliser gratuitement, mais vous avez besoin d'un compte de facturation et c'est
ce que l'on me demande ici.
Vous avez besoin d'un
compte Google bien sûr et sur ce compte Google, vous devez avoir une carte de
crédit pour l'utiliser, sinon vous ne pouvez pas l'utiliser malheureusement, c'est ce que c'est.
Vous avez donc besoin d'une carte
de crédit, vous devez avoir un compte de facturation configuré dans votre compte Google et vous pouvez ensuite
utiliser ce compte Google connecté pour ce projet, ce que je fais ici. Avec cela activé, vous pourrez toujours l'utiliser gratuitement, vous avez
obtenu un niveau gratuit très généreux
et vous trouverez ci-joint un lien vers les prix de la plate-forme Google Maps et
uniquement si vous enfreignez certaines limites que nous ne respecterons pas. le peu d'utilisation que nous avons ici
dans ces vidéos, seulement si vous violez ces limites, vous paierez.
Maintenant, sachez qu'il peut y avoir un moment où vous devez payer et que
cela dépend de combien vous utilisez l'API et par conséquent, consultez certainement les documents de tarification.
Maintenant, ici, j'ai tout activé maintenant et je termine juste cela et à la
fin, vous devriez être présenté avec une clé API que je vais bien sûr invalider après ces enregistrements.
Vous ne pouvez donc pas utiliser la mienne, mais vous devez prendre
la vôtre à la place et maintenant, c'est la clé API que vous devez insérer ici dans cette URL.
Alors maintenant, je vais simplement copier cette URL entière ici et la déplacer dans notre code et là, je veux
maintenant sortir une image ici qui pointe vers cette URL parce que comme je l'ai mentionné, voici
comment vous pouvez obtenir cette image, cette URL renvoie une image.
Maintenant, je vais donc créer un nouveau composant ici que je nommerai MapPreview. js parce que je l'utiliserai également
dans un autre endroit de l'application plus tard, où j'importe React de React et
où j'importe ensuite l'image et la feuille de style de React Native, comme ceci.
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
jsx plus tard et configurer certains styles ici avec Stylesheet. créer et bien
sûr également exporter ce composant d'aperçu de carte.
Maintenant, ici, je veux générer cette URL dont je viens de parler, donc ici
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
puis copier dans cette URL que vous venez de copier de la documentation ici, assurez-vous que tout est sur
une seule ligne car
par défaut ce n'est pas le cas, alors assurez-vous que tout est
sur une seule ligne sinon cela ne fonctionnera
pas et maintenant bien sûr il y
a quelques segments que vous devez remplacer,
par exemple ici, le centre est égal à partie. Par défaut, cela pointe vers le pont de Brooklyn et
vous pouvez entrer des adresses ici, mais vous pouvez également saisir des paires de latitude et de longitude ici.
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
est la latitude. Ici, je m'attends
à obtenir ceci sur mes accessoires, je m'attends
à obtenir un accessoire de localisation et bien sûr, cela peut être n'importe quel nom d'accessoire
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
latitude et
la longitude de l'emplacement que je veux prévisualiser. Maintenant, le facteur de zoom, je vais le régler
à 14, vous pouvez expérimenter différents facteurs, cela influence essentiellement la distance de zoom avant ou arrière de la carte.
Vous pouvez également jouer avec votre taille ici.
Maintenant, puisque j'ai un conteneur d'aperçu de carte que j'utilise généralement avec une hauteur de 200,
je vais régler la hauteur à 200 ici et je vais donc régler la largeur à 400 ici.
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,
sachez que si vous récupérez une image très grande ici, elle sera bien sûr trop grande, trop de données
pour télécharger, il se chargera plus lentement et vous n'en aurez peut-être pas besoin.
Vous devez donc viser une taille de l'image de la carte ici qui correspond au type de conteneur où vous souhaitez l'afficher,
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,
vous pouvez utiliser le satellite ici, mais je m'en tiendrai à la carte routière standard et maintenant vous pouvez également ajouter des marqueurs
à cette carte.
Maintenant, il y a quelques marqueurs mis en place dans
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
étiquette de
a, cela peut être un
seul caractère ici comme ABC puis la latitude et la longitude où ce marqueur doit être placé et bien sûr,
c'est encore des accessoires. emplacement. lat puis ici une
virgule et par la suite, remplacer ce nombre par des accessoires. emplacement. lng.
Placer un tel marqueur est facultatif mais bien sûr, je veux montrer à l'utilisateur où il se trouve.
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.
Maintenant, je ne peux pas le coller comme ça, mais en fait, je veux gérer cela dans un
fichier séparé car j'utiliserai également cette clé API dans d'autres endroits de l'application.
Alors ici, je vais créer un nouveau fichier que je nommerai env. js pour environnement pour configurer
certaines variables d'environnement et là, je vais configurer un objet avec ma clé API Google et cela devrait être cette valeur
ici et ensuite je peux l'exporter et bien sûr, qui devrait avoir un nom, vars égal et puis j'exporte des
vars ici.
Donc, avec cela, je peux simplement importer à partir de ce fichier env
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
ceci ici.
Alors maintenant, nous avons un endroit où nous pouvons changer cette clé et où nous pouvons également l'importer à partir
de tous les différents endroits de notre application.
Ici, je vais injecter dynamiquement env. googleapikey.
Donc, avec cela, j'ai obtenu l'URL d'aperçu
de l'image, maintenant dans ce composant, nous devons bien sûr retourner l'aperçu de l'image et c'est
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
dans l'aperçu de la carte, comme ceci, bien que le contenu de
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
sélecteur d'emplacement.
Cependant pas comme ça, mais
ici, importez ce composant d'aperçu de carte nouvellement ajouté, alors importez-le depuis. / MapPreview, donc ce nouveau composant sur lequel
nous travaillons actuellement, ajoutez-le
ici, prévisualisez la
carte, puis vérifiez cette extraction et l'indicateur et le texte de secours ici.
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
et de fermeture, mais ce n'est qu'un contenu de secours, bien sûr,
je me soucie de la sortie de l'aperçu réel ici. Maintenant, pour cela, nous devons nous assurer que l'URL de
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
de prévisualisation d'image variable et simplement attribuer
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
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
selon que nous avons passé un emplacement sur l'accessoire de localisation et que nous pouvons maintenant l'utiliser là-bas pour sortir quelque
chose et
en passant puisque j'utilise view ici, bien sûr, nous devons également nous
assurer que nous importons view.
Maintenant, comment utiliser cette URL?
Eh bien, si nous l'avons, je veux l'utiliser
pour sortir une image, sinon je montrerai ce contenu de secours aux enfants.
Nous pouvons donc vérifier ici les
accessoires. l'emplacement, si cela
est défini, je sais que j'aurai également
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,
si
elle n'est pas définie, je les accessoires de sortie des enfants comme ça, donc je vais sortir mon contenu de secours.
Maintenant, l'image ici recevra un style, une image de carte
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
réseau, une image réseau, non?
Alors maintenant, apportons simplement les styles à partir du sélecteur
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
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,
je veux maintenant fusionner cela avec mes styles que je configure ici. Donc ici, je vais en fait envelopper cela dans un
objet où je retire tous les styles configurés dans l'aperçu de la carte ici et les fusionne dans tous les styles
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
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
les éléments ici et pour l'image elle-même,
donc pour l'image de
la carte, là, je veux définir cela pour prendre toute la largeur et la hauteur disponibles qu'il peut obtenir et nous devons
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
la largeur et la hauteur du composant d'image.
Maintenant, avec cela, nous avons le composant d'aperçu de la carte qui affiche cette image de la carte ou
notre contenu de secours qui est transmis
de l'extérieur et il le fait en vérifiant l'accessoire de localisation.
Donc, à l'endroit où nous utilisons le composant de prévisualisation de la carte, qui est bien
sûr le sélecteur de position, nous devons passer dans cet accessoire de localisation et
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
ou une touche lat et lng. Donc donc de retour dans le sélecteur
d'emplacement, je veux passer un tel accessoire ici et en effet, c'est exactement ce que nous gérons ici avec
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
et nous gérons également ce cas dans le composant d'aperçu de
la carte, s'il n'est pas défini, nous montrons simplement le contenu de secours qui est transmis de l'extérieur.
Donc, à l'emplacement, nous pouvons simplement passer à l'emplacement choisi et avec cela, nous devrions maintenant avoir une
configuration où nous pouvons réellement voir un aperçu de l'endroit.
Alors maintenant, ici, nous voyons le contenu
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
nous avons choisi.
Comme je l'ai mentionné, ce n'est pas où je suis assis en ce
moment, c'est juste un endroit factice que l'émulateur nous donne. La même chose sur Android,
si je prends un emplacement ici, maintenant c'est
en fait le siège de Google que j'ai sélectionné par défaut là-bas.
Donc, cela fonctionne, maintenant comme prochaine étape, je veux m'assurer que nous
pouvons également choisir cet endroit sur une carte au lieu de simplement nous localiser.