Hoe een adres te geocoderen in Google Maps jаvascript

Google Maps is vandaag een van de krachtigste tools die beschikbaar zijn voor het maken en manipuleren van dynamische kaarten. Er zijn bijna onbeperkte gebruiksmogelijkheden voor Google Maps en een goed startpunt op weg naar een geweldige plek is het vinden van een manier om een ​​locatiekaart te krijgen vanaf een eenvoudig adres. Volg de onderstaande stappen en je hebt de mogelijkheid om je eigen intuïtieve en interactieve website te maken met de jаvascript Map API van Google. Elke stap toont u een screenshot met de exacte code die in die stap is gebruikt - u kunt op elke screenshot klikken om deze te vergroten.

Maak een tekstvak waar de gebruikers het adres plaatsen. Adres: maak een knop waarmee de gebruiker kan klikken en kan het adres geocoderen. Stel een variabele buiten de initialisatiefunctie in zodat deze beschikbaar is in elke jаvascript-code, hierdoor wordt het object geocoder-klasse opgeslagen. var geocoder- Stelt de geocoder-variabele in die gelijk is aan een instantie van de Google Maps-geocoderklasse als een nieuwe Google Maps Geocoder () in de initialisatiefunctie (). geocoder = nieuwe google.maps.Geocoder () - Voeg er een toe tweede functie voor uw jаvascript-code en noem het codeAddress. Dit krijgt geen enkele waarde toegewezen. function codeAddress () {} Zorg ervoor dat de eerste regel van de functie getElementById gebruikt om het adres van het tekstvak op te halen en plaats het in de variabele die we sAddress.var sAddress = document.getElementById (" inputTextAddress") .waarde - Roep de geografische coderingsmethode van het geocoderingsobject op, er zijn twee parameters voor nodig. De eerste is GeocoderRequest, die aangeeft wat voor soort aanvraag wordt gedaan en wat de waarde van het verzoek is. De tweede is de callback (callback) -functie die zal worden gebruikt om de resultaten te verwerken. geocoder.geocode ({`address`: sAddress}, functie (resultaten, status) {}) - De terugbelfunctie moet eerst de statuswaarde van de callback-functie controleren. Gebruik een IF-instructie om het resultaat te testen en controleer of de staat gelijk is aan google.maps.GeocoderStatus.OK. Het voegt ook een ELSE-component toe voor de IF.if-instructie (status == google.maps.GeocoderStatus.OK) {} else {} Als de status gelijk is aan OK, wordt de methode setCenter van de kaartvariabele aangeroepen. U moet deze methode voltooien om de resultaten van de eerste geometrische locatie te krijgen.map.setCenter (resultaten [0] .geometry.location) - Gebruik vervolgens hetzelfde geometrische locatieresultaat om een ​​markering aan de kaartvariabele toe te voegen. Maak een nieuwe variabele - we zullen het oMarker noemen - die zal worden opgeslagen als een nieuwe google.maps.Marker. De nieuwe methode neemt twee parameters, de eerste is de kaart waaraan u de markering toevoegt en de tweede is de positie waar de markering zal worden gevonden, wat opnieuw het resultaat is van de geometrische location.var marker = new google.maps. Markering ({kaart: kaart, positie: resultaten [0] .geometry.location}) - Voeg ten slotte een waarschuwingsbericht toe aan ELSE om de gebruiker te laten weten wanneer de Geocoder niet werkte zoals zou moeten. Je kunt de staat gebruiken om meer informatie te geven in plaats van te zeggen dat het gewoon niet werkte."Geocode was niet succesvol om de volgende reden: " + status) - Nu kun je het proberen! Voer een adres of de naam van een stad en staat in of zelfs alleen de naam van de staat. U zult zien dat de kaart de nieuwe locatie toont en daar een markering toevoegt. De webpagina die voor dit voorbeeld wordt gebruikt, kan worden bekeken en gebruikt door de link onderaan in het gedeelte Verwijzingen te volgen.