✅ Získejte souřadnice klienta pomocí Google Maps API v JavaScriptu (HMTL5, CSS3 a Bootstrap)

Obsah

Co potřebujeme?
Krok 1
Krok 2
Krok 3
Krok 4
Krok 5
Krok 6
Krok 7
Krok 8
Krok 9
Krok 10

Co potřebujeme?

na) Základní znalosti v html, css3, javascriptu a bootstrapu (bez omezení).
b) Editor kódu (V mém případě použiji Sublime text 3).
C) Místní server k testování (budu používat server Xampp)
Začněme …

Krok 1

V mém případě jdeme do adresáře našeho místního serveru "C: / xampp / htdocs /" a vytvoříme novou složku, kterou zavolám "Tutorial_geolocalizacion", do tohoto přidáme další 2 hovory "CSS" Y "Js".

ZVĚTŠIT

Krok 2

Otevřeme náš editor kódu "Soubor> Nový" a napíšeme do něj strukturu html5.

ZVĚTŠIT

Poté tento nový soubor uložíme jako „index.html“ do kořenového adresáře složky „tutorial_geolocalizacion“.

Krok 3

Stáhneme bootstrap z jeho oficiální stránky a zkopírujeme soubor "Bootstrap.min.css" v naší složce css.

ZVĚTŠIT

Krok 4

Vracíme se do našeho editoru a přidáme odkaz na tento soubor do našeho "Index.html".

ZVĚTŠIT

Krok 5

Vytvoříme nový soubor a nazveme jej "Style.css" uložíme do složky css …

ZVĚTŠIT

Krok 6

Přidáme do index.html odkazy na soubor css vytvořený v předchozím kroku. Kromě toho zahrneme také online skript, který obsahuje soubor Google Maps JavaScript API.

ZVĚTŠIT

Krok 7

Také budeme muset vytvořit nový .js soubor, kde napíšeme funkci, která provede geolokaci a zobrazí mapu, uložíme ji do složky „js“, budu tomu říkat „localiza.js“. Také na něj přidám odkaz v index.html

ZVĚTŠIT

Nyní dokončíme rozložení našeho HTML, kód můžete vidět na následujícím obrázku:

ZVĚTŠIT

Krok 8

Od té doby bude hlavní rámeček a bude obsahovat mapu, pak budeme muset řídit velikost a vlastnosti, které budou mít, proto to napíšeme do našeho souboru "Style.css" následující kód.

ZVĚTŠIT

Tímto řekneme prohlížeči, že vrstva # map-canvas bude mít automatický okraj, výšku 420 pixelů, relativní polohu a šířku 100% vrstvy nebo div, která ji obsahuje, v tomto případě je uvnitř div s třídou .container, o které říkáme, že zabírá 90% obrazovky zařízení a ukazuje ji vodorovně na střed.
Pokud to uvidíme ve svém prohlížeči, výsledkem bude zatím toto …

ZVĚTŠIT

Zatím máme jen design, ale chybí nám to nejdůležitější, mapa, pojďme na to …

Krok 9

V souboru „localiza.js“ vytvoříme novou funkci, která získá souřadnice prohlížeče klienta a označí jeho přibližnou polohu na mapě. V případě, že API na klientovi nefunguje správně, definujeme některé výchozí souřadnice a také zahrnout schopnost zákazníka přetáhnout zástupný symbol na jeho skutečné umístění. Krok za krokem v kódu vysvětlím, podívejme se …

ZVĚTŠIT

Protože máme připravené soubory, můžeme provést test na našem lokálním serveru a výsledek bude následující.

ZVĚTŠIT

Krok 10

Nyní uděláme naši mapu přizpůsobitelnou pro mobilní zařízení, abychom toho dosáhli, vrátíme se k našemu souboru „style.css“ a přidáme k nim několik nových selektorů nazývaných media querys, definujeme, jak se bude náš návrh chovat podle velikost obrazovky, kde je, je vizualizace … Pojďme na to.

ZVĚTŠIT

Už máme vše, co potřebujeme, a teď se podívejme na výsledky emulující mobilní zařízení, k čemuž můžeme použít "Google Chrome", když máme v prohlížeči otevřenou naši aplikaci, klikneme pravým tlačítkem a přejdeme na „Zkontrolovat prvek“.

ZVĚTŠIT

Otevře se okno jako níže a my vybereme nástroj ve tvaru mobilního telefonu vlevo dole …

ZVĚTŠIT

Uvidíte, že v levém horním rohu bude volič se štítkem "Přístroj" pokud zobrazíme, kde je uvedeno “” Můžeme vidět seznam se jmény mobilních zařízení, jejichž velikosti obrazovky jsou běžnější, pokud vybereme každé z nich, vidíme, jak se náš design bude chovat na obrazovkách těchto zařízení, jakoukoli chybu, kterou vidíme, lze opravit pomocí médií dotazy, které jsme přidali do našeho souboru "Style.css"„K tomu bychom museli provést pouze nezbytné úpravy v rámci mediálního dotazu, který představuje velikost zařízení, ve kterém problém zaznamenáme …
Podívejme se, jak náš současný design vypadá na některých mobilních telefonech …