45

私のグーグルマップアプリケーションでオートコンプリートを機能させようとしています。

現在のコードは次のとおりです。

HTML

<input type="text" class="clearText" id="address" name="address" value="" size=20 autocomplete="off">

Javascript

    var input = document.getElementById('address');
    var options = {
        componentRestrictions: {country: 'au'}
    };
    var autocomplete = new google.maps.places.Autocomplete(input, options);

残念ながら、アドレスを入力しても何も起こりません。

何か案は？

前もって感謝します。

編集：私は実際に次のエラーを受け取っています：

Uncaught TypeError：未定義のプロパティ「オートコンプリート」を読み取れません

理由はわかりませんが、コードはマップ初期化関数に配置されています。

編集2：修正。以下に答えてください。

4

8 に答える 8

21

あなたの修正も私にとってはうまくいきました。Geocomplete jQuery Plug-in http://ubilabs.github.com/geocomplete/ を使用しています。ホームページの説明では、これを使用するように指示されています

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"></script>

しかし、それは私にとってはうまくいかず、同じエラーが発生していました。

ここで Google Maps API のドキュメントを参照して ください https://developers.google.com/maps/documentation/javascript/places?hl=en-EN#loading_the_library

于 2012-11-01T23:14:09.513 に答える
5

angularアプリを使用している場合：

Google マップを使用している場合は、このように ngmodule に API をインポートする必要があります

@NgModule({
  declarations: [...],
  imports: [...,
    AgmCoreModule.forRoot({
      clientId: '<mandatory>',
      //apiVersion: 'xxx', // optional
      //channel: 'yyy', // optional
      //apiKey: 'zzz', // optional
      language: 'en',
      libraries: ['geometry', 'places']
    })
  ],
  providers: [...],
  bootstrap: [...]
})

autocomplete モジュールを使用するには、ライブラリ「places」が必要です。

次のように使用するよりも：

import {MapsAPILoader} from "@agm/core";
...
constructor(private mapsAPILoader: MapsAPILoader,
...
    this.mapsAPILoader.load().then(() => {
      let autocomplete = new window['google'].maps.places.Autocomplete(..., ...);

      autocomplete.addListener("place_changed", () => { ...
于 2018-08-17T13:17:44.890 に答える
0

答えてくれてありがとうマット！を使用する場合は、タグtype="text/javascript"の属性を省略しないことが重要なようです。<script>libraries=places

動作しません:

<script src="http://maps.googleapis.com/maps/api/js?libaries=places&sensor=false&callback=initMap"></script>
<script src="http://maps.googleapis.com/maps/api/js?libaries=places&sensor=false"></script>

作品:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>

コールバック バリアントも機能します (initMap 関数が定義されている場合)。

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false&callback=initMap"></script>

これは、別のSO 回答と一致しているようで、公式ドキュメントkeyと一致していないようです ( URL に を指定することで違いが生じない限り)。

于 2016-04-01T10:24:28.340 に答える
0

私の場合、Libraries=places を libraries=places に変更することで問題が解決しました。大文字と小文字が区別されるようです

于 2021-01-24T01:39:35.520 に答える