Установить почтовый индекс / ZIP из Google Auto Complete - PullRequest
Новая
       96

Установить почтовый индекс / ZIP из Google Auto Complete

0 голосов
/ 27 сентября 2019

Я пытаюсь написать код, который при вводе адреса в текстовое поле показывает адрес, а затем сокращается до почтового индекса - очень похоже на 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, он не показывает почтовый индекс (и это все, что я хочу).Есть ли способ получить почтовый индекс с автозаполнения адреса.

[1]: https://i.stack.imgur.com/MXO8y.gif

1 Ответ

1 голос
/ 29 сентября 2019

В настоящее время невозможно фильтровать прогнозы автозаполнения только по почтовым индексам.Взгляните на этот открытый запрос функции в системе отслеживания проблем Google.

Но вы можете выбрать для отображения только почтовый индекс для выбранного места в окне поиска, вместо этогополного адреса.В вашем примере вы можете изменить прослушиватель 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 в качестве единственного значения, то есть M7.

Аналогичным образом, если вы начнете вводить полный почтовый индекс, например, «M7 3PP», вы получите Nevile Road, Salford M7 3PP, UK предложение места, и выбор его даст вам M7 3PP.

Однако обратите внимание, чтоэто не всегда будет работать, так как есть много адресов, которые не имеют одного, определенного почтового индекса.Например, «Лондон, Великобритания» вообще не возвращает никакого почтового индекса (как, очевидно, не может).

Надеюсь, это поможет!

...