Locator Groot-Brittannië

Overzicht

ParametersQuerystring

Antwoorden

[
  {
    "distance": 123600,
    "lat": 51.453,
    "lng": -2.594,
    "postalCode": "BS1"
  },
  {
    "distance": 163138,
    "lat": 51.505,
    "lng": -0.132,
    "postalCode": "SW1A"
  }
]

Fouten

{
  "error_id": "MISSING_PARAMETER",
  "errors": [
    {
      "message": "Required parameter lat is missing",
      "help": "https://pro6pp.nl/docs/v2/redoc",
      "parameter": "lat"
    }
  ]
}

{
  "error_id": "INVALID_PARAMETER_TYPE",
  "errors": [
    {
      "message": "parameter: lat has invalid 1,0, should be number",
      "help": "https://pro6pp.nl/docs/v2/redoc",
      "parameter": "lat"
    }
  ]
}

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

Codevoorbeelden

curl "https://api.pro6pp.nl/v2/locator/gb?targetPostalCodes=BS1%2CSW1A&postalCode=B1&algorithm=straight&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 Groot-Brittannië Locator 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_groot-brittannië_locator.htmlKopiëren

   <form class="form" id="form">
     <div>Call</div>
     <div>
       <label for="targetPostalCodes">targetPostalCodes:</label>
       <input id="targetPostalCodes" class="targetPostalCodes" placeholder="BS1,SW1A"/>
       <label for="postalCode">postalCode:</label>
       <input id="postalCode" class="postalCode" placeholder="B1"/>
       <label for="lat">lat:</label>
       <input id="lat" class="lat" placeholder=""/>
       <label for="lng">lng:</label>
       <input id="lng" class="lng" placeholder=""/>
       <label for="orderBy">orderBy:</label>
       <input id="orderBy" class="orderBy" placeholder=""/>
       <label for="maxResults">maxResults:</label>
       <input id="maxResults" class="maxResults" placeholder=""/>
       <label for="algorithm">algorithm:</label>
       <input id="algorithm" class="algorithm" placeholder="straight"/>
     </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_groot-brittannië_locator.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 = {
               targetPostalCodes: document.getElementById("targetPostalCodes").value,
               authKey: authKey
           };
           const optionalQueryParams = [
               "postalCode",
               "lat",
               "lng",
               "orderBy",
               "maxResults",
               "algorithm",
           ];
           for (const name of optionalQueryParams) {
               const value = document.getElementById(name).value;
               if (value !== "") {
                   queryParams[name] = value;
               }
           }
   
           let encodedUrl = new URL(`${BASE_URL}/locator/gb`);
           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_groot-brittannië_locator.html vlak voor het sluiten van de code </body>.

   pro6pp_groot-brittannië_locator.htmlKopiëren

     ...
     <script src="pro6pp_groot-brittannië_locator.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_groot-brittannië_locator.html - de HTML-pagina met het formulier.
   • pro6pp_groot-brittannië_locator.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_groot-brittannië_locator.html
   file:///Users/yourname/Desktop/pro6pp_groot-brittannië_locator.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”.