6

大学での最終年度のプロジェクト用にWebアプリケーションを作成しようとしていますが、最初に取り組む必要のある問題の1つは、ローカルアドレス入力用のオートコンプリートテキストボックスを取得することです。私はインターネットを見回して、グーグルマップV3プレイスオートコンプリートプラグインで遊んでいる時間を過ごしました。

誰かが私のために片付けてくれることを望んでいたAPIドキュメントには、私がよく理解していないことがあります。また、正しい方向に私を向けることもできます。

ドキュメントでは、これは次のように述べています。

(regions)タイプコレクションは、次のタイプに一致する結果を返すようにPlaceサービスに指示します。

locality
sublocality
postal_code
country
administrative_area1
administrative_area2

これは私が現在理解していないことです。私はコーンウォール(正確にはボドミン)に住んでいて、結果をボドミンに偏らせたいと思っています。私は次のことをしました:

var input = document.getElementById('inputOne');
var defaultBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(50.423394,-4.803829),
  new google.maps.LatLng(50.508623,-4.692593));

        //need to set bounds to cornwall/bodmin
        var options = {
            bounds: defaultBounds,
          types: ['geocode'],
          componentRestrictions: {country: 'GB'}
        };
var autocomplete = new google.maps.places.Autocomplete(input,options);

これで動作しますが、たとえば「st n」と入力すると、最初にボドミンにあるstnicolas通りが表示されると思います。しかし、それは数マイル離れたstneotのようなものを思い付くでしょう。

タイプを別の値に設定する必要があると思う部分がありますが、今はかなり困惑しています。

編集:私が達成しようとしていることの例は、maps.google.comページにあります。「Bodmin」と入力し、カーソルをコンマの前に移動して、通りの名前またはAsdaを入力し始めると、その名前がローカルに保持されます。そのエリア。ボドミンを入力する必要はありませんが、それは回避できるものです

誰かが素晴らしいアイデアを持っているなら。次に、ユーザーが"Asda"ローカルasdaアドレスのようないくつかの値を入力して取得する方法を理解する必要があります。

4

4 に答える 4

4

上記のように境界を使用する場合を除いて、現在、結果を特定の地域に制限することはできません。ただし、これは結果を指定された境界内に含まれる場所に偏らせるだけであり、これに限定されません。

地域別の結果が便利な機能であると思われる場合は、PlacesAPI-FeatureRequestを提出してください。

前述のように,Bodmin、クエリの最後に入力すると、ローカルの結果が返される可能性が高くなります。一時的な解決策は、AutocompleteServiceを使用して、リクエスト入力パラメーター,Bodminの最後に追加することです。getPlacePredictions()

于 2012-12-05T04:47:16.420 に答える
3

タイプをregionに設定します。

    var options = {
        bounds: defaultBounds,
       types: ['(regions)'],
       componentRestrictions: {country: 'GB'}
     };
    var autocomplete = new google.maps.places.Autocomplete(input,options);

それがうまくいくことを願っています..

于 2015-11-13T14:31:10.453 に答える
0
<div class="well container">
    <form role="form">
      <div class="form-group">
        <label for="locality" class="sr-only">Stadt oder PLZ</label>
          <input type="text" class="form-control" id="locality" name="locality" placeholder="Stadt oder PLZ" />
          <p class="help-block">Bitte zuerst die Stadt oder PLZ eingeben.</p>
      </div>
      <div class="form-group">
        <label for="route" class="sr-only">Straße / Hausnummer</label>
        <div class="row">
          <div class="col-xs-6">
            <input type="text" class="form-control col-xs-8" id="route" name="route" placeholder="Straße" disabled="true" />
          </div>
          <div class="col-xs-6">
            <input type="text" class="form-control col-xs-4" id="street_number" name="street_number" placeholder="Nr." disabled="true" />
          </div>
        </div>
      </div>
    </form>
</div>

<script>
var localityInput = document.getElementById('locality');
var localityOptions = {
  types: ['geocode'], //['(cities)'], geocode to allow postal_code
  componentRestrictions: {country: 'de'}
};
autocomplete = new google.maps.places.Autocomplete(localityInput, localityOptions);

google.maps.event.addListener(autocomplete, 'place_changed', function() {
    $('#route').attr('disabled', false).focus();
    $('#street_number').attr('disabled', false);

    var boundsByCity = autocomplete.getPlace().geometry.viewport;
    var routeInput = document.getElementById('route');
    var routeOptions = {
        bounds: boundsByCity,
        types: ['geocode']
    };
    new google.maps.places.Autocomplete(routeInput, routeOptions);
});
</script>

デモ: jsfiddle

于 2014-11-05T19:45:39.623 に答える