Javascript 邮政编码的 Google Place 自动完成功能

Google Place Autocomplete for Postal Code

提问by Rishi Kulshreshtha

I'm trying to create an autocomplete text box which should only provide the postal code. Here is the documentation which I have followed: https://developers.google.com/places/webservice/autocomplete#place_types

我正在尝试创建一个应仅提供邮政编码的自动完成文本框。这是我遵循的文档：https: //developers.google.com/places/webservice/autocomplete#place_types

JSFiddle working example is here

JSFiddle 工作示例在这里

If I'm using the postal_codeits not working for me, but when I'm using the citiesits fine. What should I do for achieving an autocomplete with only postal codes?

如果我使用postal_code它对我不起作用，但是当我使用cities它时很好。我应该怎么做才能实现仅使用邮政编码的自动完成？

function postal_code() {
  var input = document.getElementById('field-postal');
  var options = {
    types: ['(postal_code)'],
    componentRestrictions: {
      country: "in"
    }
  }
  var autocomplete = new google.maps.places.Autocomplete(input, options);
}

google.maps.event.addDomListener(window, 'load', postal_code);

回答by geocodezip

The documentationisn't very clear.

该文件是不是很清楚。

• the (regions) type collection instructs the Places service to return any result matching the following types:
  • locality
  • sublocality
  • postal_code
  • country
  • administrative_area_level_1
  • administrative_area_level_2

• (region) 类型集合指示 Places 服务返回与以下类型匹配的任何结果：
  • 地方
  • 次区域性
  • 邮政编码
  • 国家
  • 行政区域_级别_1
  • 行政区域_级别_2

• '(postal_code)'won't work (that is incorrect).
• 'postal_code'doesn't work either.
• '(regions)'works and includes postal_code type results

• '(postal_code)'不会工作（这是不正确的）。
• 'postal_code'也不起作用。
• '(regions)'有效并包括 postal_code 类型的结果

回答by Yergalem

I used postal_codeaddress component type.

我使用了postal_code地址组件类型。

Make sure you included the placeslibrary in your script url as:

确保你 在你的脚本 url 中包含了Places库：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCBbt5ueucPc0u9VQDb8wFvFigV90PpTQA&libraries=places&callback=initEditClntInfoAutoComplete"    async defer>  </script>

Working Example

工作示例

https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete

////////// PART FROM MY WORKING CODE
////////// Replace getByElementId with your form input IDs

////////// 部分来自我的工作代码
////////// 将 getByElementId 替换为您的表单输入 ID

  ////  Global Vars

  var  editClntInfoAutocomplete, addrStreet ="",
       addressComponets = {
                    street_number: 'short_name',
                    route: 'long_name',
                    locality: 'long_name',
                    administrative_area_level_1: 'short_name',
                    country: 'long_name',
                    postal_code: 'short_name'
       };

