2015-04-24 18 views
7

Sto tentando di creare una casella di testo con completamento automatico che dovrebbe fornire solo il codice postale. Ecco la documentazione che ho seguito: https://developers.google.com/places/webservice/autocomplete#place_typesCompletamento automatico di Google Place per il codice postale

JSFiddle esempio di lavoro è here

Se sto usando il postal_code sua non funziona per me, ma quando sto usando il cities la sua fine. Cosa devo fare per ottenere un completamento automatico con solo i codici postali?

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

risposta

9

Il numero documentation non è molto chiaro.

  • le (regioni) di tipo collezione istruisce Luoghi del servizio per restituire alcun risultato corrispondere le seguenti tipologie:
    • localita
    • sublocality
    • postal_code
    • paese
    • administrative_area_level_1
    • ad ministrative_area_level_2
+0

si è assolutamente corretto Ho anche cercato di 'regioni' e ha funzionato, ma qualche idea su come posso limitare questo specificamente per il codice postale? –

+1

Se la documentazione viene interpretata come indicato nella mia risposta, non sarebbe possibile farlo. Se interpreti l'elenco puntato come tipi "permessi" aggiuntivi, dovrebbe funzionare ora. – geocodezip

+0

Include risultati con tutti questi tipi o solo uno di essi? – Jay

1

ho usato postal_code tipo di componente di indirizzo.

assicurarsi che includeva il luoghi libreria nel vostro URL script come:

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

Esempio di lavoro

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

PARTE ////////// dal mio codice LAVORO
////////// Sostituisci getByElementId con gli ID di immissione modulo

//// 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

So che questo è un po 'vecchio ma ... Ho pensato che dovrei condividere le mie conoscenze e spero che aiuti qualcuno.

@geocodezip ha ragione, non è possibile richiedere specificamente a Google di restituire solo i risultati del codice postale. Tuttavia, puoi richiedere le regioni e avvisare l'utente quando ha incasinato tutto!

Questo è il codice che uso.Usa 2 ingressi; un prefisso di indirizzo (nome della casa/numero) e codice postale

Requisiti:
un div con 2 ingressi (per la ricerca).
Sotto, un contenitore div che contiene ingressi con il seguito id: (questi possono essere preceduti)

  • Address1
  • Indirizzo2
  • Città
  • County
  • CAP
  • Paese

Ciascun mio utente input ha la classe "InputControl", quindi lo uso nella mia funzione per cancellare i valori precedenti.

Con esso

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

La funzione principale

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

funzioni di supporto

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

Se si desidera che un pulsante (come 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 }); 
}); 
Problemi correlati