✅ Nabavite koordinate klijenata s API -jem za Google karte u JavaScriptu (HMTL5, CSS3 i Bootstrap)

Sadržaj

Što trebamo?
Korak 1
Korak 2
Korak 3
Korak 4
Korak 5
Korak 6
Korak 7
Korak 8
Korak 9
Korak 10

Što trebamo?

do) Osnovno znanje o html-u, css3-u, javascriptu i bootstrapu (neograničavajući).
b) Uređivač koda (u mom slučaju koristit ću Sublime text 3).
c) Lokalni poslužitelj za testiranje (koristit ću poslužitelj Xampp)
Započnimo …

Korak 1

Idemo u direktorij našeg lokalnog poslužitelja, u mom slučaju "C: / xampp / htdocs /" i stvorit ćemo novu mapu koju ću nazvati "Tutorial_geolocalizacion", unutar ovoga ćemo dodati još 2 poziva "Css" Y "Js".

POVEĆAJTE

Korak 2

Otvorit ćemo naš uređivač koda "Datoteka> Novo" i u nju upisujemo html5 strukturu.

POVEĆAJTE

Zatim spremamo ovu novu datoteku kao "index.html" u korijenu mape "tutorial_geolocalizacion".

Korak 3

Preuzimamo bootstrap sa njegove službene stranice i kopiramo datoteku "Bootstrap.min.css" u našoj css mapi.

POVEĆAJTE

Korak 4

Vraćamo se našem uredniku i dodajemo referencu na ovu datoteku u naš "Index.html".

POVEĆAJTE

Korak 5

Napravit ćemo novu datoteku i nazvati je "Style.css" spremit ćemo ga u mapu css …

POVEĆAJTE

Korak 6

Dodat ćemo u index.html reference na css datoteku stvorenu u prethodnom koraku. Osim toga, uključit ćemo i internetsku skriptu koja sadrži JavaScript API za Google karte.

POVEĆAJTE

Korak 7

Također ćemo morati stvoriti novu .js datoteku u koju ćemo napisati funkciju koja će izvršiti geolokaciju i prikazati kartu, spremit ćemo je u mapu "js", nazvat ću je "localiza.js". Također ću mu dodati referencu u index.html

POVEĆAJTE

Sada ćemo dovršiti izgled našeg HTML -a, kôd možete vidjeti na sljedećoj slici:

POVEĆAJTE

Korak 8

Budući da je bit će glavni okvir i će sadržavati kartu, tada ćemo morati kontrolirati veličinu i karakteristike koje će imati, za to ćemo zapisati u našu datoteku "Style.css" sljedeći kod.

POVEĆAJTE

Ovim poručujemo pregledniku da će sloj # map-canvas imati automatsku marginu, visinu od 420 piksela, relativni položaj i širinu od 100% sloja ili div-a koji ga sadrži, u ovom slučaju je unutar div s klasom .container, za koju joj govorimo da zauzima 90% zaslona uređaja i prikazuje je centrirano vodoravno.
Ako to vidimo u svom pregledniku, dosadašnji rezultat bio bi sljedeći …

POVEĆAJTE

Zasad imamo samo dizajn, ali nam nedostaje najvažnija stvar, karta, prijeđimo na nju …

Korak 9

U datoteci "localiza.js" stvorit ćemo novu funkciju koja će dobiti koordinate preglednika klijenta i naznačiti njegovu približnu lokaciju na karti. U slučaju da API ne radi ispravno na klijentu, definirat ćemo neke zadane koordinate a također uključuje i mogućnost da kupac povuče rezervirano mjesto na njegovo stvarno mjesto. Objašnjavam korak po korak u kodu, da vidimo …

POVEĆAJTE

Budući da imamo spremne datoteke, možemo napraviti test na našem lokalnom poslužitelju, a rezultat bi bio sljedeći.

POVEĆAJTE

Korak 10

Sada ćemo našu kartu prilagoditi mobilnim uređajima, da bismo to postigli, vraćamo se na našu datoteku "style.css" i dodat ćemo neke nove selektore koji se zovu medijski upiti s kojima ćemo definirati kako će se naš dizajn ponašati prema veličina zaslona gdje se nalazi vizualizira … Dođimo do toga.

POVEĆAJTE

Već imamo sve što nam je potrebno, a sada da vidimo rezultate oponašanja mobilnih uređaja, za to možemo koristiti "Google Chrome", nakon što je naša aplikacija otvorena u pregledniku, kliknite desnom tipkom miša i idite na "Pregledajte element".

POVEĆAJTE

Otvorit će se prozor poput ovog u nastavku i mi ćemo odabrati alat u obliku mobilnog telefona u donjem lijevom kutu …

POVEĆAJTE

Vidjet ćete da će se u gornjem lijevom kutu nalaziti birač s oznakom "Uređaj" ako prikažemo gdje piše “” Možemo vidjeti popis s nazivima mobilnih uređaja čije su veličine zaslona češće, ako odaberemo svaki od njih možemo vidjeti kako će se naš dizajn ponašati na zaslonima tih uređaja, bilo koju pogrešku koju vidimo možemo ispraviti medijima upite koje smo dodali u našu datoteku "Style.css", za to bismo morali napraviti samo potrebne prilagodbe unutar medijskog upita koji predstavlja veličinu uređaja na kojem uočavamo problem …
Pogledajmo kako naš trenutni dizajn izgleda na nekim mobitelima …