2

オートコンプリート Google API で、住所、市区町村などから郵便番号を検索したい。私はこのようなコードを使用しています。すべての場所と場所の詳細を提供していますが、必要なのは郵便だけです。何か提案があれば提供してください。

    <!DOCTYPE html>
    <html>
    <head>
    <link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes  /base/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">   
    </script>
    <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script src="http://xilinus.com/jquery-addresspicker/src/jquery.ui.addresspicker.js">    
    </script>

    <meta charset=utf-8 />
    <title>JS Bin</title>
    <style type="text/css">
    #map {
            border: 1px solid #DDD; 
            width:300px;
            height: 300px;
            float:left;  
            margin: 0px 0 0 10px;
           -webkit-box-shadow: #AAA 0px 0px 15px;
        }
        div {
            font-family: Arial;
            font-size: 10pt;
            }
     </style>
     <script type="text/javascript">
      $(document).ready(function () {
      var geocoder = new google.maps.Geocoder();
       $("#addresspicker").autocomplete({
        source: function (request, response) {
            geocoder.geocode({ address: request.term }, function (results, status) {
            if (status === google.maps.GeocoderStatus.OK) {
              response($.map(results, function(result) {
                if ($.inArray("street_address", result.types) >= 0) {
                    return result.formatted_address;
                }
              }));
            }
          });
        },
        select: function (event, ui) {
            var parts = ui.item.label.split(",")
                , address1 = parts[0]
                , address2 = parts.slice(1).join(",").trim();
            $("#postal").val(address1 + "\n" + address2);
        }
    });
});
    $(function() {
      var addresspicker = $("#addresspicker").addresspicker();
      var addresspickerMap = $( "#addresspicker_map" ).addresspicker({
          elements: {
            map:      "#map",
            lat:      "#lat",
            lng:      "#lng",
            locality: '#locality',
            country:  '#country'
          }
        });
        var gmarker = addresspickerMap.addresspicker( "marker");
        gmarker.setVisible(true);
        addresspickerMap.addresspicker( "updatePosition");
});
    </script>

 </head>
<body>
<div>
      <label>Address : </label><input id="addresspicker" />
</div>  
  <br/>
  <br/>
  <div>
  <div>
        <label>Address : </label> <input id="addresspicker_map" />   <br/>
            <label>Locality: </label> <input id="locality" disabled=disabled> <br/>
            <label>Country:  </label> <input id="country" disabled=disabled> <br/>
            <label>Latitude:      </label> <input id="lat" disabled=disabled> <br/>
            <label>Longitude:      </label> <input id="lng" disabled=disabled> <br/>
 <label>postal:      </label> <input id="postal" disabled=disabled> <br/>
    </div>
    <br/>
<div id="map"></div>
  </div>
</body>
</html>

前もって感謝します.......

4

3 に答える 3

1

私は jquery.ui.addresspicker を使用していませんが、これは便利だと思うかもしれません

このautocomplete.getPlace();関数を使用して、検索クエリに応じて郵便番号を「含めることができる」JSON オブジェクトを取得できます。

このバニラJSを維持してみます

ここのドキュメントはそれをよく説明してい ます https://developers.google.com/places/documentation/autocomplete

// autocomplete search restriction (if required)
var options = {
    types: ['(regions)'],
    componentRestrictions: { country: "au" }
}

// create you autocomplete feild
var input = (document.getElementById('addresspicker'));
var autocomplete = new google.maps.places.Autocomplete(input, options);
var infowindow = new google.maps.InfoWindow();

// fired when an autocomplete option is selected or the input is submitted
google.maps.event.addListener(autocomplete, 'place_changed', function() {
    infowindow.close();
    var place = autocomplete.getPlace();

    // pull out the data you need

    ...

});

私もこれのために書いたいくつかの検証関数を持っています。さらにヘルプが必要な場合は、コメントしてください。リンクを追加します。

于 2013-04-24T09:40:32.773 に答える
0

私は同じ問題を抱えています。

getPlace() を呼び出したときに返される PlaceResult オブジェクトには、郵便番号が自動的に含まれることはありません。

選択した都市に関連付けられた郵便番号を取得するために、メインの gmap ジオコーディング サービスを呼び出します。

于 2013-05-23T16:49:41.990 に答える