Question

我正在尝试编写代码，当我在文本框中输入地址时，它会显示该地址，然后将其缩短为仅邮政编码，就像下面的gif一样。

通过该链接进入，但似乎不起作用-但在正确的位置 https://www.aspforums.net/Threads/647425/Set-Postal-Code-in-TextBox-from-Google-Place-Autocomplete-result-selection-using-JavaScript/

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />




  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>


 <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=key&amp;libraries=places"></script>

<script>
  google.maps.event.addDomListener(window, 'load', initialize);
    function initialize() 
    {
     var input = document.getElementById('autocomplete_search');
     var options = 
     {
         componentRestrictions: {country: 'gb'}
     };
     var autocomplete = new google.maps.places.Autocomplete(input, options);

      var input = document.getElementById('autocomplete_search');
      //var autocomplete = new google.maps.places.Autocomplete(input);
      autocomplete.addListener('place_changed', function () {
      var place = autocomplete.getPlace();

      // place variable will have all the information you are looking for.
      $('#lat').val(place.geometry['location'].lat());
      $('#long').val(place.geometry['location'].lng());
    });
  }
</script>


  <title>Google Places Autocomplete InputBox Example Without Showing Map - Tutsmake.com</title>
 <style>
    .container{
    padding: 10%;
    text-align: center;
   } 
 </style>
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-12"><h2>Google Places Autocomplete InputBox Example Without Showing Map</h2></div>
        <div class="col-12">
            <div id="custom-search-input">
                <div class="input-group">
                    <input id="autocomplete_search" name="autocomplete_search" type="text" class="form-control" placeholder="Search" />
                    <input type="hidden" name="lat">
                    <input type="hidden" name="long">
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

输入诸如Nevile Road之类的地址时，它不显示邮政编码（这就是我想要的全部）。有没有办法从自动填充地址中获取邮政编码。

Answer 1

当前无法仅在邮政编码上过滤“放置自动完成”预测。在Google的问题跟踪器中查看this open feature request。

但是您可以选择在搜索框中仅显示所选位置的邮政编码，而不显示完整地址。在您的示例中，您可以如下更改place_changed侦听器：

    autocomplete.addListener('place_changed', function() {
      var place = autocomplete.getPlace();

      $('#lat').val(place.geometry['location'].lat());
      $('#long').val(place.geometry['location'].lng());

      let postcode;
      for (let i = 0; i < place.address_components.length; i++) {
        let types = place.address_components[i].types;
        for (let type of types) {
          if (type === "postal_code") {
            postcode = place.address_components[i].long_name;
          }
        }
      }
      if (!postcode) {
        postcode = place.formatted_address;
      }
      $('#autocomplete_search').val(postcode);
    });

工作jsfiddle（添加您的API密钥以运行它）。

通过上述代码实现，现在，如果您在文本字段中输入“ Nevile Road”，并选择首位预测Nevile Road, Salford, UK，您将获得其postal_code_prefix作为唯一值，即M7。

同样，如果您开始输入完整的邮政编码，例如“ M7 3PP”，您会收到一个Nevile Road, Salford M7 3PP, UK的位置建议，选择它会给您M7 3PP。

但是，请注意，由于许多地址没有一个特定的邮政编码，因此这将无法始终有效。例如。 “英国伦敦”根本不会返回任何邮政编码（因为显然不会）。

希望这会有所帮助！

设置Google自动完成的邮政编码/邮政编码

1 个答案: