Geben Sie bei einer Postleitzahl oder lat/lng-Kombination und einer eigenen Liste von Postleitzahlen die nächstgelegenen Standorte an. Die Ausgabe ist von nah nach fern sortiert.
undefined/v1/locator?auth_key=YOUR_AUTH_KEY&nl_fourpp=5408&target_nl_fourpps=5652,2987
Diese Anwendung liefert das folgende Ergebnis:
{
"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"
}
]
}
Die Methode locator wird in diesen gebrauchsfertigen Beispielen demonstriert:
Wir empfehlen Ihnen, Mustercode in Ihrer bevorzugten Sprache anzufordern. In der Zwischenzeit sollten Sie sich die Autovervollständigung ansehen, die bereits in vielen Sprachen demonstriert wurde.
Wir beginnen damit, eine leere HTML-Seite mit einer minimalen Webseitenstruktur zu erstellen.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Locator tutorial</title>
</head>
<body></body>
</html>
Laden Sie unsere JavaScript-Bibliothek locator.js herunter, mit der wir den Pro6PP-Webservice in diese Webseite integrieren können. Kopieren Sie es in den gleichen Ordner, in dem Sie die obige Webseite gespeichert haben.
Füge den folgenden Code zwischen den Tags <body> und <body> hinzu.
Es werden die Eingabefelder für die Eingabe der Postleitzahl hinzugefügt.
<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>
Füge den folgenden Code zwischen den Tags <head> und </head> hinzu.
<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>
Um auf den Pro6PP-Webservice zuzugreifen, müssen Sie Ihren persönlichen Autorisierungsschlüssel anfordern. Dieser Schlüssel wird direkt an dich geschickt signing up.
Ersetzen Sie die obige temporäre Angabe YOUR AUTH_KEY durch Ihren persönlichen Autorisierungsschlüssel.
Öffnen Sie locator.html in Ihrem Browser. Es ist gebrauchsfertig!
Es funktioniert nicht? Versuchen Sie, den vorgefertigten Beispielcode von der Seite example code herunterzuladen.
Lassen Sie uns die city anstelle der Postleitzahl des Ladens anzeigen. Ersetzen Sie diese JavaScript-Zeile....
$(".locator").applyLocator();
... mit dem folgenden 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 />";
}
Sie können das Muster hier sehen. Anstelle von city und distance können Sie eines dieser Felder verwenden, um Ihre Ausgabe zusammenzustellen: nl_fourpp, lat, lng.
Anstatt Klassen zu Ihrem Formular hinzuzufügen, können Sie applyLocator () anweisen, benutzerdefinierte Feld IDs zu verwenden. jQuery selector syntax wird akzeptiert.
Dieses Beispiel überschreibt die Standard-ID der Felder mit ihren Attributen name oder id.
Postcode:<input name="zipcode" />
<span id="zipcode-errors"></span>
... ... $(document).ready(function(){ $(this).applyLocator({ postcode:'input[name="zipcode"]',
message:'#zipcode-errors', }); });
Sie können das Muster hier sehen. Anstelle der Parameter postcode und message können Sie einen davon verwenden:
Der Parameter target_nl_fourpps weist das (versteckte) Eingabeelement mit allen möglichen Shop-Postleitzahlen zu.
Der Parameter message weist das Containerelement zu, das Fehlermeldungen anzeigt.
Der Parameter spinner weist ein (Bild-)Element zu, das während der API-Kommunikation ausgeblendet / angezeigt werden soll. Der Parameter output weist dem Containerelement zu, in dem die Ergebnisse angezeigt werden.