Онлайн карти - как да добавите карта към вашия сайт
Почти всички съвременни онлайн карти, има друга функция. Повечето от тях се даде възможност на потребителя да направи свои собствени бележки и да ги споделяте с други хора. Именно тази способност често се използва днес в различни онлайн магазини и фирми на своите уебсайтове.
В статията по-долу ще разгледаме няколко примера за добавянето на онлайн карти на уебсайта, както и да ви кажа как да добавите вашите бележки върху картата и направи от тях максимална полза.
Как да добавите карта към вашия сайт
Ако искате да добавите към вашата карта на сайта на Google или Yandex със свои собствени етикети, тогава ние ще ви кажа как да го направя.
Съвременните онлайн карти напълно решаване на всички проблеми, на които трябва да се покаже на потребителя определено място и да им се даде кратко фон. Ето защо, ако вие - собственик на сайта, който е истински бизнес, вие ще бъдете сигурни, да се обърне внимание на технологията, която ще бъде обсъдено в днешната статия.
Как да вмъкнете карти
Освен това, в действителност, Google и Yandex има редица услуги, които ви позволяват да поставите знак на картата. За тях, ние също ще кажа, но за по-малко детайли. Сега ние се фокусираме върху това, което е позволено да правите основни картографски гиганти.
Своя отпечатък върху Google Maps
Тази услуга позволява на потребителя да изпълнява следните действия:
- добавете етикети с описания и снимки;
- получите упътвания за измерване на разстоянието между неговите точки;
- Начертайте произволен ред, с измерване на разстояние и площ формира на затворени фигури.
На началната страница на услугата е даден списък на създадените от вас карти по-рано (може да е празен) и бутона "Създаване на нова карта". С нея и да започне да работи. След като кликнете ще видите познатата guglokarta малко необичайни контроли. Разгледайте ги внимателно:
Също така трябва да се обърне внимание на малкия бутон "базова карта" в страничната лента. с негова помощ можете да промените стила на картата (например, предпочитам стила на "Спутник").
Кой трябва да се отбележи, за да зададете знака на картата, изберете желаната област и скалата, по която работим, и след това да се активира функцията "Добавяне на маркер", а ние натиснете точката. Вие ще видите един малък маркер и върху изскачащия прозорец с две текстови полета за въвеждане: име на маркер и кратко описание:
След като запазите въведените суровите данни маркерът ви ще бъдат добавени към текущия активен слой, ще имате няколко нови функции за местоположението си. На първо място, в страничния панел над етикета ще бъде раздел "индивидуален стил". Като кликнете върху него, можете да изберете подпис, който ще се появи около маркера. Като подпис марка може да бъде име или се свежда до едно описание линия.
На второ място, новите инструменти ще се появи в изскачащ прозорец над добавя маркер. В допълнение към описващи промени, можете да промените външния вид на маркера, изберете една от стандартните икони или дори да се качват снимките си ( "Още" бутон - "икона на потребителя"). Също така, с помощта на специален бутон на вашите снимки, които могат да качват и да бъдат показани в панела за описание. И накрая, има възможност за маршрут между точката и друга дестинация сте добавили, като използвате бутона предпоследната. В резултат на това можете да получите нещо подобно:
Бих искал малко по въпроса за оптимизиране на генерирания код:
Фактът, че по подразбиране плъг-ин рамката си с картата е ясно посочено измерения. Днес, вярно да се направи, когато е възможно, адаптивно vorstku, който автоматично се адаптира към размера на екрана. Според HTML стандарти за рамката не може да определите ширината и височината като процент, така че кодът е по-добре да се отстранят тези опции изобщо, замяна на CSS клас, както и размерът определят след CSS или вградени стилове:
Вариант 1: От класа (по-правилно)
Ето как можете да получите красив и функционален валидно поставена адаптивна Google карта на сайта:
Своя отпечатък върху Yandex карти
Както и в интерфейса "Моите карти" е разделена на страничния панел, който показва списък с етикети, които сте добавили и настройки картата, както и функционални клавиши в горната част, чрез който можете да добавите към етикетите на картата. Възможности тук, макар и по-малък. Можем да добавим стандартни маркери (и, ако е под формата на икони, само без подписите), начертайте линия (аналогов навигационни карти) и полигони. Единствената новост, която не е била в Google е в състояние да показва задръствания. Но това е вярно само за големите градове.
Алгоритъмът е същата, както в "Моите карти". Ние се намери правилният район от картата, активира функцията "етикети" и кликнете върху Добавяне на маркер на правилното място. В изскачащия прозорец, можете да определите цвета на маркера, тип ( "запетая" или "точка"), както и малко подправка, като добавите текст или персонализирани икони (в този случай вашият подпис не се вижда). В допълнение към подписа, които ще бъдат видими за правото на етикета, и можете да добавите кратко описание, които ще бъдат показани, като кликнете върху маркера.
След добавянето на етикет може да завърже приликата им маршрут. За да активирате тази функцията "линии" и привлече опорните точки на маршрута на бъдещето. От своя край на последната точка, кликнете отново и изберете "Край". Странното е, че в тази функция, има няколко предимства пред маршрути на Google. На първо място, лежеше на линията може да бъде, дори и когато няма пътища, които ви позволява да се изгради пешеходна начин по-точно, и второ, в страничната лента показва дължината на крайния ред, което също е много удобно.
По принцип, това е всичко. За да получите код за карта, за да си маркери кликнете до бутона "Запазване и продължаване" (лента по-долу) и в отворения прозорец, коригира размера на видимата част на картата. За адаптивност препоръчваме да активирате опцията "Stretch ширина". след това ще бъде достатъчно, за да натиснете бутона "Вземи код карта":
Други онлайн карти
Google и Yandex, разбира се, са фаворити в нашата страна. Въпреки това, в чужбина има няколко достойни услуги, които използват едни и същи карти в Google или си собствени и позволяват да се прилагат не само техните тагове, но също така да се създаде пълноправен представяне на маршрута! Накратко поговорим за някои от тях.
OpenStreetMap (OSM)
OpenStreetMap карти са по-скоро като плановете на мястото. Не е подробно представяне на ландшафта и къщите, но, въпреки това, те са единствените, онлайн карти, които са напълно създадени от реални хора, както и че може да се изключи. Благодарение на активността на OSM карти на потребителите в някои области на планетата изглеждат дори по-точна информация от guglokarty (въпреки че това не е навсякъде)!
Що се отнася до характеристики, а след това тук имаме достъп до етикетите за инсталиране с описания и тираж маршрути. И, ако имате GPS-тракер, данни за маршрута могат да се изнасят директно към картата с него. Има OpenStreetMap карти и режим на редактиране напреднали. В този режим, като основа за показване на Bing Maps, и можете да ги правите бележки, изготви линии и форми, като "Моите карти" в Google. Всички промени ще се съхраняват в общата карта, така че бъдете внимателни, когато се правят промени, за да не се подвеждат други потребители съзнателно невярна информация!
Тази услуга ви позволява като субстрат за използване на картите от най-популярните ресурси (включително Google и OSM), и върху тях вече са инсталирани множество етикети, форми, линии и дори на снимка или текстовите надписи. С една дума, ако имате нужда да картографира голяма част от най-съществената информация е ScribbleMaps карти трябва да ви помогне с това.
Следва обаче да се отбележи, че има в този сервиз, а броят на отрицателните аспекти. функционална част е достъпна само срещу заплащане на такса за така наречените ВИП-потребител. Но, по принцип, не е необходимо да поставите етикети и снимки, за да бъде не "Випом". И още повече - да се създаде карта и да получите кода, за да го поставите на сайта може да бъде дори без да се регистрират! Ето една противоречива :)
Ако изведнъж искат да покажат на своите посетители не само на място на картата, както и да демонстрират на пътя до него, след това може да ви помогне AniMaps услуги:
AniMaps ви позволява да добавяте стандартен Google карта на маршрута и да го премести да показват определени изображения или текстови обяснения. Скоростта на движение на маршрут, сте си за използване на курсора в прогресията на време върху картата. Резултатът от работата ви ще бъде представен автоматично с маршрут "спира" в избрания от вас област.
Можете да създавате маршрути и само регистрирани потребители могат без да се регистрират, но за да получите кода, който да поставите в сайта си.
Поставяне на картата с един сайт няма да е трудно, ако знаете предварително всички необходими услуги за тази цел. Не е необходимо да си програмист или направете някое от IT-специалист - всичко е направено в визуален режим! На изхода винаги ще стане готов код, който може да бъде просто въвежда в текста на една страница на вашия сайт, без да се налага да инсталирате никакви специални приставки.
Натискът на същата поне основни познания в областта на уеб технологиите, можете да подобрите малко код, получен карти, което го прави адаптивен (както в случая с Google) или чрез добавяне на допълнителни елементи (като в Yandex). Използвайки същите средства на множество чуждестранни онлайн картографски услуги, можете да изненадате вашите потребители дори анимации върху картите! Но по-интересно вашето предложение, толкова повече клиенти ще привличат;)