web-dev-qa-db-fra.com

La saisie semi-automatique Google Adresses ne s'affiche pas.

Cela fait des heures que je travaille à cela pour essayer de comprendre pourquoi la soi-disant autocomplétion simple n'apparaissait pas. 

Il se trouve que dans mon code, l'élément input est défini sur autocompete="off" et le style sur le conteneur pac est display: none. 

Je peux modifier ces valeurs dans DevTools, et cela fonctionne correctement, mais je ne peux pas comprendre comment ni pourquoi ces valeurs sont définies. 

Mon autocomplete est configuré dans une directive Angular, comme celle-ci, où loadGmaps obtient l'API de Google. 

 template: '<input id = "google_places_ac" name = "google_places_ac" type = "text" class = "input-block-level" />',
 lien: fonction ($ scope, Elm, attrs) {
 loadGmaps (). then (function () {

 var autocomplete = new google.maps.places.Autocomplete ($ ("# google_places_ac") [0], {}); 
 console.log ( autocomplete); 
 google.maps.event.addListener (autocomplete, 'place_changed', function () {
 var place = autocomplete.getPlace (); 
 $ scope.position = {
 lat: place.geometry.location.lat (), 
 lon: place.geometry.location.lng () 
}; 
 $ scope. $ apply (); 
}). 
} );

---------------------Mettre à jour---------------------------- ------------------

Espérons que personne d'autre ne soit égaré par cela, le autocomplete="off" est un peu trompeur. Même avec autocomplete="off", l'auto-complétion fonctionne toujours, alors ce n'était pas le problème. Je suis en train d'écraser le css de l'élément .pac-container, qui contient les résultats avec 

. pac-container {// il s'agit d'un correctif pour la complétion automatique de Google ne s'affiche pas 
 z-index: 10000! important; 
 display: block! important; 
 }

Le problème, c’est qu’une fois qu’un élément a été sélectionné dans la saisie semi-automatique, la saisie semi-automatique reste visible. Je suis donc presque certaine qu’il existe un meilleur moyen d’utiliser cette fonction. 

angularjsgoogle-maps-api-3angularjs-directivegoogle-places-api
28
pedalpete

Pour les autres personnes bloquées ou ayant des difficultés avec cela, ignorez la valeur 'autocomplete = "no"' et n'utilisez pas 'display: block' pour afficher le '.pac-container'.

allez dans votre devtools chrome et assurez-vous que vous pouvez voir le .pac-container div. définissez le z-index de cette div dans votre css. Quand il y a une valeur recherchée, Google va changer l'affichage pour bloquer et gérer l'affichage et le masquage, il vous suffit de vous soucier de l'index z.

42
pedalpete

vérifier la version de la carte dans le fichier d'index

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.26&key=YOUR API KEY"></script>

Spécifiez v = 3.26 lors du chargement de l'API Google Map

11
M Sagar

Il y a un autre cas où .pac-container n'apparaîtra pas: lorsque vous utilisez des conteneurs positionnés fixes et que vous laissez le <body> sans enfants relatifs/statiques réels, le <body> se réduit à 0 hauteur ou si petit que le bord inférieur est plus haut que l'endroit où le .pac-container apparaîtrait. Dans ce cas, vous pouvez voir avec devtools que pac-container est dans la bonne position, qu’il a la hauteur mais qu’il n’est pas visible.

body{min-height:calc(100vh)} pourrait aider.

0
zsitro