Guide d’intégration / Blogs / Perficient

Dans ce didacticiel, nous explorerons comment réaliser Saisie semi-automatique de l’emplacement Vue.js en intégrant l’API Google Maps Places Autocomplete avec un composant de géolocalisation personnalisé. Nous vous guiderons à travers chaque étape pour configurer le Saisie semi-automatique de l’emplacement Vue.js fonctionnalité, gérez les entrées de l’utilisateur et liez-la au modèle v de Vue pour une liaison de données bidirectionnelle fluide.

Conditions préalables à la saisie semi-automatique de l’emplacement Vue.js

Pour commencer Saisie semi-automatique de l’emplacement Vue.jsassurez-vous d’avoir une compréhension de base de Vue.js et TypeScript. De plus, vous devez activer l’API Maps sur votre compte Google Cloud.

Étapes pour créer un composant de saisie semi-automatique Google Maps

Étape 1 : configurer l’API Google Places

Tout d’abord, activez l’API Places via le Google Cloud Console et obtenez votre clé API. Par la suite, chargez le script Google Maps dans votre application, généralement dans votre fichier index.html. Pour plus de détails, reportez-vous au Documentation de l’API Google Maps Places.

Étape 2 : configurer le composant de base

Ensuite, créez un composant Vue appelé Geo Location. Ce composant utilisera le service Places Autocomplete de Google Maps pour récupérer les données de localisation. Pour plus d’informations sur Vue.js, visitez le Documentation Vue.js.

Voici le modèle de composant :

Ce modèle Vue.js définit un champ de saisie pour intégrer l’API Google Maps Places Autocomplete :

• <input type="search">: définit une zone de recherche pour la saisie de l’emplacement.
• ref="textbox": Permet un accès direct à l’élément d’entrée dans le script.
• :placeholder="'search location'": Lie l’espace réservé à une chaîne statique.
• :value="value": lie la valeur d’entrée à une propriété de valeur réactive.
• @input="input": Appelle la méthode de saisie lorsque l’utilisateur tape dans le champ.
• @change="change": Appelle la méthode change lorsque la valeur d’entrée change.

Étape 3 : définir le composant dans TypeScript

Ensuite, configurez la structure de votre composant Geo Location en utilisant Manuscritet utilisez vue-property-decorator pour gérer les accessoires et les hooks de cycle de vie Vue.

• Utilisez le @Component decorator de vue-property-decorator pour définir le composant Geo Location.
• Utilisez le @Prop() décorateur pour transmettre la valeur prop du composant parent.
• Par conséquent, la valeur prop est liée au modèle v.

Étape 4 : accéder à l’élément d’entrée

Pour utiliser Google Places Autocomplete, référencez l’élément d’entrée avec un getter :

• Récupérez l’élément d’entrée en utilisant this.$refs.textbox et le ref attribut du modèle.
• De plus, assurez-vous que TypeScript reconnaît l’élément en tant que HTMLInputElement en l’utilisant comme HTMLInputElementoffrant une sécurité de type appropriée.

Étape 5 : initialiser la saisie semi-automatique de Google Places

À l’intérieur du hook de cycle de vie monté, initialisez l’objet Google Places Autocomplete et liez-le à votre champ de saisie. Aussiécoutez le place_changed événement à capturer lorsqu’un lieu est sélectionné dans la liste déroulante. Pour plus d’informations, consultez le Documentation de l’API JavaScript de Google Maps.

• Créez une instance de la saisie semi-automatique de Google pour le champ de saisie, permettant ainsi des suggestions de recherches de localisation.
• De plus, un auditeur peut être ajouté pour détecter lorsqu’un utilisateur sélectionne un lieu parmi les suggestions. Par conséquent, appelez la méthode placeChanged pour gérer le lieu sélectionné.

Étape 6 : Gérer les événements de saisie et de modification

Définissez des méthodes pour gérer les entrées utilisateur et les événements de modification.

• Le input La méthode se déclenche chaque fois que l’utilisateur tape dans le champ de saisie.
• De même, le change La méthode se déclenche lorsqu’une sélection est effectuée.

Étape 7 : Capturer le lieu sélectionné

Le placeChanged La méthode se déclenche lorsque l’utilisateur sélectionne un emplacement dans la liste déroulante. Ici, extrayez soit le formatted_address ou le nom du lieu et transmettez-le au composant parent.

• Récupérez le lieu sélectionné parmi les suggestions de saisie semi-automatique en utilisant this.autoComplete.getPlace().
• Par conséquent, émettez le signal du lieu sélectionné formatted_address ou renommez le composant parent via le input() et change() méthodes.

Étape 8 : Utilisation dans le composant parent

Enfin, utilisez le composant GeoLocation dans un composant parent comme indiqué ci-dessous :

• Liez la valeur d’entrée au selectedLocation propriété de données en utilisant le v-model directif.
• De plus, appliquez dynamiquement la classe ‘has-error’ si la recherche d’emplacement échoue en utilisant v-bind: class.

En suivant cette approche, vous pouvez facilement intégrer Google Maps Places Autocomplete dans vos applications Vue.js, améliorant ainsi l’expérience utilisateur lors de la saisie des données de localisation. Ce guide fournit une manière flexible et réutilisable de travailler avec des entrées basées sur la localisation.