Pour commencer, sachez qu'un autre article spécifique à Here WeGo est à découvrir avec Jordan. Le but de cet article est double : d'un côté, mettre à votre disposition un module codé par nos soins. De l'autre, vous illustrer la rapidité et la puissance de mise en œuvre de Vue.js hors d'un contexte préposé à cette technologie (car oui, ce module pourra être intégré dans n'importe quel site ! ). Et bien sûr, vous ré-expliquer l'utilité de l'API Geocoder de Here sur la récupération de coordonnées.
Présentation du module d'auto-complétion
Le module n'est rien d'autre qu'une liste de choix de villes avec l'information sur son code postal. Un outil d'auto-complétion classique mais qui permet de valider la ville sélectionnée grâce à son code postal. En effet, il existe des homonymes sur les villes françaises (cf Saint-Sauveur).
Voici ce que permet d'obtenir le module : Cliquez ici !
Décomposition du code
Pour commencer, le module est composé d'un champ 'input' text standard pour renseigner la ville recherchée avec 2 évènements Vue qui sont 'bindés' : le keyup & le keydown qui permettent comme leurs noms l'indiquent de détecter lorsque qu'une touche de votre clavier est pressée afin d'appeler la fonction 'onKeypressCity'.
Sur ce champ également, vous remarquerez un data binding sur la valeur du champ via l'instanciation d'un model vue : v-model="inputCity" qui va nous permettre côté Vue de récupérer la valeur du champ très rapidement.
Notez ici, que j'aurais pu utiliser les watcheurs VueJS sur le model inputCity afin de remplacer les évènements keyup & keydown mais j'ai décidé de ne pas l'intégrer pour éviter une boucle infinie, si vous vouliez par exemple attribuer la valeur de la sélection à votre champ.
Évidemment, les fonctions nommées précédemment et les variables doivent être déclarées. Ainsi que la logique dans le fichier JS qui instancie Vue (new Vue())
On retrouve dans ce fichier les datas nommées comme notre modèle. Ou encore la liste des suggestions et leurs valeurs par défaut.
Utilisation de l'API Geocoder de Here
On trouve également la fonction la plus intéressante 'onKeypressCity' qui permet l'auto-complétion en faisant un appel à l'API Geocoder HERE. Cela nous permet de récupérer un certain nombre d'informations (ça ne se limite pas à la ville & code postal) : latitude, longitude, adresse, etc ...
Comme précisé plus haut, à chaque pression sur une touche de votre clavier elle se déclenche.
D'ailleurs l'API Geocoder HERE permet de trouver des adresses complètes notamment pour des livraisons, etc .. Pour rappel, HERE possède un plan d'utilisation gratuit jusqu'à 200.000 requêtes par mois. Ce qui n'est pas négligeable en comparaison avec Google Maps Platform.
Vous trouverez toutes les informations ici : API Geocoder HERE
A noter : Il vous faudra alimenter les variables here_id & here_code avec vos identifiants HERE pour que les suggestions apparaissent !
À vous de tester l'API Geocoder de Here
Bien sûr ! Le code est à votre disposition : Télécharger le module
Et voici d'autres ressources :
- https://developer.here.com/blog/street-address-validation-with-reactjs-and-here-geocoder-autocomplete
- https://vuejs.org/
- https://developer.here.com/documentation/geocoder-autocomplete/dev_guide/topics/quick-start-get-suggestions.html
Si vous l'utilisez tel quel sur un de vos sites ou/et que vous l'alimentez de quelques façons, n'hésitez pas à nous en faire part dans les commentaires ;)
