Iegūstiet klientu koordinātas, izmantojot Google Maps API JavaScript (HMTL5, CSS3 un Bootstrap)

Kas mums vajadzīgs?

līdz) Pamatzināšanas par html, css3, javascript un bootstrap (neierobežo).
b) Koda redaktors (manā gadījumā es izmantošu Sublime text 3).
c) Pārbaudāms vietējais serveris (es izmantošu Xampp serveri)
Sāksim …

1. darbība

Manā gadījumā mēs ejam uz vietējā servera direktoriju "C: / xampp / htdocs /" un mēs izveidosim jaunu mapi, kurai es piezvanīšu "Tutorial_geolocalizacion", šajā iekšpusē mēs pievienosim vēl 2 zvanus "Css" Y "Js".

PALIELINĀT

2. solis

Mēs atvērsim savu koda redaktoru "Fails> Jauns" un mēs tajā ierakstām html5 struktūru.

PALIELINĀT

Pēc tam mēs saglabājam šo jauno failu kā "index.html" mapes "tutorial_geolocalizacion" saknē.

3. solis

Mēs lejupielādējam bootstrap no tās oficiālās lapas un nokopējam failu "Bootstrap.min.css" mūsu css mapē.

PALIELINĀT

4. solis

Mēs atgriežamies pie redaktora un pievienojam atsauci uz šo failu "Index.html".

PALIELINĀT

5. solis

Mēs izveidosim jaunu failu un to izsauksim "Style.css" mēs to saglabāsim css mapē …

PALIELINĀT

6. darbība

Mēs pievienosim index.html atsauces uz css failu, kas izveidots iepriekšējā solī. Turklāt mēs iekļausim arī tiešsaistes skriptu, kas satur Google Maps JavaScript API.

PALIELINĀT

7. solis

Mums arī būs jāizveido jauns .js fails, kurā mēs ierakstīsim funkciju, kas veiks ģeogrāfisko atrašanās vietu un parādīsim karti, mēs to saglabāsim mapē "js", es to saucu par "localiza.js". Es tam pievienošu arī atsauci indeksā.html

PALIELINĀT

PALIELINĀT

Tagad mēs pabeigsim mūsu HTML izkārtojumu, kodu var redzēt šādā attēlā:

PALIELINĀT

8. solis

Kopš būs galvenais rāmis un saturēs karti, tad mums būs jākontrolē to lielums un īpašības, par kurām mēs to rakstīsim "Style.css" šādu kodu.

PALIELINĀT

Ar to mēs pārlūkprogrammai paziņojam, ka slānim # kartes-audekls būs automātiska piemale, 420 pikseļu augstums, relatīvais novietojums un 100% slāņa vai sadaļas platums, kas to satur, šajā gadījumā tas atrodas div ar .container klasi, kurai mēs sakām, ka tā aizņem 90% ierīces ekrāna un parāda to horizontāli.
Ja mēs to redzam savā pārlūkprogrammā, rezultāts līdz šim būtu šāds …

PALIELINĀT

Pagaidām mums ir tikai dizains, bet mums trūkst vissvarīgākās lietas - kartes, ķersimies pie tā …

9. solis

Failā "localiza.js" mēs izveidosim jaunu funkciju, kas iegūs klienta pārlūkprogrammas koordinātas un norādīs tā aptuveno atrašanās vietu kartē. Gadījumā, ja API klientam nedarbojas pareizi, mēs definēsim dažas noklusējuma koordinātas un ietver arī iespēju klientam vilkt vietturi uz tā faktisko atrašanās vietu. Es soli pa solim izskaidroju kodu, redzēsim …

PALIELINĀT

Tā kā mūsu faili ir gatavi, mēs varam veikt pārbaudi mūsu vietējā serverī, un rezultāts būtu šāds.

PALIELINĀT

10. solis

Tagad mēs padarīsim mūsu karti pielāgojamu mobilajām ierīcēm, lai to panāktu, mēs atgriežamies pie sava faila "style.css" un pievienosim dažus jaunus atlasītājus, ko sauc par multivides vaicājumiem, un mēs definēsim, kā mūsu dizains darbosies saskaņā ar ekrāna izmērs, kur tas atrodas, tiek vizualizēts … Pieņemsim to.

PALIELINĀT

Mums jau ir viss nepieciešamais, tagad redzēsim rezultātus, kas atdarina mobilās ierīces, un to mēs varam izmantot "Google Chrome", kad mūsu lietojumprogramma ir atvērta pārlūkprogrammā, mēs ar peles labo pogu noklikšķiniet un dodamies uz "Pārbaudīt elementu".

PALIELINĀT

Tiks atvērts šāds logs, un apakšā pa kreisi mēs izvēlēsimies rīku mobilā tālruņa formā …

PALIELINĀT

Jūs redzēsit, ka augšējā kreisajā stūrī būs atlasītājs ar etiķeti "Ierīce" ja mēs parādām, kur tas rakstīts “” Mēs varam redzēt sarakstu ar to mobilo ierīču nosaukumiem, kuru ekrāna izmēri ir biežāk sastopami, un, izvēloties katru no tām, mēs redzam, kā mūsu dizains darbosies šo ierīču ekrānos, un visas redzamās kļūdas var labot, izmantojot multividi vaicājumus, kurus esam pievienojuši savā failā "Style.css", lai to izdarītu, mums būs jāveic tikai nepieciešamie pielāgojumi multivides vaicājumā, kas atspoguļo tās ierīces izmēru, kurā mēs pamanām problēmu …
Apskatīsim, kā mūsu pašreizējais dizains izskatās dažos mobilajos tālruņos …

Vai jums patika šī apmācība un palīdzējāt tai?Jūs varat apbalvot autoru, nospiežot šo pogu, lai sniegtu viņam pozitīvu punktu