Afstand (lige linje) Schweiz Trin for trin

Return driving distance and time between two Swiss postcodes.

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

Opret en hurtig formular for at afprøve Schweizisk Distance -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 Distance 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 = { 
            toPostalCode: document.getElementById("toPostalCode").value,
            fromPostalCode: document.getElementById("fromPostalCode").value,
            algorithm: document.getElementById("algorithm").value,
            authKey: authKey 
        };

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

Trin 4: Se det i aktion

Åbn filen .html i din browser. Den er klar til brug! Virker det ikke? Prøv at downloade eksempelkoden, der er klar til brug.

Swagger

Changelog

Tilgængelige lande

Holland

Schweiz

Tilgængelige API-kald

Autocomplete

Range

Distance

Foreslå

Leder du efter vores v1 API?

v1 Dokumentation