Google 地点 API - 自动完成 - 如何在字段中填写邮政编码？

Question

除邮政编码外，所有字段都工作正常。我已经将脚本与 Formidable Forms（wordpress 插件）集成在一起。脚本似乎适用于其他领域，但 postal_code 有问题。有人可以查看代码并指导如何解决此问题
您可以在此处查看表格：https://connecteddesigns.org/marco/texas
脚本来源：https://gist.github.com/VanLuda/b2b6fe9047bbf57d5092092b4efc7c98

<script>
      // This example displays an address form, using the autocomplete feature
      // of the Google Places API to help users fill in the information.

      // This example requires the Places library. Include the libraries=places
      // parameter when you first load the API. For example:
      // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

      var placeSearch, autocomplete;
      var componentForm = {
        street_number: 'short_name',
        route: 'long_name',
        locality: 'long_name',
        administrative_area_level_1: 'short_name',
        country: 'long_name',
        postal_code: 'short_name'
      };

      function initAutocomplete() {
        // Create the autocomplete object, restricting the search to geographical
        // location types.
        autocomplete = new google.maps.places.Autocomplete(
            /** @type {!HTMLInputElement} */(document.getElementById('field_autocomplete')),
            {
            types: ['geocode'],
            componentRestrictions: {country: 'us'}//Country Abbreviation
            });

        // When the user selects an address from the dropdown, populate the address
        // fields in the form.
        autocomplete.addListener('place_changed', fillInAddress);
      }

      function fillInAddress() {
        // Get the place details from the autocomplete object.
        var place = autocomplete.getPlace();

        // Get each component of the address from the place details
        // and fill 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('field_' + addressType).value = val;
          }
        }
      }

      // Bias the autocomplete object to the user's geographical location,
      // as supplied by the browser's 'navigator.geolocation' object.
      function geolocate() {
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            var geolocation = {
              lat: position.coords.latitude,
              lng: position.coords.longitude
            };
            var circle = new google.maps.Circle({
              center: geolocation,
              radius: position.coords.accuracy
            });
            autocomplete.setBounds(circle.getBounds());
          });
        }
      }
    </script>

    <script src="https://maps.googleapis.com/maps/api/js?key=APIKEYHERE&libraries=places&callback=initAutocomplete" async defer></script>

Answer 1

我的做法与此类似，似乎对我有用。看看这里的一些变化

var componentForm = {
    'street_number': 'short_name',
    'route': 'long_name',
    'locality': 'long_name',
    'administrative_area_level_1': 'short_name',
    'country': 'long_name',
    'postal_code': 'short_name'
};

function initAutocomplete() {
    // Create the autocomplete object, restricting the search to geographical
    // location types.
    autocomplete = new google.maps.places.Autocomplete((document.getElementById('field_autocomplete')),
        {
            types: ['geocode']
        }
    );

    // When the user selects an address from the dropdown, populate the address
    // fields in the form.
    autocomplete.addListener('place_changed', fillInAddress);
    //restrict the country
    autocomplete.setComponentRestrictions({'country': 'US'});
}

我在 addListener 之后而不是在呈现自动完成元素时设置了国家/地区限制。以及通过 CAPITAL 国家代码

Google 地点 API - 自动完成 - 如何在字段中填写邮政编码？

Google Place API - autocomplete - how to populate ZIP-code in field?

javascript

google-places-api