Animeret kort med JavaScript

I øjeblikket spænder mangfoldigheden af ​​applikationer, som vi kan finde på nettet, fra de enkleste til de mest komplekse, hvilket kan repræsentere forskellige scenarier, som takket være nye teknologier er meget lettere at opnå.

Et af disse mange scenarier er muligheden for at repræsentere ruter på et kort, og selvom det kan lyde som en opgave, der kan tage os uger at gennemføre, takket være biblioteket amCharts vi kan gøre det uden den mindst mulige indsats.

HTML -kode

Vores kode HTML Det vil være ganske enkelt, det vil have en standardstruktur, og det, der er vigtigt at gøre i det, er at lave inkluderingerne af biblioteket af amChartssamt vores stylesheet og .js -fil. hvor vi vil gøre det meste af arbejdet:

 Animeret kort med JavaScript

En af de grundlæggende dele af vores HTML er at tilføje en div, der vil have det id, som vi vil bruge til at gengive vores kort, og det er det, vi vil linke i vores .js, i dette tilfælde kalder vi det animeret kort.

Stilark

Vores typografiark vil være ganske enkelt, der vil vi kun definere bredden og højden for at vise vores kort, i dette tilfælde vil vi gøre det i fuld skærm:

 krop, html {bredde: 100%; højde: 100%; margin: 0} #AnimationMap {bredde: 100%; højde: 100%; }

Når dette er gjort, lad os passere kernen i vores eksempel, som ville være koden JavaScript.

JavaScript -kode

Først skal vi initialisere vores kort med funktionen makeChart og inden for det definerer de generelle muligheder for dette, da vi med denne funktion ikke kun kan oprette kort, men også forskellige grafikker af enhver art. Til dette definerer vi typen, kortmodellen, zoomniveauerne og endda skrifttypen for teksterne:

 AmCharts.makeChart ("Animeret kort", {type: "map", fontSize: 20, ballon: {horizontalPadding: 20, verticalPadding: 15}, creditsPosition: "top-right", dataProvider: {map: "worldLow", zoomLevel: 3,5, zoomLængdegrad: -55, zoomLatitude: 42,});

Ud over dette kan vi ændre andre muligheder på kortet, såsom farver, linjer og varighed af de animationer, som vi kan bruge i henhold til det kort, vi har valgt, i dette tilfælde er det et kort til at repræsentere flyvekort, så vi kan hvordan hurtigt kan det gå flyikonet og hvor langt du kan stå mellem punkt og punkt.

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

Når vi er tilfredse med de muligheder, vi har placeret, skal vi bare se, hvordan vores animerede kort ser ud i browseren.

Hvordan vi ser det ser godt ud og giver os mulighed for at give vores applikation en anden stil for på en enkel måde at repræsentere vanskelige scenarier, dette ved at bruge fordelene ved JavaScript og tredjepartsbiblioteker, der gør livet meget lettere for os.

animeret kort JavaScript.zip 1.86K 169 Downloads