Gegeven een postcode of lat/lng combinatie en een eigen lijst postcodes, geef de dichtstbijzijnde locaties. De uitvoer is gesorteerd van dichtbij naar veraf.
undefined/v1/locator?auth_key=YOUR_AUTH_KEY&nl_fourpp=5408&target_nl_fourpps=5652,2987
Deze aanvraag geeft het volgende resultaat:
{
"status": "ok",
"results": [
{
"nl_fourpp": 5652,
"distance": 25626,
"lng": 5.46667,
"lat": 51.45,
"city": "Eindhoven",
"municipality": "Eindhoven",
"province": "Noord-Brabant"
},
{
"nl_fourpp": 2987,
"distance": 76263,
"lng": 4.6,
"lat": 51.86667,
"city": "Ridderkerk",
"municipality": "Ridderkerk",
"province": "Zuid-Holland"
}
]
}
De locator methode wordt gedemonstreerd in deze gebruiksklare voorbeelden:
We moedigen u aan om voorbeeldcode aan te vragen in de taal van uw voorkeur. In de tussentijd wilt u misschien kijken naar de autocomplete methode, die al in vele talen is gedemonstreerd.
We beginnen met het maken van een lege HTML-pagina met een minimale webpaginastructuur.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Locator tutorial</title>
</head>
<body></body>
</html>
Download onze JavaScript-bibliotheek locator.js waarmee we de Pro6PP-webservice kunnen integreren in deze webpagina. Kopieer het in dezelfde map als waarin u de bovenstaande webpagina hebt opgeslagen.
Voeg de volgende code toe tussen de tags <body> en <body>.
Het voegt de invoervelden toe voor het invoeren van de postcode.
<form action="#" class="locator">
Postcode: <input class="postcode" maxlength="4" />
<input class="target_nl_fourpps" type="hidden" value="1012, 9301, 5042, 4834, 5408" /><br />
<span class="message"></span><br />
<div class="output"></div>
</form>
Voeg de volgende code toe tussen de tags <head> en </head>.
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="locator.js"></script>
<script>
var pro6pp_auth_key = 'YOUR AUTH_KEY';
$(document).ready(function() {
$('.locator').applyLocator();
});
</script>
Voor toegang tot de Pro6PP-webservice moet u uw persoonlijke autorisatiesleutel aanvragen. Deze sleutel wordt rechtstreeks naar u gemaild signing up.
Vervang de bovenstaande tijdelijke aanduiding YOUR AUTH_KEY door uw persoonlijke autorisatiesleutel.
Open locator.html in uw browser. Het is klaar voor gebruik!
Het werkt niet? Probeer de kant-en-klare voorbeeldcode te downloaden op de pagina example code.
Laten we de city in plaats van de postcode van de winkel laten zien. Vervang deze JavaScript-regel ...
$(".locator").applyLocator();
... met de volgende code:
$(".locator").applyLocator({'assemble_func':assemble_one });
// This function is called for each store found.
function assemble_one(result){
return "Store found in " + result.city + ", " +
result.distance + " meters from your location.<br />";
}
Je kunt het patroon hier zien. In plaats van city en distance kunt u een van deze velden gebruiken om uw uitvoer samen te stellen: nl_fourpp, lat, lng.
In plaats van klassen toe te voegen aan uw formulier, kunt u applyLocator () opdracht geven aangepaste veld-ID's te gebruiken. jQuery selector syntax wordt geaccepteerd.
Dit voorbeeld overschrijft de standaard-ID van de velden met behulp van hun name of id attributen.
Postcode:<input name="zipcode" />
<span id="zipcode-errors"></span>
... ... $(document).ready(function(){ $(this).applyLocator({ postcode:'input[name="zipcode"]',
message:'#zipcode-errors', }); });
Je kunt het patroon hier zien. In plaats van de parameters postcode en message kunt u een van deze gebruiken:
Parameter target_nl_fourpps wijst het (verborgen) invoerelement toe met alle mogelijke winkel-postcodes.
Parameter message wijst het containerelement toe waarin foutmeldingen worden weergegeven.
Parameter spinner wijst een (beeld) element toe om te verbergen / weergeven tijdens API-communicatie. Parameter output wijst het containerelement toe waarin de resultaten worden weergegeven.