function initEditClntInfoAutoComplete() {   // Callback  

      editClntInfoAutocomplete = new google.maps.places.Autocomplete(
            /** @type {!HTMLInputElement} */(document.getElementById('clntInfoEditAddr1')),
            {types: ['geocode']});

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

    function fillInEditClntInfoAddress() {

        var place = editClntInfoAutocomplete.getPlace();        

            clearPrevEditFrmAddrVals();

        for ( var i = 0; i < place.address_components.length; i++) {

              var addressType = place.address_components[i].types[0]; 
              if (  addressComponets[addressType] ) {
                    var val = place.address_components[i][addressComponets[addressType]];                 

                    assignEditFrmAddrFieldsVal(addressType, val );
              }

         }

           if( addrStreet != "")
                 document.getElementById("clntInfoEditAddr1").value = addrStreet;

     }

     function assignEditFrmAddrFieldsVal( addressType , val ) {

            switch( addressType ) {
                case "administrative_area_level_1":
                        document.getElementById("clntInfoEditState").value = val;  break;
                case "locality":
                    document.getElementById("clntInfoEditCity").value = val;  break;
                //   case "country":
                //        document.getElementById("addressType").value = val;  break;
                case "postal_code":
                    document.getElementById("clntInfoEditZip").value = val;  break;  
                case "street_number": 
                case "route":     
                    addrStreet += " "+val;      break;

            }

     }

     function clearPrevEditFrmAddrVals(){
         var editClntFrmAddrIDs = ["clntInfoEditState","clntInfoEditCity","clntInfoEditZip","clntInfoEditAddr1"];
             addrStreet = "";

         for( var frmID in editClntFrmAddrIDs )
              wrap(editClntFrmAddrIDs[frmID]).val("");
     }

回答by glenn223

I know this is a little old but... I thought I should share my knowledge and hope it helps someone.

我知道这有点旧但是......我想我应该分享我的知识并希望它可以帮助某人。

@geocodezip is right, you can't specifically request Google to return only postcode results. However, you can request regions and tell the user when they've messed it all up!

@geocodezip 是对的，您不能专门要求 Google 仅返回邮政编码结果。但是，您可以请求区域并在用户搞砸时告诉用户！

This is the code I use. It uses 2 inputs; an address prefix (house name/number) and postcode

这是我使用的代码。它使用 2 个输入；地址前缀（房屋名称/号码）和邮政编码

Requirements:
A div with 2 inputs (for searching).
Below that, a div container which contains inputs with the below id's: (these can be prefixed)

要求：
带有 2 个输入的 div（用于搜索）。
在此之下，一个 div 容器包含具有以下 id 的输入：（这些可以带有前缀）

• Address1
• Address2
• City
• County
• Postcode
• Country

• 地址1
• 地址2
• 城市
• 县
• 邮政编码
• 国家

Each of my user inputs has the class "InputControl", so I use this in my function to clear previous values.

我的每个用户输入都有“InputControl”类，所以我在我的函数中使用它来清除以前的值。

Using it

使用它

var autoAddr;

function initAutocomplete() {
    autoAddr = new google.maps.places.Autocomplete(document.getElementById('AddressSearchField'), { types: ['(regions)'] });
    autoAddr.addListener('place_changed', FillInAddress);
}
function FillInAddress() {
    GooglePlacesFillAddress(autoAddr, "#AddressCont", "");
}

The main function

主要功能

function GooglePlacesFillAddress(Place, ContainerId, AddressPrefix) {
    var
        place = Place.getPlace(),
        arr = ['premise', 'route', 'locality', 'postal_town', 'administrative_area_level_2', 'postal_code', 'country'],
        dict = {},
        adr = $(ContainerId).find("#" + AddressPrefix + "Address1"),
        switched = false,
        switchedAgain = false,
        searchAgain = $("<p id=\"" + AddressPrefix + "AddressSearchAgain\"><a href=\"javascript:void(0)\" class=\"Under\">I would like to search again</a></p>"),
        asc = $("#" + AddressPrefix + "AddressSearchCont"),
        adressPrefixValue = $("#" + AddressPrefix + "AddressSearchPrefixField").val().trim();

    SlideShow(ContainerId),
    $(ContainerId).find("input.InputControl").val(''),
    asc.find("#" + AddressPrefix + "AddressSearchField, #" + AddressPrefix + "AddressSearchPrefixField").attr("disabled", "disabled"),
    asc.find("#" + AddressPrefix + "AddressSearchFieldButton").addClass("disabled"),
    asc.find("#" + AddressPrefix + "AddressSearchPrefixField").after(searchAgain),
    searchAgain.on("click", function () {
        $(this).remove(),
        asc.find("#" + AddressPrefix + "AddressSearchField, #" + AddressPrefix + "AddressSearchPrefixField").removeAttr("disabled").val(''),
        asc.find("#" + AddressPrefix + "AddressSearchFieldButton").removeClass("disabled"),
        asc.find("#" + AddressPrefix + "AddressSearchPrefixField").focus();
    });

    if (place.address_components && place.address_components.length)
        for (var i = 0; i < place.address_components.length; i++)
            for (var j = 0; j < place.address_components[i].types.length; j++)
                if ($.inArray(place.address_components[i].types[j], arr) >= 0)
                    dict[place.address_components[i].types[j]] = place.address_components[i]["long_name"];

    $(ContainerId).find("#" + AddressPrefix + "City").val(dict["postal_town"] || '');
    $(ContainerId).find("#" + AddressPrefix + "County").val(dict["administrative_area_level_2"] || '');
    $(ContainerId).find("#" + AddressPrefix + "Postcode").val(dict["postal_code"] || '');
    $(ContainerId).find("#" + AddressPrefix + "Country").val(dict["country"] || 'United Kingdom');

    var isPostal = false;
    if (place.types && place.types.length)
        if ($.inArray("postal_code", place.types) >= 0 && $.inArray("postal_code_prefix", place.types) < 0)
            isPostal = true;

    // Add street number
    InputAdder(adr, adressPrefixValue, true);

    // Add premise
    if (adressPrefixValue.length == 0 || adr.val().length + (dict["premise"] || '').length > 100)
        adr = $(ContainerId).find("#" + AddressPrefix + "Address2"), switched = true;
    InputAdder(adr, (dict["premise"] || ''), true);

    // Add route
    if (adr.val().length + (dict["route"] || '').length > 100) {
        adr = $(ContainerId).find("#" + AddressPrefix + (switched ? "City" : "Address2"));
        if (switched)
            switchedAgain = true;
        else
            switched = true;
    }
    InputAdder(adr, (dict["route"] || ''), !switchedAgain, adressPrefixValue.length > 0 && adr.val() == adressPrefixValue);

    // Add locality
    InputAdder(switched ? adr : $(ContainerId).find("#" + AddressPrefix + "Address2"), (dict["locality"] || ''), !switchedAgain);

    if (!isPostal)
        WriteBorderedBox(false, ContainerId, "The postcode provided doesn't appear to be complete/valid. Please confirm the below address is correct."),
        $(ContainerId).find("#" + AddressPrefix + "Address1").focus();
}

Helper functions

辅助函数

function InputAdder(Obj, Text, Post, DontAddComma) {
    if (Obj && Text.length > 0) {
        var
            i = Obj.val().trim() || '',
            comma = !!DontAddComma ? "" : ",";

        Obj.val(
            (Post && i.length > 0 ? i + comma + ' ' : '') +
            Text.trim() +
            (!Post && i.length > 0 ? comma + ' ' + i : ''));
    }
}
function WriteBorderedBox(outcome, identifier, text) {
    var
        box = $("<div class=\"Bordered" + (outcome ? "Success" : "Error") + "\"><p>" + text + "</p></div>");
    $(identifier).before(box);
    box.hide().slideDown(function () { $(this).delay(6000).slideUp(function () { $(this).remove(); }); });
}

If you want a button(like me)

如果你想要一个按钮（像我一样）

$("#AddressSearchFieldButton").click(function (e) {
    var input = document.getElementById("AddressSearchField");

    google.maps.event.trigger(input, 'focus')
    google.maps.event.trigger(input, 'keydown', { keyCode: 40 });
    google.maps.event.trigger(input, 'keydown', { keyCode: 13 });
});