Wkuno

Hvordan geokode en adresse i google maps javascript

Google maps er en av de kraftigste verktøyene som er tilgjengelige i dag for dynamisk kart oppretting og manipulering. Det er nesten ubegrensede bruksområder for Google Maps, og et godt utgangspunkt på veien din til et godt nettsted er å finne ut hvordan du får et kart sted i en enkel gateadresse. Følg trinnene nedenfor og du vil være godt på vei til å skape et intuitivt, interaktiv nettside utnytte Googles javascript map API. Hvert trinn her viser et skjermbilde med den nøyaktige koden lagt i dette trinnet, kan du klikke på hvert skjermbilde for å forstørre det.

Trinn

Hvordan geokode en adresse i google maps javascript. Start med en nettside som du har lagt til en google javascript api kartet til.
Hvordan geokode en adresse i google maps javascript. Start med en nettside som du har lagt til en google javascript api kartet til.
  1. 1
    Start med en nettside som du har lagt til en google javascript api kartet til.
  2. 2
    Lag en tekstboks inngang for brukeren å skrive inn gateadressen.
    Adresse: <input type="text" id="inputTextAddress" style=" width:200px" title="Address til geocode" />
  3. 3
    Lag en knapp inngang for brukeren til å klikke for å geokode adressen.
    <input type="button" id="inputButtonGeocode" style="width:150px" title="Click til geocode" value="Klikk til Geocode" />
  4. 4
    Deklarerer en variabel utenfor initialize funksjonen slik at den er tilgjengelig i noen javascript-kode, vil dette lagre geokode klasse objektet.
    Var geocoder;
  5. 5
    Sett geocoder variabel lik en forekomst av google maps geocoder klasse som ny google maps geocoder () inne i initialize ()-funksjonen.
    geocoder = new google.maps.Geocoder ();
  6. 6
    Legg til en ny funksjon til javascript-kode, kall det codeaddress. Det vil ikke ha noen verdier som sendes til den.
    funksjon codeAddress () {}
  7. 7
    Sørg for at den første linjen i funksjonen bruker getelementbyid å få adressen fra tekstboksen og plassere den i en variabel vi kaller saddress.
    Var sAddress = document.getElementById ("inputTextAddress") verdi.;
  8. 8
    Ring geokode metoden i geocoder objekt, vil dette ta to gikk-i parametrene. Den første er GeocoderRequest, sier dette er hva slags forespørsel blir gjort og hva forespørselen verdien er. Den andre er den tilbakekallsfunksjon som vil bli brukt for å behandle resultatene.
    geocoder.geocode ({"adresse": sAddress}, funksjon (resultater, status) {});
  9. 9
    Tilbakeringing bør først sjekke status verdien av tilbakeringing funksjonen. Bruk en IF-setning for å teste resultatet, sjekk for å se om status lik google.maps.GeocoderStatus.OK. Også legge til et ELSE klausul til hvis setningen også.
    if (status == google.maps.GeocoderStatus.OK) {
    else {
    }
  10. 10
    Hvis statusen er lik ok, ring setcenter metoden av kartet objektvariabelen. Du vil passere denne metoden for å få resultatet første geometri plassering.
    map.setCenter (resultater [0] geometry.location.);
  11. 11
    Deretter bruker du samme resultat geometri sted å legge en kartmarkør til kartet objektvariabelen. Opprett en ny variabel - vi kaller det oMarker - det vil bli opprettet som en ny google.maps.Marker. Den nye metoden tar to parametre, den første er kartet objekt som du legger markøren til, og den andre er posisjonen for å plassere markøren, som igjen er den første resultatene geometri plassering.
    Var markør = ny google.maps.Marker ({
    stilling:. resultater [0] geometry.location
    });
  12. 12
    Til slutt skal vi legge til en advarsel til andre å la brukeren vite at geokode ikke fungerte som det skal ha. Du kan bruke statusen til å gi litt mer informasjon snarere enn å bare si at det ikke fungerte.
    alert ("geokode var ikke vellykket for følgende grunn:" + status);
  13. 13
    Du kan nå gi det en sjanse! Skriv inn en adresse, eller bare en og stat, eller til og med noe så enkelt som en stat navn! Du vil se kartet flytte til det nye stedet og til en markør i kartet!
    Det levende side for dette eksemplet kan ses og brukes via en link fra kilder og henvisninger området hvis du blar nedover!

Tips

  • Hvis du får en feilmelding, kan du bruke console.log i kombinasjon med din favoritt javascript debugger (for eksempel firebug) som en måte å feilsøke javascript.
    • Alternativt, kan du gjøre dette. Hvis du får en feilmelding, sted alert (""); meldinger hele javascript, slik at du kan se hvor langt koden kommer før erroring.
  • Javascript er case sensitive, så vær klar over skrivefeil og formatering.
  • Javascript feil kan være svært unnvikende. Har en venn / kollega sjekk ut kode som ikke vil fungere - mange ganger et nytt sett av øyne er akkurat det som trengs....

Advarsler

  • Vær sikker på at du bruker Google Maps slik det var ment ved å sjekke sine vilkår for bruk.

Ting du trenger

  • Nettside med Google Maps api map aktivert
  • Javascript grunnleggende kunnskap