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 对象不会自动包含邮政编码，并且当它包含邮政编码时，它位于“administrative_area_level_2”字段中。

我现在正在调用主要的 gmap 地理编码服务，以获取与所选城市相关联的邮政编码。

于 2013-05-23T16:49:41.990 回答
0

我创建了一个名为 get postal code 的方法，它从地址选择器提供的结果中提取邮政编码。

地址选择器的基本设置和使用地址组件调用函数。

addressPicker.bindDefaultTypeaheadEvent($('#addresssearch'));

$(addressPicker).on('addresspicker:selected', function (event, result) {
    var postal_code = getPostalcode(result.placeResult.address_components);
  });

从地址组件中提取邮政编码的函数。


 function getPostalcode(address_components) {
    for(var i = 0; i < address_components.length; i++){
      if (address_components[i]['types'].includes("postal_code")) {
        var final_value = address_components[i]['long_name'];
      }
    }
    return final_value || ''

  }

如果没有可用的邮政编码，它将返回空字符串。

于 2021-03-30T00:33:10.290 回答