Suggest Duitsland Straat Stap voor stap
Suggest a German address.
Opmerking: Dit is de documentatie voor de v2 API die nog in beta is.
Stap 1: bouw de HTML-pagina
We beginnen met het maken van een lege HTML-pagina met een minimale webpagina structuur.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>DE Suggest tutorial</title>
</head>
<body></body>
</html>
Voeg de volgende code toe tussen de tags <body>
en </body>
.
<form class="form" id="form">
<div>Call</div>
<div>
<label for="postalCode">postalCode:</label>
<input id="postalCode" class="postalCode" placeholder="01067"/>
<label for="settlement">settlement:</label>
<input id="settlement" class="settlement" placeholder="Dresden"/>
<label for="street">street:</label>
<input id="street" class="street" placeholder="Am Bramschkontor"/>
<label for="maxResults">maxResults:</label>
<input id="maxResults" class="maxResults" placeholder="1"/>
<label for="cursor">cursor:</label>
<input id="cursor" class="cursor" placeholder=""/>
</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>
Het voegt de invoervelden toe voor het invoeren van het adres.
Stap 2: voeg interactie toe
Voeg de volgende JavaScript-code toe in een apart .js
-bestand. De ID's en klassenamen van de HTML-elementen moeten overeenkomen met de in dit JavaScript-bestand gespecificeerde elementen om de juiste resultaten te krijgen.
Stap 3: laat het werken
Koppel het JavaScript-bestand in de .html
vlak voordat u de </body>
-tag sluit. Vervang {filename}
met uw daadwerkelijke JavaScript-bestandsnaam.
<script src="{filename}.js"></script>
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.
Stap 4: zie het in actie
Open .html
in uw browser. Het is klaar voor gebruik! Werkt het niet? Probeer de kant-en-klare voorbeeldcode te downloaden.