Google 在不同的输入字段中放置 API 自动完成邮政编码

Question

我的网站上有 2 个输入字段，一个用于客户的完整地址，另一个用于邮政编码。出于数据库原因，我需要将其作为 2 个不同的输入字段。我想在我的网站上自动完成。我已经能够在 Google 个地方 API 工作。但我希望它自动完成一个输入字段中的地址并自动完成另一字段中的邮政编码。

怎么做？

这是我的代码当前代码。

$(document).ready(function() {
    var autocompleteFrom;
    autocompleteFrom = new google.maps.places.Autocomplete((document.getElementById('fromInput')), {
        types: ['address'],
        componentRestrictions: {
            country: 'dk'
        }
    });

Answer 1

相关问题：

Getting Postcode From Google Map Search

Google Maps Javascript API v3 文档中有一个相关示例，可以对其进行修改以仅从自动完成响应中获取邮政编码：Place Autocomplete Address Form

更改 component_form 对象以仅包含 postal_code:

var componentForm = {
  postal_code: 'short_name'
};

然后在 place_changed 事件触发时调用 fillInAddress 函数：

autocompleteFrom.addListener('place_changed', fillInAddress);

proof of concept fiddle

代码片段：

$(document).ready(function() {
  var autocompleteFrom;
  var placeSearch;

  var componentForm = {
    postal_code: 'short_name'
  };
  autocompleteFrom = new google.maps.places.Autocomplete((document.getElementById('fromInput')), {
    types: ['address'],
    componentRestrictions: {
      country: 'dk'
    }
  });
  // When the user selects an address from the drop-down, populate the
  // address fields in the form.
  autocompleteFrom.addListener('place_changed', fillInAddress);

  function fillInAddress() {
    // Get the place details from the autocomplete object.
    var place = autocompleteFrom.getPlace();
    console.log(place);
    for (var component in componentForm) {
      document.getElementById(component).value = '';
      document.getElementById(component).disabled = false;
    }

    // Get each component of the address from the place details,
    // and then fill-in the corresponding field on the form.
    for (var i = 0; i < place.address_components.length; i++) {
      var addressType = place.address_components[i].types[0];
      if (componentForm[addressType]) {
        var val = place.address_components[i][componentForm[addressType]];
        document.getElementById(addressType).value = val;
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>address</label><input id="fromInput" /><br />
<label>postal code</label><input id="postal_code" />
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places"></script>

Google 在不同的输入字段中放置 API 自动完成邮政编码

Google Places API autocomplete zipcode in different input field

javascript

google-maps

google-maps-api-3

google-places-api

googleplacesautocomplete