Foreslå Schweiz Gade Trin for trin

Suggest a Swiss address.

Bemærk: Dette er dokumentationen for v2-API'en, som stadig er i beta.

Opret en hurtig formular for at afprøve Schweizisk Suggest -funktionaliteten ved at følge nedenstående trin.

Trin 1: opbyg HTML-siden

Vi starter med at oprette en tom HTML-side, der indeholder en minimal websidestruktur.

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

Tilføj følgende kode mellem <body> og </body> tags.

Den tilføjer inputfelter til indtastning af adressen.

Trin 2: Tilføj interaktion

Tilføj følgende JavaScript-kode i en separat .js fil. HTML-elementernes ID'er og klassenavne skal stemme overens med dem, der er angivet i denne JavaScript-fil, for at få de korrekte resultater.

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

Trin 3: Få det til at fungere

Link JavaScript-filen inde i .html lige før du lukker </body> tagget. Erstat {filnavn} med det faktiske navn på din JavaScript-fil.

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

For at få adgang til Pro6PP-webservicen skal du anmode om din personlige autorisationsnøgle. Denne nøgle sendes til dig via e-mail lige efter tilmelding.

Erstat ovenstående pladsholder AUTH_KEY med din personlige autorisationsnøgle.