Добијте координате клијената помоћу АПИ -ја за Гоогле мапе у ЈаваСцрипт -у (ХМТЛ5, ЦСС3 и Боотстрап)

Шта нам је потребно?

до) Основно знање о хтмл-у, цсс3-у, јавасцрипт-у и боотстрапу (неограничавајући).
б) Уређивач кода (у мом случају користићу Сублиме тект 3).
ц) Локални сервер за тестирање (користићу Ксампп сервер)
Хајде да почнемо …

Корак 1

Идемо у директоријум нашег локалног сервера, у мом случају "Ц: / кампп / хтдоцс /" и ми ћемо створити нову фасциклу коју ћу позвати "Туториал_геолоцализацион", у овоме ћемо додати још 2 позива "Цсс" И "Јс".

ЕНЛАРГЕ

Корак 2

Отворићемо наш уређивач кода "Датотека> Ново" и у њу записујемо хтмл5 структуру.

ЕНЛАРГЕ

Затим чувамо ову нову датотеку као "индек.хтмл" у корену фасцикле "туториал_геолоцализацион".

Корак 3

Преузимамо боотстрап са његове службене странице и копирамо датотеку "Боотстрап.мин.цсс" у нашој фасцикли цсс.

ЕНЛАРГЕ

Корак 4

Враћамо се нашем уреднику и додајемо референцу на ову датотеку у наш "Индек.хтмл".

ЕНЛАРГЕ

Корак 5

Направићемо нову датотеку и позвати је "Стиле.цсс" сачуваћемо га у фасцикли цсс …

ЕНЛАРГЕ

Корак 6

Додаћемо у индек.хтмл референце на цсс датотеку креирану у претходном кораку. Поред тога, укључићемо и онлине скрипту која садржи ЈаваСцрипт АПИ за Гоогле мапе.

ЕНЛАРГЕ

Корак 7

Такође ћемо морати да направимо нову .јс датотеку у којој ћемо написати функцију која ће извршити геолокацију и приказати мапу, сачуваћемо је у фасцикли „јс“, назваћу је „лоцализа.јс“. Додаћу и референцу на то у индек.хтмл

ЕНЛАРГЕ

ЕНЛАРГЕ

Сада ћемо довршити изглед нашег ХТМЛ -а, код можете видети на следећој слици:

ЕНЛАРГЕ

Корак 8

Пошто је биће главни оквир и ће садржати мапу, па ћемо морати да контролишемо величину и карактеристике које ће имати, јер ћемо ово уписати у нашу датотеку "Стиле.цсс" следећи код.

ЕНЛАРГЕ

Овим поручујемо прегледачу да ће слој # мап-цанвас имати аутоматску маргину, висину од 420 пиксела, релативну позицију и ширину од 100% слоја или див-а који га садржи, у овом случају се налази унутар див са класом .цонтаинер, за коју јој кажемо да заузима 90% екрана уређаја и приказује је центрирано хоризонтално.
Ако то видимо у свом претраживачу, досадашњи резултат би био овај …

ЕНЛАРГЕ

За сада имамо само дизајн, али нам недостаје најважнија ствар, мапа, идемо до тога …

Корак 9

У датотеци "лоцализа.јс" креираћемо нову функцију која ће добити координате прегледача клијента и назначити његову приближну локацију на карти. У случају да АПИ не ради исправно на клијенту, дефинисаћемо неке подразумеване координате а такође укључује и могућност да клијент превуче чувар места на његову стварну локацију. Објашњавам корак по корак у коду, да видимо …

ЕНЛАРГЕ

Будући да имамо спремне датотеке, можемо направити тест на нашем локалном серверу, а резултат би био сљедећи.

ЕНЛАРГЕ

Корак 10

Сада ћемо нашу мапу прилагодити мобилним уређајима, да бисмо то постигли, враћамо се на нашу датотеку "стиле.цсс" и додаћемо неке нове селекторе који се зову медијски упити са којима ћемо дефинисати како ће се наш дизајн понашати према величина екрана визуелно се приказује … Хајде да пређемо на то.

ЕНЛАРГЕ

Већ имамо све што нам је потребно, а сада да видимо резултате опонашања мобилних уређаја, за ово можемо да користимо „Гоогле Цхроме“, након што је наша апликација отворена у прегледачу, кликните десним тастером миша и идите на "Прегледати елемент".

ЕНЛАРГЕ

Отвориће се прозор попут овог испод и ми ћемо изабрати алат у облику мобилног телефона у доњем левом углу …

ЕНЛАРГЕ

Видећете да ће у горњем левом углу бити селектор са ознаком "Уређај" ако прикажемо где пише “” Можемо видети листу са именима мобилних уређаја чије су величине екрана чешће, ако изаберемо сваки од њих можемо видети како ће се наш дизајн понашати на екранима тих уређаја, свака грешка коју видимо може се исправити медијима упите које смо додали у нашу датотеку "Стиле.цсс", за ово бисмо морали направити само потребна прилагођавања унутар упита за медије који представља величину уређаја на којем уочавамо проблем …
Да видимо како наш тренутни дизајн изгледа на неким мобилним телефонима …

Да ли вам се допао и помогао овај водич?Можете наградити аутора притиском на ово дугме да бисте му дали позитиван поен