web-dev-qa-db-ja.com

Googleプレイスのオートコンプリートが表示されない

単純なオートコンプリートと思われるものが表示されない理由を理解しようと、私は何時間もこれに取り組んできました。

私のコードでは、入力要素がautocompete="off"に設定されており、pac-containerのスタイルはdisplay: noneであることがわかりました。

これらの値はDevToolsで変更できますが、正常に機能しますが、これらがこれらの値にどのようにまたはなぜ設定されているのかわかりません。

私のオートコンプリートは、Angularディレクティブのように設定されています。ここでは、loadGmapsがgoogle apiを取得します。

テンプレート： '<input id = "google_places_ac" name = "google_places_ac" type = "text" class = "input-block-level" />',
リンク：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（）; 
}）; 
}）;

- - - - - - - - - - -更新 - - - - - - - - - - - - - - ------------------

うまくいけば、他の誰もこれに惑わされず、autocomplete="off"は少し誤解を招くかもしれません。 autocomplete="off"を使用しても、オートコンプリートは引き続き機能するため、問題ありませんでした。結果を保持する.pac-container要素のcssを上書きしています

。pac-container {//これは表示されないgoogleオートコンプリートの修正です。
 z-index：10000！important; 
 display：block！important; 
}

これの問題は、オートコンプリートからアイテムが選択されると、オートコンプリートが表示されたままになることです。オートコンプリートを使用するより良い方法があると確信しています。

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

スタックしている、またはこれで問題が発生する可能性のある他の人は、「autocomplete = "no"」の値を無視し、「display：block」を使用して「.pac-container」を表示しないでください。

chrome devtoolsに移動し、.pac-container div。 CSSでそのdivのZインデックスを設定します。検索された値がある場合、Googleは表示を変更し、表示と非表示をブロックして処理します。Zインデックスについて心配する必要があります。

47
pedalpete

インデックスファイルでマップのバージョンを確認する

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

Google Map APIのロード時にv = 3.26を指定

11
Sagar M

_.pac-container_が表示されない別のケースがあります：固定配置コンテナーを使用し、実際の相対/静的な子なしで_<body>_を離れると、_<body>_は_0_高さに折りたたまれますまたは、非常に小さいため、_.pac-container_が表示される場所より下のエッジが高くなります。そのような場合、dev-toolsを使用して、pac-containerが正しい位置にあり、高さを持っていることを確認できますが、表示されません。

body{min-height:calc(100vh)}が役立ちます。

0
zsitro