从 Google 自动完成设置邮政编码/邮政编码答案

【问题标题】：Set Postcode/ZIP From Google Auto Complete从 Google 自动完成设置邮政编码/邮政编码
【发布时间】：2020-01-27 09:25:11
【问题描述】：

我正在尝试代码，当我在文本框中输入地址时，它会显示地址然后缩短为仅邮政编码 - 很像下面的 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>

当输入像 Neville Road 这样的地址时，它不显示邮政编码（这就是我想要的）。有没有办法从自动完成地址获取邮政编码。

【问题讨论】：

标签： javascript html google-maps google-maps-api-3 google-places-api

【解决方案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);
    });

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

通过上面的代码实现，现在如果你在文本字段中输入“Nevile Road”，并选择第一名预测，Nevile Road, Salford, UK，你将得到它的postal_code_prefix作为唯一值，即@987654327 @。

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

但是，请注意，这并不总是有效，因为有许多地址没有单一的特定邮政编码。例如。 “London, UK”根本不会返回任何邮政编码（因为它显然不能）。

希望这会有所帮助！

【讨论】：