Harta animată cu JavaScript

În prezent, diversitatea de aplicații pe care o putem găsi pe web variază de la cea mai simplă la cea mai complexă, ceea ce poate reprezenta diferite scenarii care, datorită noilor tehnologii, sunt mult mai ușor de realizat.

Unul dintre aceste numeroase scenarii este posibilitatea de a reprezenta traseele pe o hartă și, deși poate suna ca o sarcină care ne poate dura săptămâni până la capăt, datorită bibliotecii de amCharts o putem face fără cel mai mic efort posibil.

Cod HTML

Codul nostru HTML Va fi destul de simplu, va avea o structură standard și ceea ce este important de făcut în ea este să faci incluziunile bibliotecii de amChartsprecum și foaia de stil și fișierul .js. care va fi locul în care vom face cea mai mare parte a muncii:

 Harta animată cu JavaScript

Una dintre părțile fundamentale ale noastre HTML este de a adăuga un div care va avea ID-ul pe care îl vom folosi pentru a reda harta noastră și este cel pe care îl vom lega în .js-ul nostru, în acest caz îl numim hartă animată.

Foaie de stil

Foaia noastră de stil va fi destul de simplă, acolo vom defini doar lățimea și înălțimea pentru a afișa harta noastră, în acest caz o vom face în ecran complet:

 body, html {width: 100%; înălțime: 100%; margin: 0} #AnimationMap {width: 100%; înălțime: 100%; }

Odată ce acest lucru este făcut, să trecem nucleul exemplului nostru, care ar fi codul JavaScript.

Cod JavaScript

Mai întâi trebuie să ne inițializăm harta cu funcția makeChart și în cadrul acestuia definiți opțiunile generale ale acestui lucru, deoarece cu această funcție putem crea nu numai hărți, ci și diverse grafice de tot felul. Pentru aceasta definim tipul, modelul hărții, nivelurile de zoom și chiar fontul pentru texte:

 AmCharts.makeChart ("Animatedmap", {type: "map", fontSize: 20, balon: {horizontalPadding: 20, verticalPadding: 15}, creditsPosition: "sus-dreapta", dataProvider: {map: "worldLow", zoomLevel: 3.5, zoomLongitude: -55, zoomLatitude: 42,});

În plus, putem modifica alte opțiuni ale hărții, cum ar fi culorile, liniile și durata animațiilor pe care le putem utiliza în funcție de harta pe care am ales-o, în acest caz este o hartă pentru a reprezenta hărțile de zbor, astfel încât să putem cum rapid poate merge pe pictograma avionului și cât de departe puteți sta între punct și punct.

 areasSettings: {unlistedAreasColor: "# 9bc5f5"}, imagesSettings: {color: "# 4e985c", rollOverColor: "# 4e985c", selectedColor: "# 4e985c", pauseDuration: 0.2, animationDuration: 2.5, adjustAnimationSpeed: 2.5 {color: "# 4e985c", alfa: 0.4}

Odată ce suntem mulțumiți de opțiunile pe care le-am plasat, trebuie doar să vedem cum arată harta noastră animată în browser.

Modul în care îl vedem arată destul de bine și ne va permite să oferim aplicației noastre un stil diferit pentru a reprezenta scenarii dificile într-un mod simplu, folosind avantajele JavaScript și biblioteci terțe care ne fac viața mult mai ușoară.

harta animată JavaScript.zip 1.86K 169 Descărcări