Obțineți coordonatele clientului cu API-ul Google Maps în JavaScript (HMTL5, CSS3 și Bootstrap)

De ce avem nevoie?

la) Cunoștințe de bază în html, css3, javascript și bootstrap (nelimitativ).
b) Un editor de cod (în cazul meu voi folosi textul Sublim 3).
c) Un server local de testat (voi folosi serverul Xampp)
Să începem …

Pasul 1

Mergem în directorul serverului nostru local, în cazul meu „C: / xampp / htdocs /” și vom crea un nou folder pe care îl voi numi "Tutorial_geolocalizacion", în interiorul acestuia vom adăuga încă 2 apeluri „CSS” Da „Js”.

MARI

Pasul 2

Vom deschide editorul de cod „Fișier> Nou” și scriem o structură html5 în ea.

MARI

Apoi salvăm acest fișier nou ca „index.html” în rădăcina folderului „tutorial_geolocalizacion”.

Pasul 3

Descărcăm bootstrap de pe pagina sa oficială și copiem fișierul „Bootstrap.min.css” în folderul nostru CSS.

MARI

Pasul 4

Ne întoarcem la editorul nostru și adăugăm referința la acest fișier în „Index.html”.

MARI

Pasul 5

Vom crea un fișier nou și îl vom numi „Style.css” îl vom salva în folderul css …

MARI

Pasul 6

Vom adăuga în index.html referințele la fișierul CSS creat în pasul anterior. În plus, vom include și un script online care conține fișierul API Google Maps JavaScript.

MARI

Pasul 7

De asemenea, va trebui să creăm un nou fișier .js unde vom scrie funcția care va face geolocalizarea și vom arăta harta, o vom salva în folderul „js”, îl voi numi „localiza.js”. Voi adăuga și o referință la index.html

MARI

MARI

Acum vom finaliza aspectul HTML-ului nostru, puteți vedea codul în următoarea imagine:

MARI

Pasul 8

Din moment ce va fi cadrul principal și va conține harta, atunci va trebui să controlăm dimensiunea și caracteristicile pe care le vor avea, pentru aceasta vom scrie în fișierul nostru „Style.css” următorul cod.

MARI

Cu aceasta îi spunem browserului că stratul # map-canvas va avea o marjă automată, o înălțime de 420 pixeli, poziția relativă și o lățime de 100% a stratului sau divului care îl conține, în acest caz se află într-un div cu clasa .container, pe care îi spunem să ocupe 90% din ecranul dispozitivului și să-l afișeze centrat orizontal.
Dacă îl vedem în browserul nostru, rezultatul până acum ar fi acesta …

MARI

Până acum avem doar design, dar ne lipsește cel mai important lucru, harta, hai să ajungem la ea …

Pasul 9

În fișierul „localiza.js” vom crea o nouă funcție care va obține coordonatele browserului clientului și va indica locația sa aproximativă pe hartă. În cazul în care API-ul nu funcționează corect pe client, vom defini câteva coordonate implicite și includ, de asemenea, abilitatea pentru client de a trage substituentul la locația sa reală. Vă explic pas cu pas în cod, să vedem …

MARI

Deoarece avem fișierele pregătite, putem face un test pe serverul nostru local și rezultatul va fi următorul.

MARI

Pasul 10

Acum vom face harta noastră adaptabilă la dispozitivele mobile, pentru a realiza acest lucru ne întoarcem la fișierul nostru „style.css” și vom adăuga câteva selectoare noi numite media querys cu ele, vom defini cum se va comporta designul nostru în funcție de dimensiunea ecranului în care este vizualizează … Să ajungem la el.

MARI

Avem deja tot ce ne trebuie, acum să vedem rezultatele emulând dispozitive mobile, pentru aceasta putem folosi „Google Chrome”, având aplicația deschisă în browser, facem clic dreapta și mergem la "Inspectează elementul".

MARI

Se va deschide o fereastră precum cea de mai jos și vom selecta instrumentul în formă de telefon mobil în partea stângă jos …

MARI

Veți vedea că în partea stângă sus va fi un selector cu eticheta "Dispozitiv" dacă afișăm unde scrie “” Putem vedea o listă cu numele dispozitivelor mobile ale căror dimensiuni de ecran sunt mai frecvente, dacă selectăm fiecare dintre ele putem vedea cum se va comporta designul nostru pe ecranele acestor dispozitive, orice eroare pe care o vedem poate fi corectată cu suportul media întrebările pe care le-am adăugat în fișierul nostru „Style.css”, pentru aceasta, ar trebui să facem doar ajustările necesare în cadrul interogării media care reprezintă dimensiunea dispozitivului în care observăm problema …
Să vedem cum arată designul nostru actual pe unele telefoane mobile …

V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv