Cum se codifică coordonatele geografice (geocode) ale unei adrese cu jаvascript Google Maps

Google Maps este unul dintre cele mai puternice instrumente disponibile astăzi pentru crearea și manipularea hărților dinamice. Există utilizări aproape nelimitate pentru Google Maps și un bun punct de pornire pentru obținerea unui site minunat constă în găsirea unei poziții de hartă dintr-o adresă simplă. Urmați pașii de mai jos și vă veți strădui să vă creați o pagină web intuitivă și interactivă, utilizând API-ul jаvascript Google Maps. Fiecare pas de mai jos vă arată un ecran cu codul exact adăugat la acel punct al procesului - puteți face clic pe fiecare imagine pentru al mări.

Creați o casetă de introducere a textului astfel încât utilizatorul să poată introduce adresa. adresa: < tip de intrare = "text" id = "inputTextAddress" stil = "lățime: 200px" title = "De la adresa la geocod" / > Creați un buton pentru introducerea pe care utilizatorul poate face clic pentru a transforma adresa în geocod. Declarați o variabilă în afara funcției Initialize astfel încât să fie disponibilă pentru orice cod jаvascript: acesta va stoca geocodul obiect de clasă. var geocoder- Setează variabila geocoder egală cu o instanță a unei clase de geocoder Google Maps ca un nou Google Maps geocoder () în interiorul inițializează () Funcția: geocoder = new google.maps.Geocoder () - Adăugați o a doua funcție a Codul jаvascript: îl numesc codeAddress. Se va cere ca arunca orice valoare: funcția codeAddress () {} Asigurați-vă că prima linie a funcției folosește getElementById pentru a obține adresa din caseta de text și puneți-l într-o variabilă, vom suna sAddress.var sAddress = document.getElementById (" inputTextAddress") .value- Apelul metodei geocode a obiectului geocoder: va cere ca doi parametri sa fie trecuti la ea. Primul este GeocoderRequest, care comunică ce tip de solicitare a fost făcut și care este valoarea solicitării. A doua este funcția de apel invers care va fi utilizată pentru procesarea rezultatelor. geocoder.geocode ({ `adresa`: sAddress}, funcție (rezultate, status) {}) - Funcția de apel invers trebuie să verifice mai întâi valoarea starea funcției de apel invers. Utilizați o instrucțiune IF pentru a testa rezultatul și a verifica dacă starea este egală cu google.maps.GeocoderStatus.OK. Adăugați, de asemenea, o clauză else if: if (statusul == google.maps.GeocoderStatus.OK) {} else {} În cazul în care statul este egal cu OK, setCenter numește metoda variabilei hartă obiect. Suni această metodă pentru a obține prima poziție geometrică a rezultatului: map.setCenter (rezultate [0] .geometry.location) - Apoi, utilizați același rezultat ca poziție geometrică pentru a adăuga un marcator de hartă la variabila hartă obiect. Creați o nouă variabilă, pe care o vom numi oMarker: va fi creată ca nou google.maps.Marker. Noua metodă are doi parametri: primul este harta obiect la care adăugați markerul, iar al doilea este poziția în cazul în care pentru a insera indicatorul, care este încă primul rezultat poziția de marcare geometrica.var = new google.maps .Marker ({hartă: hartă, pozitiile: rezultate [0]} .geometry.location) - în cele din urmă, trebuie să adăugați un mesaj de avertizare la Else pentru a informa utilizatorul că geocodificați nu a funcționat așa cum ar trebui. Puteți folosi statul pentru a oferi mai multe informații decât pentru a spune că nu funcționează. Alertă ("Geocodul nu a funcționat din următorul motiv:" + status) - Și acum puteți încerca! Tastați o adresă sau pur și simplu un oraș și o regiune sau chiar ceva simplu ca un nume de stat! Vei vedea harta muta în noua locație, care se va adăuga un marcator! Pagină direct pentru acest exemplu poate fi vizualizat și utilizat la un link din secțiunea Surse și Citatele, dacă vă derulați în jos!