Вземете клиентски координати с Google Maps API в JavaScript (HMTL5, CSS3 и Bootstrap)

Какво ни трябва?

да се) Основни познания по html, css3, javascript и bootstrap (неограничаващи).
б) Редактор на код (В моя случай ще използвам Sublime text 3).
° С) Локален сървър за тестване (ще използвам Xampp сървър)
Да започваме …

Етап 1

Отиваме в директорията на нашия локален сървър, в моя случай "C: / xampp / htdocs /" и ще създадем нова папка, която ще извикам "Урок_геолокализация", вътре в това ще добавим още 2 обаждания "Css" Y "Js".

Увеличете

Стъпка 2

Ще отворим нашия редактор на кодове "Файл> Ново" и в него пишем html5 структура.

Увеличете

След това запазваме този нов файл като "index.html" в корена на папката "tutorial_geolocalizacion".

Стъпка 3

Изтегляме bootstrap от официалната му страница и копираме файла "Bootstrap.min.css" в нашата css папка.

Увеличете

Стъпка 4

Връщаме се към нашия редактор и добавяме препратката към този файл в нашия "Index.html".

Увеличете

Стъпка 5

Ще създадем нов файл и ще го извикаме "Style.css" ще го запишем в папката css …

Увеличете

Стъпка 6

Ще добавим в index.html препратките към css файла, създаден в предишната стъпка. Освен това ще включим и онлайн скрипт, който съдържа JavaScript API на Google Карти.

Увеличете

Стъпка 7

Ще трябва да създадем и нов .js файл, където ще напишем функцията, която ще извърши геолокацията и ще покаже картата, ще я запишем в папката „js“, аз ще я нарека „localiza.js“. Ще добавя и препратка към него в index.html

Увеличете

Увеличете

Сега ще завършим оформлението на нашия HTML, можете да видите кода на следното изображение:

Увеличете

Стъпка 8

Тъй като ще бъде основната рамка и ще съдържа картата, след което ще трябва да контролираме размера и характеристиките, които те ще имат, за това ще запишем в нашия файл "Style.css" следния код.

Увеличете

С това казваме на браузъра, че слоят # map-canvas ще има автоматично поле, височина 420 пиксела, относителна позиция и ширина 100% от слоя или div, който го съдържа, в този случай той е вътре в div с .container клас, за който му казваме, че заема 90% от екрана на устройството и го показва центриран хоризонтално.
Ако го видим в браузъра си, резултатът досега ще бъде този …

Увеличете

Досега имаме само дизайн, но ни липсва най -важното, картата, нека да стигнем до нея …

Стъпка 9

Във файла "localiza.js" ще създадем нова функция, която ще получи координатите на браузъра на клиента и ще посочи приблизителното му местоположение на картата. В случай, че API не работи правилно на клиента, ще дефинираме някои координати по подразбиране и също така включват възможността клиентът да плъзга заместителя до действителното му местоположение. Обяснявам стъпка по стъпка в кода, да видим …

Увеличете

Тъй като имаме готови файлове, можем да направим тест на нашия локален сървър и резултатът ще бъде следният.

Увеличете

Стъпка 10

Сега ще направим нашата карта адаптивна за мобилни устройства, за да постигнем това, се връщаме към нашия файл „style.css“ и ще добавим някои нови селектори, наречени медийни заявки, с тях ще определим как ще се държи нашият дизайн според размерът на екрана, където е, се визуализира … Нека да стигнем до него.

Увеличете

Вече имаме всичко необходимо, сега нека видим резултатите, емулиращи мобилни устройства, за това можем да използваме "Google Chrome", като отворим приложението си в браузъра, щракваме с десния бутон и отиваме на "Инспектирай елемента".

Увеличете

Ще се отвори прозорец като този по -долу и ще изберем инструмента под формата на мобилен телефон в долния ляв ъгъл …

Увеличете

Ще видите, че в горния ляв ъгъл ще има селектор с етикет "Устройство" ако покажем къде пише “” Можем да видим списък с имената на мобилни устройства, чиито размери на екрана са по -често срещани, ако изберем всяко от тях, можем да видим как ще се държи нашият дизайн на екраните на тези устройства, всяка грешка, която виждаме, може да бъде коригирана с медиите запитвания, които сме добавили в нашия файл "Style.css", за това ще трябва само да направим необходимите корекции в медийната заявка, която представлява размера на устройството, в което забелязваме проблема …
Нека да видим как изглежда настоящият ни дизайн на някои мобилни телефони …

Хареса ли ви и помогнахте на този урок?Можете да възнаградите автора, като натиснете този бутон, за да му дадете положителна точка