Autocomplete Spanien

Übersicht

ParameterQuery-String

Antworten

{
  "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"
}

Fehler

{
  "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"
    }
  ]
}

Codebeispiele

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

Wir ermutigen Sie, Beispielcode in der von Ihnen bevorzugten Sprache anzufordern.

Schritt für Schritt

Richten Sie ein Schnellformular ein, um die Spanien Autocomplete-Funktionalität auszuprobieren, indem Sie die folgenden Schritte ausführen.

1. Erstellen der HTML-Seite

   Wir beginnen mit der Erstellung einer leeren HTML-Seite, die eine minimale Webseitenstruktur enthält. Erstellen Sie eine neue Datei .html mit dem Namen pro6pp_spanien_autocomplete.html. Fügen Sie den folgenden Code zwischen den Tags <body> und </body> hinzu. Es fügt die Eingabefelder für die Adresseingabe hinzu.

   pro6pp_spanien_autocomplete.htmlKopieren

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

   Vollständigen Code anzeigen

2. Interaktion hinzufügen

   Fügen Sie den folgenden JavaScript-Code in eine separate pro6pp_spanien_autocomplete.js-Datei ein. Die IDs und Klassennamen der HTML-Elemente sollten mit den in dieser JavaScript-Datei angegebenen übereinstimmen, um die richtigen Ergebnisse zu erhalten.

   pro6pp_spanien_autocomplete.jsKopieren

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

   Vollständigen Code anzeigen

3. Umsetzung in die Praxis

   Verknüpfen Sie die JavaScript-Datei innerhalb des pro6pp_spanien_autocomplete.html direkt vor dem Schließen des </body>-Tags.

   pro6pp_spanien_autocomplete.htmlKopieren

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

   Um auf den Pro6PP-Webdienst zuzugreifen, müssen Sie Ihren persönlichen Autorisierungsschlüssel anfordern. Dieser Schlüssel wird Ihnen direkt nach der Anmeldung per E-Mail zugeschickt. Ersetzen Sie den obigen Platzhalter AUTH_KEY durch Ihren persönlichen Autorisierungsschlüssel.

   Wenn Sie noch kein Konto haben, melden Sie sich für einen kostenlosen 2 Monate Test an. Nachdem Sie Ihr Konto erstellt haben, gehen Sie zu Ihren Abonnementdetails und kopieren Sie Ihren AUTH_KEY. Sie benötigen diesen Schlüssel, um Ihre Anfragen zu authentifizieren.

4. In Aktion sehen

   Wenn Sie die vorherigen Schritte abgeschlossen haben, ist es an der Zeit, das Formular lokal in Ihrem Browser auszuführen. Sie sollten nun zwei Dateien im selben Ordner auf Ihrem Computer haben:

   • pro6pp_spanien_autocomplete.html - die HTML-Seite mit dem Formular.
   • pro6pp_spanien_autocomplete.js - die JavaScript-Datei, die die Interaktion steuert.

   Sie können die HTML-Datei nun in Ihrem Browser öffnen, indem Sie einfach in Ihrem Datei-Explorer (z. B. Finder unter macOS oder Datei-Explorer unter Windows) auf die Datei doppelklicken. Alternativ können Sie die Datei auch manuell im Browser mit dem vollständigen file:///-Pfad öffnen. Zum Beispiel:

   Beispiel für DateipfadeKopieren

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

   Sobald die Seite geöffnet ist, geben Sie die Daten in die Formularfelder ein und klicken Sie auf Senden, um die API-Antwort im Abschnitt „Vollständige Antwort“ anzuzeigen.