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

Hva trenger vi?

til) Grunnleggende kunnskaper i html, css3, javascript og bootstrap (ikke-begrensende).
b) En kodeditor (i mitt tilfelle vil jeg bruke Sublime text 3).
c) En lokal server å teste (jeg bruker Xampp -server)
La oss komme i gang …

Trinn 1

Vi går til katalogen til vår lokale server, i mitt tilfelle "C: / xampp / htdocs /" og vi vil lage en ny mappe som jeg vil ringe "Tutorial_geolocalizacion", inne i dette vil vi legge til ytterligere 2 samtaler "Css" Y "Js".

FORSTØRRE

Steg 2

Vi åpner vår kodeditor "Fil> Ny" og vi skriver en html5 -struktur i den.

FORSTØRRE

Deretter lagrer vi denne nye filen som "index.html" i roten til "tutorial_geolocalizacion" -mappen.

Trinn 3

Vi laster ned bootstrap fra den offisielle siden og kopierer filen "Bootstrap.min.css" i vår css -mappe.

FORSTØRRE

Trinn 4

Vi går tilbake til redaktøren vår og legger til referansen til denne filen i vår "Index.html".

FORSTØRRE

Trinn 5

Vi lager en ny fil og kaller den "Style.css" vi lagrer det i css -mappen …

FORSTØRRE

Trinn 6

Vi vil legge til i index.html referansene til css -filen som ble opprettet i forrige trinn. I tillegg vil vi også inkludere et online manus som inneholder Google Maps JavaScript API.

FORSTØRRE

Trinn 7

Vi må også lage en ny .js -fil der vi skal skrive funksjonen som skal gjøre geografisk plassering og vise kartet, vi lagrer den i "js" -mappen, jeg vil kalle den "localiza.js". Jeg vil også legge til en referanse til den i index.html

FORSTØRRE

FORSTØRRE

Nå vil vi fullføre oppsettet av HTML -koden vår, du kan se koden i følgende bilde:

FORSTØRRE

Trinn 8

Siden vil være hovedrammen og vil inneholde kartet, så må vi kontrollere størrelsen og egenskapene de vil ha, for dette skriver vi i filen vår "Style.css" følgende kode.

FORSTØRRE

Med dette forteller vi nettleseren at laget # map-canvas vil ha en automatisk margin, en høyde på 420 piksler, relativ posisjon og en bredde på 100% av laget eller diven som inneholder det, i dette tilfellet er det inne i en div med .container -klassen, som vi forteller at den skal oppta 90% av enhetens skjerm og vise den sentrert horisontalt.
Hvis vi ser det i nettleseren vår, ville resultatet så langt være dette …

FORSTØRRE

Så langt har vi bare design, men vi mangler det viktigste, kartet, la oss komme til det …

Trinn 9

I filen "localiza.js" vil vi opprette en ny funksjon som vil hente koordinatene til klientens nettleser og angi omtrentlig plassering på kartet. Hvis API ikke fungerer som det skal på klienten, definerer vi noen standardkoordinater og inkluderer også muligheten for kunden til å dra plassholderen til den faktiske plasseringen. Jeg forklarer trinn for trinn i koden, la oss se …

FORSTØRRE

Siden vi har filene våre klare, kan vi gjøre en test på vår lokale server, og resultatet blir følgende.

FORSTØRRE

Trinn 10

Nå vil vi gjøre kartet vårt tilpassbart til mobile enheter, for å oppnå dette går vi tilbake til filen "style.css", og vi kommer til å legge til noen nye velgere kalt mediespørringer med dem, vi vil definere hvordan designet vårt vil oppføre seg i henhold til skjermstørrelsen der den er visualiserer … La oss komme til det.

FORSTØRRE

Vi har allerede alt vi trenger, la oss nå se resultatene som etterligner mobile enheter, for dette kan vi bruke "Google Chrome"Når applikasjonen vår er åpen i nettleseren, høyreklikker vi og går til "Inspisér element".

FORSTØRRE

Et vindu som det nedenfor vil åpne, og vi vil velge verktøyet i form av en mobiltelefon nederst til venstre …

FORSTØRRE

Du vil se at øverst til venstre vil det være en velger med etiketten "Enhet" hvis vi viser hvor det står “” Vi kan se en liste med navnene på mobile enheter hvis skjermstørrelser er mer vanlige. Hvis vi velger hver av dem, kan vi se hvordan designen vår vil oppføre seg på skjermene til disse enhetene. Enhver feil vi ser kan korrigeres med media spørringer som vi har lagt til i filen vår "Style.css", for dette måtte vi bare gjøre de nødvendige justeringene i mediespørringen som representerer størrelsen på enheten der vi merker problemet …
La oss se hvordan vår nåværende design ser ut på noen mobiler …

Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng