В момента разнообразието от приложения, които можем да намерим в мрежата, варира от най -простите до най -сложните, които могат да представляват различни сценарии, които благодарение на новите технологии са много по -лесни за постигане.
Един от тези много сценарии е възможността за представяне на маршрути на карта и въпреки че може да звучи като задача, която може да ни отнеме седмици, за да завършим, благодарение на библиотеката на amCharts можем да го направим без възможно най -малко усилия.
HTML код
Нашият код HTML Ще бъде съвсем проста, ще има стандартна структура и важното в нея е да се включат библиотеките на amChartsкакто и нашата таблица със стилове и .js файл. където ще свършим по -голямата част от работата:
Анимирана карта с JavaScriptЕдна от основните части на нашия HTML е да добавим div, който ще има идентификационния номер, който ще използваме за изобразяване на нашата карта, и той е този, който ще свържем в нашия .js, в този случай го наричаме анимирана карта.
Таблица със стилове
Нашият стилов лист ще бъде доста прост, там ще определим само ширината и височината, за да покажем нашата карта, в този случай ще го направим на цял екран:
тяло, html {ширина: 100%; височина: 100%; марж: 0} #AnimationMap {ширина: 100%; височина: 100%; }След като това бъде направено, нека предадем ядрото на нашия пример, което би бил кодът JavaScript.
JavaScript код
Първо трябва да инициализираме нашата карта с функцията makeChart и в него дефинирайте общите опции за това, тъй като с тази функция можем не само да създаваме карти, но и различни графики от всякакъв вид. За това дефинираме типа, модела на картата, нивата на мащабиране и дори шрифта за текстовете:
AmCharts.makeChart ("Animatedmap", {type: "map", fontSize: 20, balloon: {horizontalPadding: 20, verticalPadding: 15}, creditsPosition: "горе-вдясно", dataProvider: {map: "worldLow", zoomLevel: 3.5, zoomLongitude: -55, zoomLatitude: 42,});В допълнение към това можем да променим други опции на картата, като цветове, линии и продължителност на анимациите, които можем да използваме според картата, която сме избрали, в този случай това е карта, която представя картите на полета, за да можем как бързо може да стигне до иконата на самолета и докъде можете да застанете между точка и точка.
areaSettings: {unlistedAreasColor: "# 9bc5f5"}, imagesSettings: {color: "# 4e985c", rollOverColor: "# 4e985c", selectedColor: "# 4e985c", pauseDuration: 0.2, animationDuration: 2.5, AdjunationSpeed: 2.5, {color: "# 4e985c", алфа: 0.4}След като сме доволни от опциите, които сме поставили, просто трябва да видим как изглежда нашата анимирана карта в браузъра.
Начинът, по който го виждаме, изглежда доста добре и ще ни позволи да придадем на приложението си различен стил, за да представим трудните сценарии по прост начин, като използваме предимствата на JavaScript и библиотеки на трети страни, които правят живота ни много по-лесен.
анимирана карта JavaScript.zip 1.86K 169 изтегляния
