Autocomplete Spagna

Panoramica

ParametriQuery string

Risposte

{
  "addressId": "13.PV.MUN_280790852100",
  "buildingName": null,
  "country": "Spain",
  "countryCode": "ES",
  "lat": 40.42575,
  "lng": -3.68961,
  "municipality": "Madrid",
  "postalCode": "28001",
  "premise": "A",
  "province": "Madrid",
  "settlement": "Madrid",
  "state": "Comunidad de Madrid",
  "street": "Calle goya",
  "streetNumber": "1"
}

Errori

{
  "error_id": "MISSING_PARAMETER",
  "errors": [
    {
      "message": "Required parameter premise is missing. This address needs a premise alongside with the specified streetNumber: 1. Available premises for this address: a, b",
      "help": "https://pro6pp.nl/docs/v2/redoc",
      "parameter": [
        "premise",
        [
          "a",
          "b"
        ]
      ]
    }
  ]
}

{
  "error_id": "INVALID_VALUE",
  "errors": [
    {
      "message": "value is invalid",
      "help": "https://pro6pp.nl/docs/v2/redoc",
      "parameter": "postalCode",
      "value": "invalid"
    }
  ]
}

{
  "error_id": "UNAUTHORIZED",
  "errors": [
    {
      "message": "No authorization token provided",
      "help": "https://pro6pp.nl/docs/v2/redoc#section/Authentication"
    }
  ]
}

{
  "error_id": "NO_RESULTS_FOUND",
  "errors": [
    {
      "message": "No results found",
      "help": "https://pro6pp.nl/docs/v2/redoc"
    }
  ]
}

Esempi di codice

curl "https://api.pro6pp.nl/v2/autocomplete/es?postalCode=28001&settlement=Madrid&street=Calle+goya&streetNumber=1&premise=A&authKey=YOUR_API_KEY"

La invitiamo a richiedere codice di esempio nel linguaggio di programmazione che preferisce.

Passo dopo passo

Seguendo i passaggi seguenti, crei un semplice modulo per provare la funzionalità Spagna Autocomplete.

1. Creare la pagina HTML

   Iniziamo creando una pagina HTML vuota con una struttura web minima. Crei un nuovo file .html denominato pro6pp_spagna_autocomplete.html. Aggiunga il seguente codice tra i tag <body> e </body>. Questo codice aggiunge i campi di input per l'inserimento dell'indirizzo.

   pro6pp_spagna_autocomplete.htmlCopi

   <form class="form" id="form">
     <div>Call</div>
     <div>
       <label for="postalCode">postalCode:</label>
       <input id="postalCode" class="postalCode" placeholder="28001"/>
       <label for="settlement">settlement:</label>
       <input id="settlement" class="settlement" placeholder="Madrid"/>
       <label for="street">street:</label>
       <input id="street" class="street" placeholder="Calle goya"/>
       <label for="streetNumberAndPremise">streetNumberAndPremise:</label>
       <input id="streetNumberAndPremise" class="streetNumberAndPremise" placeholder=""/>
       <label for="streetNumber">streetNumber:</label>
       <input id="streetNumber" class="streetNumber" placeholder="1"/>
       <label for="premise">premise:</label>
       <input id="premise" class="premise" placeholder="A"/>
       <label for="addressId">addressId:</label>
       <input id="addressId" class="addressId" placeholder="" readonly/>
     </div>
     <div>
       <span style="color: red" class="message"></span>
     </div>
     <div>
       <button type="submit">Submit</button>
     </div>
     <br />
     <div>Response</div>
     <br />
     <div>Full Response</div>
     <pre class="jsonResponse"></pre>
   </form>

   Mostri il codice completo

2. Aggiungere l'interazione

   Aggiunga il seguente codice JavaScript in un file separato pro6pp_spagna_autocomplete.js. Gli IDs e i nomi delle classi (Class) degli elementi HTML devono corrispondere a quelli indicati in questo file JavaScript per ottenere i risultati corretti.

   pro6pp_spagna_autocomplete.jsCopi

   document.addEventListener("DOMContentLoaded", function() {
       const pro6ppAuthKey = "AUTH_KEY"; // Replace with your actual authorization key
   
       let messageSpan = document.querySelector(".message");
       let jsonResponseSpan = document.querySelector(".jsonResponse");
       const BASE_URL = "https://api.pro6pp.nl/v2";
   
       function fetchAddress(authKey) {
           const queryParams = {
               authKey: authKey
           };
           const optionalQueryParams = [
               "postalCode",
               "settlement",
               "street",
               "streetNumberAndPremise",
               "streetNumber",
               "premise",
               "addressId",
           ];
           for (const name of optionalQueryParams) {
               const value = document.getElementById(name).value;
               if (value !== "") {
                   queryParams[name] = value;
               }
           }
   
           let encodedUrl = new URL(`${BASE_URL}/autocomplete/es`);
           encodedUrl.search = new URLSearchParams(queryParams);
   
           fetch(encodedUrl)
               .then(async (response) => {
                   const data = await response.json();
                   if (data) {
                       messageSpan.textContent = "";
                       jsonResponseSpan.textContent = JSON.stringify(data, null, 2);
                   }
               })
               .catch((error) => {
                   console.error("Error fetching: ", error);
                   messageSpan.textContent = error.message;
               });
       }
   
       const form = document.getElementById("form");
       form.onsubmit = function (event) {
           event.preventDefault();
           fetchAddress(pro6ppAuthKey);
       }
   });

   Mostri il codice completo

3. Farlo funzionare

   Colleghi il file JavaScript all'interno di pro6pp_spagna_autocomplete.html subito prima del tag di chiusura </body>.

   pro6pp_spagna_autocomplete.htmlCopi

     ...
     <script src="pro6pp_spagna_autocomplete.js"></script>
    </body>
   </html>

   Per accedere al servizio web Pro6PP è necessario richiedere la Sua chiave di autorizzazione personale. La chiave Le viene inviata via e-mail subito dopo la registrazione. Sostituisca il segnaposto AUTH_KEY indicato sopra con la Sua chiave di autorizzazione personale.

   Se non ha ancora un account, si registri per una prova gratuita di 2 mesi. Dopo aver creato l'account, vada in Dettagli abbonamento e copi la Sua AUTH_KEY. Questa chiave Le servirà per autenticare le Sue richieste.

4. Vederlo in azione

   Una volta completati i passaggi precedenti, è il momento di eseguire il modulo in locale nel Suo browser. Ora dovrebbe avere due file nella stessa cartella del Suo computer:

   • pro6pp_spagna_autocomplete.html - la pagina HTML con il modulo.
   • pro6pp_spagna_autocomplete.js - il file JavaScript che gestisce l'interazione.

   Ora può aprire il file HTML nel Suo browser semplicemente facendo doppio clic su di esso nel gestore file (ad es. Finder su macOS o File Explorer su Windows). In alternativa, può aprirlo manualmente nel browser utilizzando il percorso completo file:///. Ad esempio:

   Percorsi file di esempioCopi

   file:///C:/Users/YourName/Documents/pro6pp_spagna_autocomplete.html
   file:///Users/yourname/Desktop/pro6pp_spagna_autocomplete.html

   Una volta aperta la pagina, inizi a digitare nei campi del modulo e prema Submit per visualizzare la risposta dell'API nella sezione "Full Response".