För närvarande varierar mångfalden av applikationer som vi kan hitta på webben från det enklaste till det mest komplexa, vilket kan representera olika scenarier som tack vare ny teknik är mycket lättare att uppnå.
Ett av dessa många scenarier är möjligheten att representera rutter på en karta, och även om det kan låta som en uppgif.webpt som kan ta oss veckor att slutföra, tack vare biblioteket amCharts vi kan göra det utan minsta möjliga ansträngning.
HTML -kod
Vår kod HTML Det kommer att vara ganska enkelt, det kommer att ha en standardstruktur och det som är viktigt att göra i det är att göra inkluderingar av biblioteket i amChartssamt vår formatmall och .js -fil. där kommer vi att göra det mesta av arbetet:
Animerad karta med JavaScriptEn av de grundläggande delarna i vår HTML är att lägga till en div som kommer att ha det ID som vi kommer att använda för att återge vår karta, och det är det som vi kommer att länka till i vår .js, i det här fallet kallar vi det animerad karta.
Stilblad
Vår stilark kommer att vara ganska enkel, där kommer vi bara att definiera bredd och höjd för att visa vår karta, i det här fallet kommer vi att göra det i helskärm:
kropp, html {bredd: 100%; höjd: 100%; marginal: 0} #AnimationMap {bredd: 100%; höjd: 100%; }När detta är gjort, låt oss passera kärnan i vårt exempel, vilket skulle vara koden JavaScript.
JavaScript -kod
Först måste vi initiera vår karta med funktionen makeChart och inom det definiera de allmänna alternativen för detta, eftersom vi med denna funktion inte bara kan skapa kartor utan också olika grafik av alla slag. För detta definierar vi typen, kartmodellen, zoomnivåerna och till och med teckensnittet för texterna:
AmCharts.makeChart ("Animerad karta", {typ: "karta", fontSize: 20, ballong: {horizontalPadding: 20, verticalPadding: 15}, creditsPosition: "uppe till höger", dataProvider: {map: "worldLow", zoomLevel: 3.5, zoomLongitude: -55, zoomLatitude: 42,});Utöver detta kan vi ändra andra alternativ på kartan, till exempel färger, linjer och varaktighet för animationerna som vi kan använda enligt den karta vi har valt, i det här fallet är det en karta för att representera flygkartor så att vi kan hur snabbt kan det gå flygplansikonen och hur långt du kan stå mellan punkt och punkt.
areasSettings: {unlistedAreasColor: "# 9bc5f5"}, imagesSettings: {color: "# 4e985c", rollOverColor: "# 4e985c", selectedColor: "# 4e985c", pauseDuration: 0.2, animationDuration: 2.5, adjustAnimationSpeed: 2.5 {color: "# 4e985c", alfa: 0.4}När vi är nöjda med alternativen vi har placerat måste vi bara se hur vår animerade karta ser ut i webbläsaren.
Hur vi ser det ser ganska bra ut och kommer att tillåta oss att ge vår applikation en annan stil för att på ett enkelt sätt kunna representera svåra scenarier, detta med fördelarna med JavaScript och tredjepartsbibliotek som gör livet mycket enklare för oss.
animerad karta JavaScript.zip 1.86K 169 Nedladdningar
