Distance Spanje

Overzicht

ParametersQuerystring

Antwoorden

{
  "distance": 615305,
  "duration": 407
}

Fouten

{
  "error_id": "INVALID_VALUE",
  "errors": [
    {
      "message": "Input should be 'straight' or 'road'",
      "help": "https://pro6pp.nl/docs/v2/redoc",
      "parameter": "algorithm",
      "value": "fast"
    }
  ]
}

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

Codevoorbeelden

curl "https://api.pro6pp.nl/v2/distance/es?fromPostalCode=28001&toPostalCode=08002&algorithm=road&authKey=YOUR_API_KEY"

Wij moedigen u aan om voorbeeldcode aan te vragen in de taal van uw voorkeur.

Stap voor stap

Stel snel een formulier in om de functionaliteit Spanje Distance uit te proberen door de onderstaande stappen te volgen.

1. Bouw de HTML-pagina

   We beginnen met het maken van een lege HTML-pagina, die een minimale webpaginastructuur bevat. Voeg de volgende code toe tussen de tags <body> en </body>. Het voegt de invoervelden toe voor het invoeren van het adres. Maak een nieuw .html bestand met de naam {filename}}.

   pro6pp_spanje_distance.htmlKopiëren

   <form class="form" id="form">
     <div>Call</div>
     <div>
       <label for="fromPostalCode">fromPostalCode:</label>
       <input id="fromPostalCode" class="fromPostalCode" placeholder="28001"/>
       <label for="toPostalCode">toPostalCode:</label>
       <input id="toPostalCode" class="toPostalCode" placeholder="08002"/>
       <label for="algorithm">algorithm:</label>
       <input id="algorithm" class="algorithm" placeholder="road"/>
     </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>

   Volledige code tonen

2. Voeg interactie toe

   Voeg de volgende JavaScript-code toe in een apart {filename}}-bestand. De ID's en Class-namen van de HTML-elementen moeten overeenkomen met die in dit JavaScript-bestand om de juiste resultaten te krijgen.

   pro6pp_spanje_distance.jsKopiëren

   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 = {
               fromPostalCode: document.getElementById("fromPostalCode").value,
               toPostalCode: document.getElementById("toPostalCode").value,
               authKey: authKey
           };
           const optionalQueryParams = [
               "algorithm",
           ];
           for (const name of optionalQueryParams) {
               const value = document.getElementById(name).value;
               if (value !== "") {
                   queryParams[name] = value;
               }
           }
   
           let encodedUrl = new URL(`${BASE_URL}/distance/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);
       }
   });

   Volledige code tonen

3. Laat het werken

   Koppel het JavaScript-bestand binnen de pro6pp_spanje_distance.html vlak voor het sluiten van de code </body>.

   pro6pp_spanje_distance.htmlKopiëren

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

   Om toegang te krijgen tot de Pro6PP web service, moet u uw persoonlijke autorisatiesleutel aanvragen. Deze sleutel wordt direct na aanmelden naar u gemaild. Vervang de tijdelijke aanduiding AUTH_KEY door uw persoonlijke autorisatiesleutel.

   Als u nog geen account heeft, meldt u zich dan aan voor een gratis proefabonnement van 2 maanden. Nadat u uw account hebt aangemaakt, gaat u naar uw Abonnementsgegevens en kopieert u uw AUTH_KEY. U heeft deze sleutel nodig om uw aanvragen te verifiëren.

4. Zie het in actie

   Als u de vorige stappen heeft uitgevoerd, is het tijd om het formulier lokaal in uw browser uit te voeren. U zou nu twee bestanden in dezelfde map op uw computer moeten hebben:

   • pro6pp_spanje_distance.html - de HTML-pagina met het formulier.
   • pro6pp_spanje_distance.js - het JavaScript-bestand dat de interactie afhandelt.

   U kunt het HTML-bestand nu openen in uw browser door er simpelweg dubbel op te klikken in uw bestandsverkenner (bijvoorbeeld Finder op macOS of File Explorer op Windows). U kunt het ook handmatig in de browser openen met het volledige file:/// pad. Bijvoorbeeld:

   Voorbeeld bestandspadenKopiëren

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

   Zodra de pagina wordt geopend, begint u met het typen van de formuliervelden en drukt u op Submit om het API-antwoord te zien in het gedeelte “Full Response”.