За да интегрирате карта за мобилност в своя сайт без да изграждате цял потребителски интерфейс, използвайте ROOTE iframe. Вграждането може да приема търсене на град и подходящи филтри за страницата: колела за велосипедни гидове, тоалетни за WC гид, автобуси и трамваи за транспорт.
Примерите в това ръководство използват embed.roote.ai, домейнът включен в ROOTE ръководствата. Общата документация също описва интеграцията на map.roote.ai и разграничаване на параметрите за камера от тези за пълно търсене.
Добавяне на отзивчив iframe
Този блок отваря търсене за колела в Бордо с приближение 15. URL се конструира в кода; заглавието на iframe описва съдържанието му за екранни четещи устройства. Адаптирайте това заглавие към езика на страницата си.
<iframe
title="Carte ROOTE — vélos à Bordeaux"
src="https://embed.roote.ai/?q=Bordeaux&modes=bicycle&zoom=15"
width="100%"
height="480"
loading="lazy"
allow="geolocation"
style="display:block; width:100%; min-height:360px; border:0; border-radius:16px;"
></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 картата
Конструиране на 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 грешка
Примерно ръководство за намиране на тоалетни
Често задавани въпроси
Трябва ли да поставя API ключ в iframe?
Публичните URL тук не съдържат такъв. Не поставяйте тайни в embed URL или клиентския код.
Увеличава ли zoom=15 радиуса на търсене?
Zoom настройва изгледа. Не го бъркайте с радиуса на API заявка; проверявайте параметрите за търсене на използвания интерфейс.
Разбира ли родителят промените във iframe?
Той знае параметрите, които предава. Вътрешните промени изискват документиран обмен между двата домейна.