Има някои случаи, когато страницата или уебсайтът трябва да разширят тази функционалност, а Google maps не я предоставя. В тези случаи можем да използваме Поликарти, книжарница Javascript безплатен и с отворен код, с който можем да внедрим карти от всякакъв тип и функционалност на нашия уебсайт.
Polymaps е идеален за показване на информация на различни нива на държави, градове и дори отделни улици, благодарение на своята технология на Svg (Мащабируема векторна графикаs), което не е нищо повече от векторизиран формат на изображението, базиран на XML която осигурява поддръжка за взаимодействието и анимацията на двуизмерна графика, вече видях, че става малко Поликарти Нека видим неговите методи, контроли и някои примери за неговото прилагане.
Инстанциращи Polymaps
Всеки Polymap започва с екземпляр на метода map (), но преди да изградим карта, импортираме пространството от имена в локална променлива:
var po = org.polymaps;
Polymaps не използва традиционни конструктори на Javascript, в този случай Polymaps ни предоставя методи, които създават вътрешни екземпляри на методите. Освен това той използва верижно свързване на методи, всички методи връщат екземпляра map (). Можем също да вмъкнем в нов SVG документ и след това да добавим маркер към изображението:
var map = po.map () .container (document.body.appendChild (po.svg ("svg"))) .add (po.image (). url (…)) Също така не можем да изпращаме нищо по метода на контейнер и екземплярът на картата ще върне стойността, свързана с полето, и ще служи както за задаване, така и за получаване:map.container ();Слоеве
В най -простите случаи картите имат един слой, но те могат да се състоят от множество слоеве, които са един върху друг, приетите параметри са следните:
- {X} - Колоната на колоната.
- {Y} - Координат на ред.
- {B} - Ограничаваща кутия.
- {Z} - Ниво на увеличение.
- {S} - Домакин.
Бледа зора
Тази карта има ограничен дизайн, който работи добре с много информационни точки, тя е по -фокусирана върху подчертаването на информация на преден план. Тази карта е изградена с един слой, координати и има някои основни интерактивни контроли, това е добра отправна точка, за да започнете да я персонализирате:
Ето пълния изходен код:
var po = org.polymaps; var map = po.map () .container (document.getElementById ("map"). appendChild (po.svg ("svg"))) .add (po.interact ()) .add (po.hash ()) ; map.add (po.image () .url (po.url ("http: // {S} tile.cloudmade.com" + "/1a1b06b230af4efdbb989ea99e9841af" // http://cloudmade.com/register + "/998 /256/{Z-lex.europa.eu/[X изненадващо/[Y-lex.europa.eu.png.webp ") .hosts ([" a. "," B. "," C. "," "]) ))); map.add (po.compass () .pan ("няма")); Сега нека видим много по -пълен пример
Решетка за плочки
В този пример имаме различни видове мащабиране, както и управлението на различни слоеве, освен това можем да завъртим областта на картата и по този начин да можем да видим други области в нея, нека да видим някои снимки от нея:
И накрая изходния код, за да можете да го изпробвате сами:
var po = org.polymaps; var div = document.getElementById ("карта"), svg = div.appendChild (po.svg ("svg")), g = svg.appendChild (po.svg ("g")); var map = po.map () .container (g) .tileSize ({x: 128, y: 128}) .angle (.3) .add (po.interact ()) .on ("resize", resize) ; преоразмеряване (); map.add (po.layer (решетка)); var rect = g.appendChild (po.svg ("rect")); rect.setAttribute ("ширина", "50%"); rect.setAttribute ("височина", "50%"); функция resize () {if (resize.ignore) връщане; var x = div.clientWidth / 2, y = div.clientHeight / 2; g.setAttribute ("преобразуване", "превод (" + (x / 2) + "," + (y / 2) + ")"); resize.ignore = true; map.size ({x: x, y: y}); resize.ignore = false; } функционална мрежа (плочка) {var g = tile.element = po.svg ("g"); var rect = g.appendChild (po.svg ("rect")), размер = map.tileSize (); rect.setAttribute ("ширина", размер.x); rect.setAttribute ("височина", размер.y); var text = g.appendChild (po.svg ("текст")); text.setAttribute ("x", 6); text.setAttribute ("y", 6); text.setAttribute ("dy", ".71em"); text.appendChild (document.createTextNode (tile.key)); } var spin = 0; setInterval (function () {if (spin) map.angle (map.angle () + spin);}, 30); функционален ключ (д) {превключвател (e.keyCode) {случай 65: spin = e.type == "keydown"? -.004: 0; почивка; случай 68: spin = e.type == "keydown"? .004: 0; почивка; }} window.addEventListener ("keydown", ключ, вярно); window.addEventListener ("keyup", key, true); window.addEventListener ("преоразмеряване", преоразмеряване, невярно);
Хареса ли ви и помогнахте на този урок?Можете да възнаградите автора, като натиснете този бутон, за да му дадете положителна точка 
