Animierte Karte mit JavaScript

Derzeit reicht die Vielfalt der Anwendungen, die wir im Web finden, von den einfachsten bis zu den komplexesten, die verschiedene Szenarien darstellen können, die dank neuer Technologien viel einfacher zu erreichen sind.

Eines dieser vielen Szenarien ist die Möglichkeit, Routen auf einer Karte darzustellen, und obwohl es sich wie eine Aufgabe anhört, die Wochen dauern kann, dank der Bibliothek von amCharts Wir können es ohne den geringsten Aufwand tun.

HTML Quelltext

Unser Code HTML Es wird ganz einfach sein, es wird eine Standardstruktur haben und es ist wichtig, die Bibliothek von . aufzunehmen amChartssowie unser Stylesheet und die .js-Datei. Hier werden wir die meiste Arbeit machen:

 Animierte Karte mit JavaScript

Einer der grundlegenden Bestandteile unseres HTML besteht darin, ein div hinzuzufügen, das die ID hat, die wir zum Rendern unserer Karte verwenden werden, und es ist diejenige, die wir in unserer .js verlinken, in diesem Fall nennen wir es animierte Karte.

Stylesheet

Unser Stylesheet wird ziemlich einfach sein, dort werden wir nur die Breite und Höhe definieren, um unsere Karte anzuzeigen, in diesem Fall werden wir dies im Vollbildmodus tun:

 Körper, HTML {Breite: 100%; Höhe: 100%; Rand: 0} #AnimationMap {Breite: 100%; Höhe: 100%; }

Sobald dies erledigt ist, übergeben wir den Kern unseres Beispiels, der der Code wäre JavaScript.

JavaScript-Code

Zuerst müssen wir unsere Karte mit der Funktion initialisieren makeChart und definieren darin die allgemeinen Optionen, da wir mit dieser Funktion nicht nur Karten, sondern auch verschiedene Grafiken aller Art erstellen können. Dazu definieren wir den Typ, das Kartenmodell, die Zoomstufen und sogar die Schriftart für die Texte:

 AmCharts.makeChart ("Animatedmap", {type: "map", fontSize: 20, Balloon: {horizontalPadding: 20, verticalPadding: 15}, creditsPosition: "top-right", dataProvider: {map: "worldLow", zoomLevel: 3.5, zoomLänge: -55, zoomBreite: 42,});

Darüber hinaus können wir andere Optionen der Karte ändern, z. B. Farben, Linien und Dauer der Animationen, die wir gemäß der von uns ausgewählten Karte verwenden können. In diesem Fall handelt es sich um eine Karte zur Darstellung von Flugkarten, damit wir wie können schnell kann es das Flugzeugsymbol gehen und wie weit Sie zwischen Punkt und Punkt stehen können.

 areaSettings: {unlistedAreasColor: "# 9bc5f5"}, imagesSettings: {color: "# 4e985c", rollOverColor: "# 4e985c", selectedColor: "# 4e985c", pauseDuration: 0.2, animationDuration: 2.5, adjustAnimationSpeed: 2.5, adjustAnimationSpeed: Linien {Farbe: "# 4e985c", Alpha: 0,4}

Wenn wir mit den platzierten Optionen zufrieden sind, müssen wir nur noch sehen, wie unsere animierte Karte im Browser aussieht.

Wie wir sehen, sieht es ziemlich gut aus und ermöglicht es uns, unserer Anwendung einen anderen Stil zu geben, um schwierige Szenarien auf einfache Weise darzustellen, dies unter Nutzung der Vorteile von JavaScript und Bibliotheken von Drittanbietern, die uns das Leben erheblich erleichtern.

animierte Karte JavaScript.zip 1.86K 169 Downloads