Så här kodar du de geografiska koordinaterna (geokoder) för en adress med Google Maps jаvascript

Google Maps är ett av de mest kraftfulla verktyg som finns tillgängliga idag för att skapa och manipulera dynamiska kartor. Det finns nästan obegränsade användningsområden för Google Maps och en bra utgångspunkt för att få en bra webbplats är att ta reda på hur man får en kartposition från en enkel adress. Följ stegen nedan och du kommer att vara bra på väg till att skapa en intuitiv och interaktiv webbsida med hjälp av Google Maps jаvascript API. Varje steg nedan visar en skärm med den exakta koden till den punkten i processen - du kan klicka på varje bild för att förstora den.

Skapa en textrutan så att användaren kan ange adressen. adress: < ingångstyp = "text" id = "inputTextAddress" stil = "bredd: 200px" title = "Från adressen till Geocode" / > Skapa en knapp för inmatning som användaren kan klicka för att konvertera adressen till geokod. Förklara en variabel utanför Initialize-funktionen så att den är tillgänglig för någon jаvascript-kod: detta kommer att lagra klassobjektets geokod. var geocoder- Anger geocoder variabeln lika med en instans av en geocoder klass av Google Maps som en ny Google Maps Geocoder () inuti Initialize () funktion: geocoder = new google.maps.Geocoder () - Lägg till en andra funktion för att jаvascript-kod: de kallar det codeAddress. Det kommer att kräva att du kastar något värde: codeAddress function () {} Se till att den första raden i funktionen använder getElementById att få adressen från textrutan och placera den i en variabel vi kallar sAddress.var sAddress = document.getElementById (" inputTextAddress") .value- Anropar geokodmetoden för geocoderobjektet: det kommer att begära att två parametrar skickas till den. Den första är GeocoderRequest, vilken kommunicerar vilken typ av begäran som har gjorts och vad är värdet av förfrågan. Den andra är återuppringningsfunktionen som ska användas för att bearbeta resultaten. geocoder.geocode ({`adress`: sAddress}, funktion (resultat, status) {}) - Återuppringningsfunktionen bör först kontrollera statusvärdet för återuppringningsfunktionen. Använd ett IF-uttalande för att testa resultatet och kontrollera om statusen är lika med google.maps.GeocoderStatus.OK. Lägg också en klausul else if: if (status == google.maps.GeocoderStatus.OK) {} else {} Om staten lika OK, setCenter kallar metoden kartan objektvariabel. Du kallar denna metod för att få den första geometriska läget av resultatet: map.setCenter (resultat [0] .geometry.location) - Använd sedan samma resultat som geometrisk position för att lägga till en kartmarkör på kartan objektvariabel. Skapa en ny variabel, som vi kommer att ringa oMarker: den kommer att skapas som ny google.maps.Marker. Den nya metoden tar två parametrar: den första är kartan objekt som du lägger markören och den andra är den position där att sätta indikatorn, som fortfarande är den första positionen resultatet geometrica.var markör = nya google.maps .Marker ({kartan: map positioner: resultat [0]} .geometry.location) - Slutligen måste vi lägga ett varningsmeddelande till annat att informera användaren att Geocode inte fungerade som det ska. Du kan använda staten för att ge mer information än att bara säga att det inte fungerade. Alltid ("Geocode fungerade inte av följande anledning:" + status) - Och nu kan du prova! Skriv in en adress eller bara en stad och en region eller till och med något så enkelt som ett statligt namn! Du kommer se kartan flytta till den nya positionen, där en markör läggs till! Direktsidan för det här exemplet kan ses och användas via en länk i avsnittet Källor och citat, om du rullar ner!