2015-04-24 3 views
7

Я пытаюсь создать текстовое поле автозаполнения, которое должно содержать только почтовый индекс. Вот документация, я следовал: https://developers.google.com/places/webservice/autocomplete#place_typesАвтозаполнение Google Place для почтового кода

JSFiddle рабочий пример является here

Если я использую 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); 

ответ

9

documentation не очень ясен.

  • в (регионы) типа коллекции инструктирует свои места службы, чтобы вернуть любой результат сопоставления следующих типов:
    • локальности
    • sublocality
    • postal_code
    • страна
    • administrative_area_level_1
    • объявление ministrative_area_level_2
+0

вы абсолютно правы, я даже пытался «регионы», и она работала, но любая идея о том, как я могу ограничить это конкретно почтовый индекс? –

+1

Если документация интерпретируется так, как я указал в своем ответе, вы не сможете этого сделать. Если вы интерпретируете маркированный список как дополнительные «разрешенные» типы, тогда он должен работать сейчас. – geocodezip

+0

Включает ли он результаты со всеми этими типами или только по крайней мере один из них? – Jay

1

Я использовал postal_code тип компонента адреса.

Убедитесь, что вы включили мест библиотеку в сценарии URL, как:

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

рабочего примера

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

////////// ЧАСТЬ ОТ МОЕГО РАБОЧЕГО КОД
////////// Замените getByElementId на идентификаторы ваших форм

//// 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(""); 
    } 
0

Я знаю, что это немного старо, но ... Я думал, что должен поделиться своими знаниями и надеяться, что это поможет кому-то.

@geocodezip прав, вы не можете запросить Google только результаты почтового индекса. Однако вы можете запросить регионы и рассказать пользователю, когда они все испортили!

Это код, который я использую.Он использует 2 входа; адрес префикс (название дома/номер) и почтовый индекс

Требования:
DIV с 2 входами (для поиска).
Ниже этого, DIV контейнер, который содержит входы с ниже идентификаторы: (могут быть приставкой)

  • Адрес1
  • Адрес2
  • Город
  • County
  • Почтовый индекс
  • Страна

Каждый из моих пользователей Входы имеют класс «InputControl», поэтому я использую это в своей функции для очистки предыдущих значений.

Используя это

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", ""); 
} 

Основная функция

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(); 
} 

Вспомогательные функции

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(); }); }); 
} 

Если вы хотите кнопку (как я)

$("#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 }); 
}); 
Смежные вопросы