Vorschlagen Schweiz Straße Schritt für Schritt

Suggest a Swiss address.

Hinweis: Dies ist die Dokumentation für die v2-API, die sich noch im Beta-Stadium befindet.

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

Schritt 1: Erstellen der HTML-Seite

Wir beginnen mit der Erstellung einer leeren HTML-Seite, die eine minimale Webseitenstruktur enthält.

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="UTF-8" />
      <title>Schweizerisch Suggest tutorial</title>
    </head>
    <body></body>
  </html>

Fügen Sie den folgenden Code zwischen den Tags <body> und </body> hinzu.

Es fügt die Eingabefelder für die Adresseingabe hinzu.

Schritt 2: Interaktion hinzufügen

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

JavaScript

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 = { 
            street: document.getElementById("street").value,
            postalCode: document.getElementById("postalCode").value,
            settlement: document.getElementById("settlement").value,
            maxResults: document.getElementById("maxResults").value,
            cursor: document.getElementById("cursor").value,
            authKey: authKey 
        };

        let encodedUrl = new URL(`${BASE_URL}/suggest/ch/street`);
        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);
    }
});

Schritt 3: Umsetzung in die Praxis

Verknüpfen Sie die JavaScript-Datei innerhalb der .html direkt vor dem Schließen des Tags </body>. Ersetzen Sie {filename} durch Ihren tatsächlichen JavaScript-Dateinamen.

<script src="{filename}.js"></script>

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.