# Как да интегрирате карта за мобилност в своя сайт? > Интегрирайте ROOTE карта в сайта си: отзивчив iframe, филтри за колела, тоалетни, автобуси и трамваи, търсене на град и предаване на параметри. Source: https://www.roote.ai/bg/guides/kak-da-integrirate-karta-za-mobilnost-vashiya-sait/ Language: bg Author: ROOTE За да интегрирате карта за мобилност в своя сайт без да изграждате цял потребителски интерфейс, използвайте ROOTE iframe. Вграждането може да приема търсене на град и подходящи филтри за страницата: колела за велосипедни гидове, тоалетни за WC гид, автобуси и трамваи за транспорт. Примерите в това ръководство използват embed.roote.ai, домейнът включен в ROOTE ръководствата. Общата документация също описва интеграцията на map.roote.ai и разграничаване на параметрите за камера от тези за пълно търсене. ## Добавяне на отзивчив iframe Този блок отваря търсене за колела в Бордо с приближение 15. URL се конструира в кода; заглавието на iframe описва съдържанието му за екранни четещи устройства. Адаптирайте това заглавие към езика на страницата си. ``` ``` В HTML атрибут разделителите & се изписват като &. Ширината 100% следва тази на контейнера. Запазете височина подходяща за мобилни устройства и избягвайте да поставяте важни контроли извън видимата зона. ## Избор на режими, съответстващи на страницата | Необходимост | Параметър на embed | | --- | --- | | Колела | modes=bicycle | | Тоалетни | modes=toilets | | Автобус | modes=bus | | Трамвай | modes=tram | | Автобус и трамвай | modes=bus,tram | | Колела и тоалетни | modes=bicycle,toilets | Тези стойности са за маршрута embed ROOTE свързан с категории мобилност, услуги и трансит. Те не заместват REST параметрите: Услуги използва types, а Транзит използва modes. Карта центрирана върху град не гарантира, че всяка категория има резултати там. ## Разграничаване на камера и начало на търсенето lat и lon позиционират камерата. Те обаче не са достатъчни, в описания договор на картата, за създаване на локално търсене. За възстановяване на познато търсене използвайте search_lat, search_lon и search_label с режимите и нивото на приближение. ``` https://embed.roote.ai/?search_lat=44.8416106&search_lon=-0.5810938&search_label=Bordeaux&zoom=15&modes=bus,tram ``` Горните коориданти са референтна точка в Бордо, не позиция на потребител. Ако добавите и параметри за камера, може да показвате различна зона, като същевременно запазите използваната точка за изчисляване на разстояния. Правете това само ако разделянето е желано. [Документация на параметрите на ROOTE картата](https://doc.roote.ai/map) ## Конструиране на URL без загуба на специални символи Използвайте URL и URLSearchParams вместо ръчно конкатениране. Това кодира интервали, акценти и разделители. Този код е предназначен за браузър и създава адреса на iframe от въведено място. ``` const embedUrl = new URL('https://embed.roote.ai/'); embedUrl.searchParams.set('q', 'Place des Quinconces, Bordeaux'); embedUrl.searchParams.set('modes', 'bicycle,toilets'); embedUrl.searchParams.set('zoom', '15'); document.querySelector('iframe').src = embedUrl.toString(); ``` ## Запазване на контекста при пълната карта Връзка към map.roote.ai трябва да съдържа текущото състояние на търсенето, ако е известно. Създаването на URL без параметри губи града, режимите или нивото на приближение. Запазвайте общ URL обект при актуализации от вашата страница. ``` const fullMapUrl = new URL('https://map.roote.ai/'); fullMapUrl.search = embedUrl.search; const link = document.querySelector('[data-open-map]'); link.href = fullMapUrl.toString(); link.target = '_blank'; link.rel = 'noopener noreferrer'; ``` Този код пази параметрите, известни на родителската страница. Ако потребител промени търсенето във iframe, родителят не може директно да прочете URL на друг домейн. За извличане на състоянието, е нужен явно реализиран и документиран механизъм, например обмен postMessage с валидиране на източник. Не изобретявайте имена на събития, които embed не предоставя. ## Управление на локализацията и мобилните взаимодействия allow="geolocation" разрешава на iframe да иска местоположение, според съгласието и политика за разрешения на сайта. Отказът трябва да позволява използване на търсене на град. Не изисквайте позиция веднага при зареждане, ако читателят не е избрал това. При статия, доброволната активация на картата може да предотврати прихващане на жестове при скролиране или приближение по време на четене. Контролът трябва да е достъпен с клавиатура и ясно именуван. Проверявайте промени в ориентацията и тесен екран, не само десктоп версия. ## Проверка на резултата и състояния на неизправност Тествайте всеки филтър, познат град, зона с малко данни, невалидно търсене и недостъпна категория. Карта без маркери сама по себе си не показва дали търсенето е празно или има грешка. Запазете съобщенията от embed и лесен достъп до пълната карта. [Разграничаване на липса на резултат и API грешка](https://www.roote.ai/bg/guides/prazni-rezultati-ili-greshka-api-kak-da-otlichim/) [Избор между embed, API и MCP](https://www.roote.ai/bg/guides/api-ili-mcp-izbor-za-integraciya-na-danni-za-mobilnost/) [Примерно ръководство за намиране на тоалетни](https://www.roote.ai/bg/guides/kak-da-namerya-bezplatni-publichni-toaleti-nyama---osi/) ## Често задавани въпроси ### Трябва ли да поставя API ключ в iframe? Публичните URL тук не съдържат такъв. Не поставяйте тайни в embed URL или клиентския код. ### Увеличава ли zoom=15 радиуса на търсене? Zoom настройва изгледа. Не го бъркайте с радиуса на API заявка; проверявайте параметрите за търсене на използвания интерфейс. ### Разбира ли родителят промените във iframe? Той знае параметрите, които предава. Вътрешните промени изискват документиран обмен между двата домейна.