Uzyskaj współrzędne klienta za pomocą Google Maps API w JavaScript (HMTL5, CSS3 i Bootstrap)

Czego potrzebujemy?

do) Podstawowa znajomość html, css3, javascript i bootstrap (bez ograniczeń).
b) Edytor kodu (w moim przypadku użyję tekstu Sublime 3).
C) Serwer lokalny do przetestowania (będę używał serwera Xampp)
Zacznijmy …

Krok 1

Przechodzimy do katalogu naszego lokalnego serwera, w moim przypadku "C: / xampp / htdocs /" i stworzymy nowy folder, który zadzwonię „Tutorial_geolocalizacion”, w tym dodamy kolejne 2 połączenia „Css” Tak „J”.

POWIĘKSZAĆ

Krok 2

Otworzymy nasz edytor kodu, będziemy „Plik > Nowy” i piszemy w nim strukturę html5.

POWIĘKSZAĆ

Następnie zapisujemy ten nowy plik jako „index.html” w katalogu głównym folderu „tutorial_geolocalizacion”.

Krok 3

Pobieramy bootstrap z jego oficjalnej strony i kopiujemy plik „Bootstrap.min.css” w naszym folderze css.

POWIĘKSZAĆ

Krok 4

Wracamy do naszego edytora i dodajemy odniesienie do tego pliku w naszym „Indeks.html”.

POWIĘKSZAĆ

Krok 5

Stworzymy nowy plik i nazwiemy go „Styl.css” zapiszemy to w folderze css…

POWIĘKSZAĆ

Krok 6

Dodamy w index.html odniesienia do pliku css utworzonego w poprzednim kroku. Ponadto dołączymy również skrypt online, który zawiera Interfejs API JavaScript Map Google.

POWIĘKSZAĆ

Krok 7

Będziemy też musieli stworzyć nowy plik .js, w którym napiszemy funkcję, która zrobi geolokalizację i pokaże mapę, zapiszemy ją w folderze „js”, będę nazywał ją „localiza.js”. Dodam też odwołanie do niego w index.html

POWIĘKSZAĆ

POWIĘKSZAĆ

Teraz dokończymy układ naszego kodu HTML, możesz zobaczyć kod na poniższym obrazku:

POWIĘKSZAĆ

Krok 8

Ponieważ będzie główną ramą, a będą zawierały mapę, wtedy będziemy musieli kontrolować ich rozmiar i cechy, które będą miały, w tym celu napiszemy w naszym pliku „Styl.css” następujący kod.

POWIĘKSZAĆ

Dzięki temu informujemy przeglądarkę, że warstwa # mapa-canvas będzie miała automatyczny margines, wysokość 420 pikseli, pozycję względną i szerokość 100% warstwy lub elementu div, który go zawiera, w tym przypadku znajduje się wewnątrz elementu div z klasą .container, której mówimy, aby zajmował 90% ekranu urządzenia i wyświetlał go wyśrodkowany poziomo.
Jeśli zobaczymy to w naszej przeglądarce, dotychczasowy wynik byłby taki…

POWIĘKSZAĆ

Na razie mamy tylko design ale brakuje nam najważniejszej rzeczy, mapy, przejdźmy do tego…

Krok 9

W pliku „localiza.js" utworzymy nową funkcję, która uzyska współrzędne przeglądarki klienta i wskaże jej przybliżoną lokalizację na mapie. W przypadku, gdy API nie działa poprawnie na kliencie, zdefiniujemy niektóre domyślne współrzędne a także uwzględnij możliwość przeciągania przez klienta symbolu zastępczego do jego rzeczywistej lokalizacji. Wyjaśniam krok po kroku w kodzie, zobaczmy…

POWIĘKSZAĆ

Ponieważ mamy gotowe pliki, możemy wykonać test na naszym lokalnym serwerze, a wynik będzie następujący.

POWIĘKSZAĆ

Krok 10

Teraz dostosujemy naszą mapę do urządzeń mobilnych, aby to osiągnąć, wrócimy do naszego pliku „style.css” i dodamy do nich kilka nowych selektorów zwanych zapytaniami o media. Zdefiniujemy, jak nasz projekt będzie się zachowywał zgodnie z rozmiar ekranu, na którym się wizualizuje… Przejdźmy do tego.

POWIĘKSZAĆ

Mamy już wszystko, czego potrzebujemy, teraz zobaczmy wyniki emulujące urządzenia mobilne, do tego możemy wykorzystać „Google Chrome”, mając naszą aplikację otwartą w przeglądarce, klikamy prawym przyciskiem myszy i przechodzimy do „Sprawdź element”.

POWIĘKSZAĆ

Otworzy się okno takie jak to poniżej, a my wybierzemy narzędzie w kształcie telefonu komórkowego w lewym dolnym rogu …

POWIĘKSZAĆ

Zobaczysz, że w lewym górnym rogu będzie selektor z etykietą "Urządzenie" jeśli wyświetlimy tam, gdzie jest napisane “” Widzimy listę z nazwami urządzeń mobilnych, których rozmiary ekranu są bardziej powszechne, jeśli wybierzemy każdy z nich, możemy zobaczyć, jak nasz projekt będzie się zachowywał na ekranach tych urządzeń, każdy błąd, który widzimy, można naprawić za pomocą nośnika zapytania, które dodaliśmy w naszym pliku „Styl.css”, w tym celu musielibyśmy jedynie wprowadzić niezbędne poprawki w zapytaniu o media, które reprezentuje rozmiar urządzenia, w którym dostrzegamy problem …
Zobaczmy, jak wygląda nasz obecny projekt na niektórych telefonach komórkowych…

Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt