Анимирана мапа са ЈаваСцрипт -ом

Тренутно се разноликост апликација које можемо пронаћи на вебу креће од најједноставнијих до најсложенијих, што може представљати различите сценарије које је захваљујући новим технологијама много лакше постићи.

Један од ових многих сценарија је могућност представљања рута на карти, и иако може звучати као задатак за који нам је потребно неколико недеља, захваљујући библиотеци амЦхартс можемо то учинити без најмањих могућих напора.

ХТМЛ код

Наш код ХТМЛ Биће прилично једноставно, имаће стандардну структуру и оно што је важно учинити је да се укључе библиотеке амЦхартскао и нашу датотеку са стиловима и .јс датотеку. на чему ћемо радити највећи део посла:

 Анимирана мапа са ЈаваСцрипт -ом

Један од темељних делова нашег ХТМЛ је да додамо див који ће имати ИД који ћемо користити за исцртавање наше мапе, и то је онај који ћемо повезати у наш .јс, у овом случају то називамо анимирана карта.

Табела стилова

Наш стилски лист ће бити прилично једноставан, ту ћемо само дефинирати ширину и висину за приказ наше карте, у овом случају ћемо то учинити на цијелом екрану:

 боди, хтмл {видтх: 100%; висина: 100%; маргин: 0} #АниматионМап {видтх: 100%; висина: 100%; }

Када то учинимо, пређимо језгро нашег примера, а то би био код ЈаваСцрипт.

ЈаваСцрипт код

Прво морамо да иницијализујемо нашу мапу са функцијом макеЦхарт и унутар њега дефинишите опште опције овога, будући да помоћу ове функције не можемо само да креирамо мапе, већ и разне графике свих врста. За ово дефинишемо врсту, модел карте, ниво зумирања, па чак и фонт за текстове:

 АмЦхартс.макеЦхарт ("Аниматедмап", {типе: "мап", фонтСизе: 20, баллоон: {хоризонталПаддинг: 20, вертицалПаддинг: 15}, цредитсПоситион: "топ-ригхт", датаПровидер: {мап: "ворлдЛов", зоомЛевел: 3.5, зоомЛоитуде: -55, зоомЛатитуде: 42,});

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

 ареаСеттингс: {унлистедАреасЦолор: "# 9бц5ф5"}, имагесСеттингс: {цолор: "# 4е985ц", роллОверЦолор: "# 4е985ц", селецтедЦолор: "# 4е985ц", паусеДуратион: 0,2, аниматионДуратион: 2,5, АдјустатионСпеед: 2,5, спеедАниматионСпеед: 2,5, {цолор: "# 4е985ц", алпха: 0.4}

Када будемо задовољни опцијама које смо поставили, морамо само да видимо како наша анимирана мапа изгледа у прегледачу.

Како ми то видимо изгледа прилично добро и омогућиће нам да нашој апликацији дамо другачији стил како бисмо представили тешке сценарије на једноставан начин, користећи предности ЈаваСцрипт и библиотеке независних произвођача које нам знатно олакшавају живот.

анимирана карта ЈаваСцрипт.зип 1.86К 169 преузимања