Постоје случајеви у којима страница или веб локација морају проширити ову функцију, а Гоогле мапе то не пружају. У овим приликама можемо користити Полимапс, књижара Јавасцрипт бесплатан и отворен извор са којим можемо имплементирати мапе било које врсте и функционалности на нашу веб страницу.
Полимапс је идеалан за приказивање информација на различитим нивоима земаља, градова, па чак и појединачних улица, захваљујући својој технологији Свг (Скалабилна векторска графикас) који није ништа друго до векторски формат слике заснован на КСМЛ која пружа подршку за интеракцију и анимацију дводимензионалне графике, већ видело да то помало иде Полимапс Погледајмо његове методе, контроле и неке примере његове имплементације.
Инстантинг Полимапс
Сваки Полимап почиње инстанцом методе Мапа (), али пре него што изградимо мапу, увозимо простор имена у локалну променљиву:
вар по = орг.полимапс;
Полимапс не користи традиционалне Јавасцрипт конструкторе, у том случају Полимапс нам пружа методе које интерно креирају методе. Додатно, користи метод ланчавања, све методе враћају инстанцу мап (). Такође можемо уметнути у нови СВГ документ, а затим слици додати ознаку:
вар мап = по.мап () .цонтаинер (доцумент.боди.аппендЦхилд (по.свг ("свг"))) .адд (по.имаге (). урл (…)) Такође не можемо послати ништа у методу контејнер и инстанца мапе ће вратити вредност повезану са пољем и служиће и за постављање и за добијање:мап.цонтаинер ();Слојеви
У најједноставнијим случајевима, мапе имају један слој, али се могу састојати од више слојева који су један изнад другог, прихваћени параметри су следећи:
- {Кс} - Координата колоне.
- {И} - Координација реда.
- {Б} - Гранична кутија.
- {З} - Ниво зумирања.
- {С} - Домаћин.
Бледа зора
Ова мапа има ограничени дизајн који добро функционише са мноштвом информативних тачака, више је фокусирана на истицање информација у првом плану. Ова мапа је изграђена са једним слојем, има координате и има неке основне интерактивне контроле, добра је полазна тачка за почетак прилагођавања:
Ево целог изворног кода:
вар по = орг.полимапс; вар мап = по.мап () .цонтаинер (доцумент.гетЕлементБиИд ("мап"). аппендЦхилд (по.свг ("свг"))) .адд (по.интерацт ()) .адд (по.хасх ()) ; мап.адд (по.имаге () .урл (по.урл ("хттп: // {С} тиле.цлоудмаде.цом" + "/1а1б06б230аф4ефдбб989еа99е9841аф" // хттп://цлоудмаде.цом/регистер + "/998 /256/{З-лек.еуропа.еу/[Кс изненађујуће/[И-лек.еуропа.еу.пнг ") .хостови ([" а. "," Б. "," Ц. "," "]] ))); мап.адд (по.цомпасс () .пан ("нема")); Погледајмо сада много потпунији пример
Мрежа плочица
У овом примеру имамо различите врсте зумирања, као и управљање различитим слојевима, додатно можемо ротирати подручје карте и на тај начин моћи да видимо друга подручја у њој, да видимо неке њене снимке:
И на крају изворни код, тако да га можете сами испробати:
вар по = орг.полимапс; вар див = доцумент.гетЕлементБиИд ("мапа"), свг = див.аппендЦхилд (по.свг ("свг")), г = свг.аппендЦхилд (по.свг ("г")); вар мап = по.мап () .цонтаинер (г) .тилеСизе ({к: 128, и: 128}) .англе (.3) .адд (по.интерацт ()) .он ("ресизе", ресизе) ; промените величину (); мап.адд (по.лаиер (грид)); вар рецт = г.аппендЦхилд (по.свг ("рецт")); рецт.сетАттрибуте ("ширина", "50%"); рецт.сетАттрибуте ("висина", "50%"); функција ресизе () {иф (ресизе.игноре) ретурн; вар к = див.цлиентВидтх / 2, и = див.цлиентХеигхт / 2; г.сетАттрибуте ("трансформ", "транслате (" + (к / 2) + "," + (и / 2) + ")"); ресизе.игноре = труе; мап.сизе ({к: к, и: и}); ресизе.игноре = фалсе; } функционална мрежа (плочица) {вар г = тиле.елемент = по.свг ("г"); вар рецт = г.аппендЦхилд (по.свг ("рецт")), величина = мап.тилеСизе (); рецт.сетАттрибуте ("видтх", сизе.к); рецт.сетАттрибуте ("висина", величина.и); вар тект = г.аппендЦхилд (по.свг ("текст")); тект.сетАттрибуте ("к", 6); тект.сетАттрибуте ("и", 6); тект.сетАттрибуте ("ди", ".71ем"); тект.аппендЦхилд (доцумент.цреатеТектНоде (тиле.кеи)); } вар спин = 0; сетИнтервал (фунцтион () {иф (спин) мап.англе (мап.англе () + спин);}, 30); функцијски тастер (е) {свитцх (е.кеиЦоде) {цасе 65: спин = е.типе == "кеидовн"? -.004: 0; пауза; случај 68: спин = е.типе == "кеидовн"? .004: 0; пауза; }} виндов.аддЕвентЛистенер ("кеидовн", кеи, труе); виндов.аддЕвентЛистенер ("кеиуп", кеи, труе); виндов.аддЕвентЛистенер ("промени величину", промени величину, лажно);
Да ли вам се допао и помогао овај водич?Можете наградити аутора притиском на ово дугме да бисте му дали позитиван поен 
