Momenteel varieert de diversiteit aan toepassingen die we op internet kunnen vinden van de eenvoudigste tot de meest complexe, die verschillende scenario's kunnen vertegenwoordigen die dankzij nieuwe technologieën veel gemakkelijker te realiseren zijn.
Een van deze vele scenario's is de mogelijkheid om routes op een kaart weer te geven, en hoewel het klinkt als een taak die ons weken kan kosten om te voltooien, dankzij de bibliotheek van amCharts we kunnen het zonder de minste inspanning.
HTML code
Onze code HTML Het zal vrij eenvoudig zijn, het zal een standaardstructuur hebben en wat belangrijk is om erin te doen is om de insluitsels van de bibliotheek van amChartsevenals ons stylesheet en .js-bestand. waar we het meeste werk zullen doen:
Geanimeerde kaart met JavaScriptEen van de fundamentele onderdelen van onze HTML is om een div toe te voegen die de ID zal hebben die we zullen gebruiken om onze kaart weer te geven, en het is degene die we zullen linken in onze .js, in dit geval noemen we het geanimeerde kaart.
Stijlblad
Ons stijlblad zal vrij eenvoudig zijn, daar zullen we alleen de breedte en hoogte definiëren om onze kaart weer te geven, in dit geval zullen we het op volledig scherm doen:
body, html {breedte: 100%; hoogte: 100%; marge: 0} #AnimationMap {breedte: 100%; hoogte: 100%; }Zodra dit is gebeurd, laten we de kern van ons voorbeeld doorgeven, wat de code zou zijn JavaScript.
JavaScript-code
Eerst moeten we onze kaart initialiseren met de functie maakGrafiek en definieer daarin de algemene opties hiervan, omdat we met deze functie niet alleen kaarten kunnen maken, maar ook verschillende soorten afbeeldingen. Hiervoor definiëren we het type, het kaartmodel, de zoomniveaus en zelfs het lettertype voor de teksten:
AmCharts.makeChart ("Animatedmap", {type: "map", fontSize: 20, balloon: {horizontalPadding: 20, verticalPadding: 15}, creditsPosition: "top-right", dataProvider: {map: "worldLow", zoomLevel: 3.5, zoomLongitude: -55, zoomLatitude: 42,});Daarnaast kunnen we andere opties van de kaart wijzigen, zoals kleuren, lijnen en duur van de animaties die we kunnen gebruiken volgens de kaart die we hebben gekozen, in dit geval is het een kaart om vluchtkaarten weer te geven, zodat we kunnen hoe snel kan het vliegtuigpictogram gaan en hoe ver je tussen punt en punt kunt staan.
areasSettings: {unlistedAreasColor: "# 9bc5f5"}, imagesSettings: {color: "# 4e985c", rollOverColor: "# 4e985c", selectedColor: "# 4e985c", pauseDuur: 0.2, animatieDuur: 2.5, aanpassenAnimatiesnelheid: 2.5, aanpassenAnimatiesnelheid: lijnen {kleur: "# 4e985c", alfa: 0,4}Als we eenmaal tevreden zijn met de opties die we hebben geplaatst, hoeven we alleen maar te zien hoe onze geanimeerde kaart eruitziet in de browser.
Hoe we het zien, ziet er redelijk goed uit en stelt ons in staat om onze applicatie een andere stijl te geven om moeilijke scenario's op een eenvoudige manier weer te geven, dit met behulp van de voordelen van JavaScript en bibliotheken van derden die het leven veel gemakkelijker voor ons maken.
geanimeerde kaart JavaScript.zip 1,86K 169 downloads
