Gaukite klientų koordinates naudodami „Google“ žemėlapių API „JavaScript“ (HMTL5, CSS3 ir „Bootstrap“)

Ko mums reikia?

į) Pagrindinės žinios apie html, css3, javascript ir bootstrap (neribojamos).
b) Kodo redaktorius (mano atveju naudosiu „Sublime“ tekstą 3).
c) Vietinis serveris, kurį reikia išbandyti (naudosiu „Xampp“ serverį)
Pradėkime …

1 žingsnis

Mano atveju einame į vietinio serverio katalogą „C: / xampp / htdocs /“ ir mes sukursime naują aplanką, kuriam paskambinsiu „Tutorial_geolocalizacion“, viduje pridėsime dar 2 skambučius "Css" Y "Js".

DIDELIS

2 žingsnis

Mes atidarysime savo kodų redaktorių „Failas> Naujas“ ir jame rašome html5 struktūrą.

DIDELIS

Tada išsaugome šį naują failą kaip „index.html“ aplanko „tutorial_geolocalizacion“ šaknyje.

3 žingsnis

Atsisiunčiame „bootstrap“ iš jo oficialaus puslapio ir nukopijuojame failą „Bootstrap.min.css“ mūsų css aplanke.

DIDELIS

4 žingsnis

Grįžtame prie redaktoriaus ir įtraukiame nuorodą į šį failą savo „Index.html“.

DIDELIS

5 žingsnis

Mes sukursime naują failą ir paskambinsime "Stilius.css" išsaugosime jį aplanke css …

DIDELIS

6 žingsnis

Mes pridėsime prie index.html nuorodos į css failą, sukurtą ankstesniame žingsnyje. Be to, mes taip pat pateiksime internetinį scenarijų, kuriame yra „Google“ žemėlapių „JavaScript“ API.

DIDELIS

7 žingsnis

Taip pat reikės sukurti naują .js failą, kuriame parašysime funkciją, kuri atliks geografinę vietą ir parodysime žemėlapį, išsaugosime jį aplanke „js“, aš jį pavadinsiu „localiza.js“. Aš taip pat pridėsiu nuorodą į jį index.html

DIDELIS

DIDELIS

Dabar mes užbaigsime savo HTML išdėstymą, kodą galite pamatyti šiame paveikslėlyje:

DIDELIS

8 žingsnis

Kadangi nuo bus pagrindinis rėmas ir bus žemėlapis, tada turėsime kontroliuoti jų dydį ir charakteristikas, tai mes įrašysime į savo failą "Stilius.css" šį kodą.

DIDELIS

Taip mes sakome naršyklei, kad sluoksnis # žemėlapio drobė turės automatinę paraštę, 420 pikselių aukštį, santykinę padėtį ir 100% sluoksnio ar padalinio, kuriame jis yra, plotį, šiuo atveju jis yra div klasėje.
Jei matysime tai savo naršyklėje, kol kas rezultatas bus toks …

DIDELIS

Kol kas turime tik dizainą, bet trūksta svarbiausio dalyko - žemėlapio, pereikime prie jo …

9 veiksmas

Faile „localiza.js" sukursime naują funkciją, kuri gaus kliento naršyklės koordinates ir nurodys apytikslę jos vietą žemėlapyje. Jei API neveiks tinkamai kliente, nustatysime kai kurias numatytas koordinates taip pat apima galimybę klientui nuvilkti vietos žymeklį į tikrąją vietą. Aš žingsnis po žingsnio paaiškinu kodą, pažiūrėkime …

DIDELIS

Kadangi esame paruošę failus, galime atlikti bandymą vietiniame serveryje, o rezultatas būtų toks.

DIDELIS

10 žingsnis

Dabar savo žemėlapį pritaikysime mobiliesiems įrenginiams, norėdami tai pasiekti, grįšime prie failo „style.css“ ir pridėsime prie jų keletą naujų parinkiklių, vadinamų medijos užklausomis, nustatysime, kaip mūsų dizainas elgsis pagal ekrano dydis, kuriame jis yra, vizualizuojamas … Eikime prie jo.

DIDELIS

Mes jau turime viską, ko mums reikia, dabar pažiūrėkime rezultatus, imituojančius mobiliuosius įrenginius, kuriuos galime naudoti „Google Chrome“, atidarę mūsų programą naršyklėje, dešiniuoju pelės mygtuku spustelėkite ir einame į "Tikrinti elementą".

DIDELIS

Atsidarys toks langas, kaip žemiau, ir apačioje kairėje pasirinksime mobiliojo telefono formos įrankį …

DIDELIS

Pamatysite, kad viršutiniame kairiajame kampe bus parinkiklis su etikete "Įrenginys" jei rodysime ten, kur parašyta “” Galime pamatyti sąrašą su mobiliųjų įrenginių, kurių ekrano dydžiai yra dažnesni, pavadinimais, jei pasirenkame kiekvieną iš jų, galime pamatyti, kaip mūsų dizainas elgsis tų įrenginių ekranuose, bet kokią matomą klaidą galima ištaisyti naudojant laikmeną užklausų, kurias pridėjome savo faile "Stilius.css", tam turėtume tik atlikti reikiamus žiniasklaidos užklausos pakeitimus, nurodančius įrenginio, kuriame pastebime problemą, dydį …
Pažiūrėkime, kaip atrodo mūsų dabartinis dizainas kai kuriuose mobiliuosiuose telefonuose …

Ar jums patiko ir padėjo ši pamoka?Galite apdovanoti autorių paspausdami šį mygtuką, kad suteiktumėte jam teigiamą tašką