Wkudk

Sådan geocode en adresse i google maps javascript

Google Maps er et af de mest effektive værktøjer til rådighed i dag til dynamisk kort skabelse og manipulation. Der er næsten ubegrænsede anvendelsesmuligheder for Google Maps, og et godt sted at starte på din vej til et godt sted er at finde ud, hvordan man får et kort placering fra en simpel gadenavn. Følg nedenstående trin, og du vil være godt på vej til at skabe en intuitiv, interaktiv webside udnytte Googles javascript map API. Hvert trin her viser dig et skærmbillede med den nøjagtige kode, tilføjede, at trin, og du kan klikke på hvert billede for at forstørre det.

Steps

Sådan geocode en adresse i google maps javascript. Start med en web-side, som du har tilføjet en google javascript API kort til.
Sådan geocode en adresse i google maps javascript. Start med en web-side, som du har tilføjet en google javascript API kort til.
  1. 1
    Start med en web-side, som du har tilføjet en google javascript API kort til.
  2. 2
    Opret en tekstboks input til brugeren om at indtaste gadenavn.
    Adresse: <input type="text" id="inputTextAddress" style=" width:200px" title="Address til geocode" />
  3. 3
    Opret en knap input til brugeren til at klikke på geocode adressen.
    <input type="button" id="inputButtonGeocode" style="width:150px" title="Click til geocode" value="Click til Geocode" />
  4. 4
    Erklær en variabel uden Initialize-funktionen, så det er tilgængeligt i ethvert JavaScript-kode, vil dette gemme geocode klassen objekt.
    var geocoder;
  5. 5
    Sæt geocoder variablen svarende til en instans af google maps geocoder klasse som ny google maps geocoder () inde i initialisering () funktion.
    geocoder = new google.maps.Geocoder ();
  6. 6
    Tilføj en anden funktion til din JavaScript-kode, kalder det codeaddress. Det vil ikke have nogen værdier, der sendes til den.
    funktion codeAddress () {}
  7. 7
    Sørg for, at den første linje af funktionen bruger getelementbyid at få adressen fra tekstfeltet og læg det i en variabel vi kalder saddress.
    var sAddress = document.getElementById ("inputTextAddress") værdi.;
  8. 8
    Ring til geocode metoden for geocoder objekt, vil det tage to bestået-i parametre. Den første er den GeocoderRequest, det siger hvad slags forespørgsel bliver lavet, og hvad anmodningen værdien er. Den anden er funktionen tilbagekald, der vil blive brugt til at behandle resultaterne.
    geocoder.geocode ({'adresse': sAddress}, function (resultater, status) {});
  9. 9
    Den callback funktion skal først kontrollere status værdien af callback funktion. Brug en IF erklæring for at teste resultatet, check for at se, om status lige google.maps.GeocoderStatus.OK. Også tilføje et ELSE klausul til IF erklæring så godt.
    if (status == google.maps.GeocoderStatus.OK) {
    else {
    }
  10. 10
    Hvis status er lig ok, kalder setcenter metoden af kortet objektet variabel. Du vil passere denne metode til at få resultatet første geometri placering.
    map.setCenter (resultater [0] geometry.location.);
  11. 11
    Derefter kan du bruge det samme resultat geometri sted at tilføje et kort markør til kortet objekt variabel. Opret en ny variabel - vi vil kalde det oMarker - det vil blive oprettet som en ny google.maps.Marker. Den nye metode tager to parametre, den første er kort, objekt, du tilføjer markøren til, og det andet er den holdning til at placere markøren, hvilket igen er det første resultat geometri placering.
    var markør = new google.maps.Marker ({
    position:. resultater [0] geometry.location
    });
  12. 12
    Endelig vil vi tilføje en advarselsmeddelelse til den anden til at lade brugeren vide, at geocode ikke arbejde som det bør have. Du kan bruge status til at give en smule mere information snarere end blot at sige, at det ikke virkede.
    alert ("Geocode lykkedes ikke af følgende grund:" + status);
  13. 13
    Du kan nu give det en go! Indtast en adresse, eller blot en og stat, eller endda noget så simpelt som en stat navn! Du vil se kortet flytte til den nye placering og tilføje en markør til kortet!
    De levende side for dette eksempel kan ses og anvendes gennem et link fra de kilder og citater område, hvis du ruller ned!

Tips

  • Hvis du får en fejl, kan du bruge console.log i kombination med din favorit javascript debugger (såsom firebug) som en måde at fejlsøge din javascript.
    • Alternativt kan du gøre dette. Hvis du får en fejl, sted alert (""); beskeder hele dit javascript, så du kan se, hvor langt koden får før erroring.
  • Javascript er små bogstaver, så vær opmærksom på stavefejl og formatering.
  • Javascript fejl kan være meget undvigende. Har en ven / kollega tjekke kode, der ikke vil arbejde - mange gange et nyt sæt øjne er lige hvad der er behov....

Advarsler

  • Vær sikker på, at du bruger Google Maps, som det var hensigten ved at kontrollere deres vilkår for brug.

Ting du behøver

  • Webside med Google Maps API kort aktiveret
  • Javascript grundlæggende viden