Google Place la saisie semi-automatique ne s'affiche pas
J'ai travaillé dessus pendant des heures en essayant de comprendre pourquoi la saisie semi-automatique soi-disant simple n'apparaissait pas.
, Il s'avère que dans mon code, l'élément d'entrée est définie sur autocompete="off"
, et le style de la pac container-display: none
.
Je peux changer ces valeurs dans DevTools, et cela fonctionne bien, mais je ne peux pas comprendre comment ou pourquoi elles sont définies sur ces valeurs.
Mon autocomplete est configuré dans une Directive angulaire, comme ceci, où loadGmaps obtient le google API.
template: '<input id="google_places_ac" name="google_places_ac" type="text" class="input-block-level"/>', link: function($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(); }); });
---------------------mise à Jour----------------------------------------------
Espérons que personne d'autre n'est égaré par cela, le {[4] } est un peu trompeur. Même avec autocomplete="off"
, la saisie semi-automatique fonctionne toujours, ce n'était donc pas le problème. J'écris trop le css de l'élément .pac-container
, qui contient les résultats avec
.pac-container { //this is a fix for google autocomplete not showing up z-index: 10000 !important; display: block !important; }
Le problème avec ceci est qu'une fois qu'un élément a été sélectionné à partir de la saisie semi-automatique, la saisie semi-automatique reste visible, je suis assez sûr qu'il c'est une meilleure façon d'utiliser la saisie semi-automatique.
3 réponses
Pour toute autre personne qui peut être bloquée ou avoir des difficultés avec cela, ignorez la valeur' autocomplete="no"', et n'utilisez pas' display: block 'pour afficher le'.pac-container".
Allez dans vos devtools chrome et assurez-vous que vous pouvez voir le .pac-container
div. définissez l'index z 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.
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
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>
s'effondre à 0
hauteur ou si petit que le bord inférieur est plus élevé que l'endroit où le .pac-container
apparaîtrait. Dans ce cas, vous pouvez voir avec devtools que pac-container est en bonne position et a une hauteur, mais pas visible.
body{min-height:calc(100vh)}
ça pourrait aider.