Geben Sie bei einer Postleitzahl und einem maximalen Suchabstand die umliegenden Postleitzahlen ein. Die Ausgabe ist von nah nach fern sortiert.
Verwenden Sie einen der beiden obligatorischen Parameter:
undefined/v1/range?auth_key=YOUR_AUTH_KEY&nl_fourpp=5408
Diese Anwendung liefert das folgende Ergebnis:
{
"status": "ok",
"results": [
{
"nl_fourpp": "5408",
"distance": 0,
"lng": 5.6584,
"lat": 51.6434
},
{
"nl_fourpp": "5405",
"distance": 1486,
"lng": 5.6475,
"lat": 51.655
},
{
"nl_fourpp": "5404",
"distance": 2966,
"lng": 5.6175,
"lat": 51.6516
},
...
]
}
Beachten Sie, dass die Gültigkeit von city_key begrenzt ist. In der Praxis ist der Schlüssel mindestens 24 Stunden lang gültig.
Die range-Methode wird in diesen vorgefertigten 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>Range tutorial</title>
</head>
<body></body>
</html>
Laden Sie unsere JavaScript-Bibliothek range.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="pro6pp_range">
Postcode: <input class="postcode" maxlength="4" /><br />
Range:
<select class="range">
<option value="5" selected="selected">5 km</option>
<option value="15">15 km</option>
<option value="50">50 km</option>
</select>
<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="range.js"></script>
<script>
var pro6pp_auth_key = 'YOUR AUTH_KEY';
$(document).ready(function() {
$('.pro6pp_range').applyRange();
});
</script>
Um auf den Pro6PP-Webservice zuzugreifen, müssen Sie Ihren persönlichen Autorisierungsschlüssel anfordern. Dieser Schlüssel wird Ihnen unmittelbar nach signing up per E-Mail zugesandt.
Ersetzen Sie die obige temporäre Angabe YOUR AUTH_KEY durch Ihren persönlichen Autorisierungsschlüssel.
Öffnen Sie range.html in Ihrem Browser. Es ist gebrauchsfertig!
Es funktioniert nicht? Versuchen Sie, den vorgefertigten Beispielcode von der Seite example code herunterzuladen.
Zeigen Sie die gefundenen Ergebnisse auf eine andere Weise an. Ersetzen Sie diese JavaScript-Zeile.....
$(".pro6pp_range").applyRange();
... mit dem folgenden Code:
$(".pro6pp_range").applyRange({ 'assemble_func': assemble_one });
// This function is called for each postcode found.
function assemble_one(result) {
return "Distance to " + result.nl_fourpp + " is " +
result.distance + " meters from your location.<br />";
}
Sie können das Muster hier sehen. Anstelle von nl_fourpp und distance können Sie eines dieser Felder verwenden, um Ihre Ausgabe zusammenzustellen: lat, lng.
Anstatt Klassen zu Ihrem Formular hinzuzufügen, können Sie applyRange () zuweisen, um 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="range-errors"></span>
... ... $(document).ready(function() { $(this).applyRange({ postcode: 'input[name="zipcode"]',
message: '#range-errors', }); });
Sie können das Muster hier sehen. Anstelle der Parameter postcode und message können Sie einen davon verwenden:
Der Parameter range weist dem Eingabe- oder Auswahlelement Suchbereiche zur Auswahl 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.