[résolu] Geolocalisation d'après input et retour d'API

Bonjour,

Je souhaite que mes utilisateurs saisissent leur adresse dans un input et que quand ils cliquent sur OK, apparaissent une carte leaflet avec un marker positionné sur cette adresse. Les coordonnées latitude et longitude sont récupérées avec un appel à l’API Nominatim.

En pratique, je n’y arrive pas.
J’arrive bien à affiche la latitude et la longitude sur le clic OK, mais pas à récupérer les valeurs des variables latitude et longitude pour les donner à la fonction de mise à jour de la carte.
A force de tripatouiller dans tous les sens je m’y perds.
Pouvez-vous me donner votre avis sur mon code:

J’ai 2 méthodes :

  • getLocation qui récupère les résultats de la requête API
  • initMap qui initialise une carte leaflet avec un positionnement par défaut

J’ai une fonction updateMap qui est censée se centrer sur les résultats de getLocation, en particulier sur la base de la longitude et latitude.
Mais :

  • je ne sais pas à quel moment je dois exécuter cette fonction
  • je ne sais pas comment récupérer mes variables (elles sont undefined !). Je soupçonne aussi le fait que je ne sais pas récupérer le résultat global de mon API…

Votre aide me serait utile sur ça : https://jsfiddle.net/Squarou/9o240atk/

Par avance, merci

Salut,

j’ai l’impression que tu as résolu ton problème, ton fiddle a l’air de marcher.
As-tu tjrs un problème ?

sinon, je te propose une alternative : ne pas donner de parametre à updateMap (mais d’utiliser à la place this.latitude this.longitude), de le mettre en watcher :

watch: {
  latitude: 'updateMap',
  longitude: 'updateMap',
}

Du coup, plus besoin de l’utiliser ailleurs, dès que latitude/longitude sont mis à jour, la carte se recentre.

Excellent ! Oui j’ai résolu le problème et j’arrive à faire fonctionner tout ça !
Je vais jeter un oeil au watcher car cela m’a l’air effectivement plus propre que ma mouture. Merci beaucoup @matxx !
Je laisse le fiddle en cours bac à sable pour tester, et si des fois d’autres sont intéréssés.

Bonjour @squarou,
Pour réaliser des cartes dynamiques et très personnalisables, tu peux également utiliser vueLayers qui intègre la dernière version d’OpenLayers. Ca te permet de gagner du temps pour des cartes simples.
Tu appels également OSM comme API pour réaliser ta recherche d’adresse. Tu peux aussi utiliser la BAN (Base d’Adresse National) gratuite et propulsé conjointement pas OSM, La Poste et les services publics français. L’avantage de la BAN, c’est qu’on y trouve d’autres service via l’API.

Bonne journée !