Få klientkoordinater med Google Maps API i JavaScript (HMTL5, CSS3 og Bootstrap)

Hvad har vi brug for?

til) Grundlæggende viden i html, css3, javascript og bootstrap (ikke-begrænsende).
b) En kode -editor (I mit tilfælde vil jeg bruge Sublime text 3).
c) En lokal server, der skal testes (jeg bruger Xampp -server)
Lad os komme igang …

Trin 1

Vi går til biblioteket på vores lokale server, i mit tilfælde "C: / xampp / htdocs /" og vi opretter en ny mappe, som jeg vil ringe til "Tutorial_geolocalizacion", inde i dette tilføjer vi yderligere 2 opkald "Css" Y "Js".

FORSTØRRE

Trin 2

Vi åbner vores kodeditor "Fil> Ny" og vi skriver en html5 -struktur i den.

FORSTØRRE

Derefter gemmer vi denne nye fil som "index.html" i roden af ​​"tutorial_geolocalizacion" -mappen.

Trin 3

Vi downloader bootstrap fra den officielle side og kopierer filen "Bootstrap.min.css" i vores css mappe.

FORSTØRRE

Trin 4

Vi går tilbage til vores editor og tilføjer henvisningen til denne fil i vores "Index.html".

FORSTØRRE

Trin 5

Vi opretter en ny fil og kalder den "Style.css" vi gemmer det i css -mappen …

FORSTØRRE

Trin 6

Vi tilføjer i index.html referencerne til css -filen, der blev oprettet i det foregående trin. Derudover vil vi også inkludere et online script, der indeholder Google Maps JavaScript API.

FORSTØRRE

Trin 7

Vi bliver også nødt til at oprette en ny .js -fil, hvor vi vil skrive den funktion, der skal udføre geolokalisering og vise kortet, vi gemmer den i "js" -mappen, jeg vil kalde den "localiza.js". Jeg vil også tilføje en reference til den i index.html

FORSTØRRE

FORSTØRRE

Nu vil vi fuldføre layoutet af vores HTML, du kan se koden i følgende billede:

FORSTØRRE

Trin 8

Siden vil være hovedrammen og vil indeholde kortet, skal vi kontrollere størrelsen og egenskaberne, de vil have, for dette vil vi skrive i vores fil "Style.css" følgende kode.

FORSTØRRE

Med dette fortæller vi browseren, at laget # map-canvas vil have en automatisk margen, en højde på 420 pixels, relativ position og en bredde på 100% af det lag eller div, der indeholder det, i dette tilfælde er det inde i en div med .container -klassen, som vi fortæller den om at optage 90% af enhedens skærm og vise den centreret vandret.
Hvis vi ser det i vores browser, ville resultatet hidtil være dette …

FORSTØRRE

Indtil videre har vi kun design, men vi mangler det vigtigste, kortet, lad os komme til det …

Trin 9

I filen "localiza.js" opretter vi en ny funktion, der henter koordinaterne for klientens browser og angiver dens omtrentlige placering på kortet. Hvis API'en ikke fungerer korrekt på klienten, definerer vi nogle standardkoordinater og inkludere også kundens mulighed for at trække pladsholderen til dens faktiske placering. Jeg forklarer trin for trin i koden, lad os se …

FORSTØRRE

Da vi har vores filer klar, kan vi lave en test på vores lokale server, og resultatet ville blive følgende.

FORSTØRRE

Trin 10

Nu vil vi gøre vores kort tilpasset til mobile enheder, for at opnå dette går vi tilbage til vores fil "style.css", og vi vil tilføje nogle nye vælgere kaldet medieforespørgsler med dem, vi vil definere, hvordan vores design vil opføre sig i henhold til skærmstørrelse, hvor den er, visualiserer … Lad os komme til det.

FORSTØRRE

Vi har allerede alt, hvad vi har brug for, lad os nu se resultaterne efterligne mobile enheder, til dette kan vi bruge "Google Chrome"Når vores applikation er åben i browseren, højreklikker vi og går til "Efterse element".

FORSTØRRE

Et vindue som det nedenfor vil åbne, og vi vælger værktøjet i form af en mobiltelefon nederst til venstre …

FORSTØRRE

Du vil se, at der øverst til venstre vil være en vælger med etiketten "Enhed" hvis vi viser, hvor der står “” Vi kan se en liste med navne på mobile enheder, hvis skærmstørrelser er mere almindelige, hvis vi vælger hver af dem, kan vi se, hvordan vores design vil opføre sig på skærmene på disse enheder, enhver fejl, vi ser, kan rettes med medierne forespørgsler, som vi har tilføjet i vores fil "Style.css", for dette skulle vi kun foretage de nødvendige justeringer inden for medieforespørgslen, der repræsenterer størrelsen på den enhed, hvor vi bemærker problemet …
Lad os se, hvordan vores nuværende design ser ud på nogle mobiler …

Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt