0

ここにスクリプトがあります：

<!DOCTYPE html>
<html>
  <head>
    <title>Google Maps JavaScript API v3 Example: Places Autocomplete</title>
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
    <script>
      function initialize() {
        var input = document.getElementById('searchTextField');
        var options = {
            types: ['(cities)'],
            componentRestrictions: {country: 'us'}
        };

        var autocomplete = new google.maps.places.Autocomplete(input, options);
}
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div>
      <input id="searchTextField" type="text" size="50">
    </div>
  </body>
</html>

私がやりたいのは、オートコンプリートからJSON出力を取得し、long_name、short_nameを抽出して、下の画像administrative_area_level_1をadministrative_area_level_2参照することだけです。

欲しいもののスクリーンショット

4

3 に答える 3

1

http://api.jquery.com/jQuery.parseJSON/を使用します。次の ようになります。

var results = jQuery.parseJSON(google_json);

それで：

alert(results[0].types[0]);
alert(results[0].types[1]);

したがって、google-placesオートコンプリートを使用すると、次のリンクのようにこれを行う必要があります：https ://developers.google.com/maps/documentation/javascript/places?hl=pl#places_autocomplete

var input = document.getElementById('searchTextField'); // input must be global
function initialize() {

    var options = {
        types: ['(cities)'],
        componentRestrictions: {country: 'us'}
    };

    //var autocomplete = new google.maps.places.Autocomplete(input, options);
    var service = new google.maps.places.AutocompleteService();
    service.getQueryPredictions(input, callback);



}

function callback(predictions, status) {
    for (var i = 0, prediction; prediction = predictions[i]; i++) {
        alert(prediction.types[0]);
        alert(prediction.types[1]);
    }
}
google.maps.event.addDomListener(window, 'load', initialize);

ここに実際の例があります：https ：//google-developers.appspot.com/maps/documentation/javascript/examples/places-queryprediction？hl = pl

最終更新

このスクリプトを使用します。

<script>

    function initialize() {
        var input = document.getElementById('searchTextField');
        var options = {
    types: ['(cities)'],
    componentRestrictions: {country: 'us'}
    };

    var autocomplete = new google.maps.places.Autocomplete(input, options);
    google.maps.event.addListener(autocomplete, 'place_changed', function () {
       alert(this.types[0]);
       alert(this.types[1]);          
    });




    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>
于 2012-10-25T09:27:29.653 に答える
1

シンプルでしたが、見つけるのは困難でした。

最後に、以下を使用してGeoCompleteJSを実装しました。

http://ubilabs.github.com/geocomplete/

Webサイトは、実装を支援するために十分に文書化されています。

于 2012-11-09T10:28:31.093 に答える
0

場所の選択後に結果を処理する場合は、以下のようにイベントをバインドする必要があります

google.maps.event.addListener(autocomplete, 'place_changed', your_function);

次のページのコードは、https：//google-developers.appspot.com/maps/documentation/javascript/examples/places-autocompleteに非常に役立ちます。

于 2012-10-25T10:17:03.007 に答える