Question

我想通过自动完成的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>

提前致谢.......

Answer 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

    ...

});

我也为此写了一些验证功能。如果您需要更多帮助，请发表评论并添加链接。

Answer 2

我有同样的问题。

当调用getPlace（）并不自动包含Zipcode时，PlaceResult objet返回，当它执行时，它在“administrative_area_level_2”字段中。

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

Answer 3

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

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

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

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

从地址组件中提取 postal_code 的函数。


 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 || ''

  }

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

自动填写google map api用于仅通过addresspicker查找邮政编码

3 个答案: