Šiuo metu žiniatinklyje randamų programų įvairovė svyruoja nuo paprasčiausių iki sudėtingiausių, o tai gali būti įvairūs scenarijai, kuriuos dėl naujų technologijų pasiekti yra daug lengviau.
Vienas iš šių daugelio scenarijų yra galimybė pavaizduoti maršrutus žemėlapyje ir, nors bibliotekos dėka tai gali atrodyti kaip užduotis, kurią galime užtrukti savaites. amCharts mes galime tai padaryti be mažiausių pastangų.
HTML kodas
Mūsų kodas HTML Tai bus gana paprasta, ji turės standartinę struktūrą ir svarbu tai padaryti, kad bibliotekos intarpai būtų įtraukti amChartstaip pat mūsų stilių ir .js failą. kurioje atliksime didžiąją dalį darbų:
Animacinis žemėlapis su „JavaScript“Viena iš pagrindinių mūsų dalių HTML yra pridėti div, turintį ID, kurį naudosime savo žemėlapiui atvaizduoti, ir mes jį susiesime savo .js, šiuo atveju mes jį animacinis žemėlapis.
Stiliaus lapas
Mūsų stiliaus lapas bus gana paprastas, ten mes nustatysime tik plotį ir aukštį, kad būtų rodomas mūsų žemėlapis, šiuo atveju tai padarysime per visą ekraną:
korpusas, html {plotis: 100%; aukštis: 100%; paraštė: 0} #AnimationMap {width: 100%; aukštis: 100%; }Kai tai bus padaryta, perduokime savo pavyzdžio esmę, kuri būtų kodas „JavaScript“.
„JavaScript“ kodas
Pirmiausia turime inicijuoti žemėlapį naudodami funkciją makeChart ir joje apibrėžti bendrąsias šio pasirinkimo galimybes, nes su šia funkcija galime ne tik kurti žemėlapius, bet ir įvairią visų rūšių grafiką. Tam mes apibrėžiame tekstų tipą, žemėlapio modelį, mastelio keitimo lygius ir net šriftą:
AmCharts.makeChart ("Animatedmap", {type: "map", fontSize: 20, balloon: {horizontalPadding: 20, verticalPadding: 15}, creditsPosition: "top-right", dataProvider: {map: "worldLow", zoomLevel: 3,5, mastelio keitimasIlguma: -55, mastelio keitimas Platuma: 42,})Be to, mes galime keisti kitas žemėlapio parinktis, pvz., Spalvas, linijas ir animacijų, kurias galime naudoti pagal pasirinktą žemėlapį, trukmę, šiuo atveju tai yra žemėlapis, vaizduojantis skrydžio žemėlapius, kad galėtume greitai jis gali eiti lėktuvo piktograma ir kiek toli galite stovėti tarp taško ir taško.
areaSettings: {unlistedAreasColor: "# 9bc5f5"}, imagesSettings: {color: "# 4e985c", rollOverColor: "# 4e985c", selectedColor: "# 4e985c", pauseDuration: 0.2, animationDuration: 2.5: AdjustAnimationApeation {color: "# 4e985c", alfa: 0.4}Kai būsime patenkinti pasirinktomis galimybėmis, turime tik pamatyti, kaip mūsų animacinis žemėlapis atrodo naršyklėje.
Tai, kaip mes tai matome, atrodo gana gerai ir leis mums suteikti programai kitokį stilių, kad būtų galima paprastai pateikti sudėtingus scenarijus, naudojant „JavaScript“ ir trečiųjų šalių bibliotekos, kurios mums labai palengvina gyvenimą.
animacinis žemėlapis JavaScript.zip 1.86K 169 atsisiuntimai
