Aby wbudować mapę mobilności na swojej stronie bez tworzenia całego interfejsu, użyj iframe ROOTE. Embed może przyjąć wyszukiwanie miasta oraz filtry dopasowane do strony: rowery dla przewodnika rowerowego, toalety dla przewodnika WC, autobusy i tramwaje dla transportu.
Przykłady w tym przewodniku używają embed.roote.ai, domeny wbudowanej w przewodniki ROOTE. Dokumentacja ogólna opisuje także integrację map.roote.ai i rozróżnia parametry kamery od pełnego zapytania.
Dodanie responsywnego iframe
Ten blok otwiera wyszukiwanie rowerowe w Bordeaux z zoomem 15. URL jest zbudowany w kodzie; tytuł iframe opisuje jego zawartość dla czytników ekranu. Dostosuj ten tytuł do języka swojej strony.
<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>W atrybucie HTML separatorki & zapisuje się jako &. Szerokość 100% dopasowuje się do kontenera. Zachowaj wysokość użyteczną na urządzeniach mobilnych i unikaj umieszczania niezbędnych kontrolek poza widocznym obszarem.
Wybór trybów odpowiadających stronie
| Potrzeba | Parametr w embedzie |
|---|---|
| Rowery | modes=bicycle |
| Toalety | modes=toilets |
| Autobusy | modes=bus |
| Tramwaje | modes=tram |
| Autobusy i tramwaje | modes=bus,tram |
| Rowery i toalety | modes=bicycle,toilets |
Te wartości pochodzą ze ścieżki embed ROOTE powiązanej z rodzinami mobilności, usługami i transportem. Nie zastępują parametrów REST: Usługi używa types, a Transport używa modes. Mapa skupiona na mieście nie gwarantuje, że każda rodzina ma tam wyniki.
Rozróżnienie kamery i punktu wyszukiwania
lat i lon ustawiają kamerę. Nie wystarczają, według dokumentowanego kontraktu mapy, by utworzyć wyszukiwanie w pobliżu. Aby przywrócić znane wyszukiwanie, użyj search_lat, search_lon i search_label wraz z modes i zoom.
https://embed.roote.ai/?search_lat=44.8416106&search_lon=-0.5810938&search_label=Bordeaux&zoom=15&modes=bus,tramPowyższe współrzędne to punkt odniesienia w Bordeaux, nie pozycja użytkownika. Jeśli dodasz też parametry kamery, możesz pokazać inny obszar, zachowując punkt używany do odległości. Zrób to tylko, jeśli takie rozdzielenie jest zamierzone.
Dokumentacja parametrów mapy ROOTE
Budowanie URL bez utraty znaków specjalnych
Używaj URL i URLSearchParams zamiast ręcznego łączenia. To koduje spacje, akcenty i separatorki. Ten kod jest przeznaczony dla przeglądarki i tworzy adres iframe z wprowadzonego miejsca.
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();Zachowanie kontekstu przy przejściu do pełnej mapy
Link do map.roote.ai powinien zachować bieżący stan wyszukiwania, jeśli go znasz. Ponowne tworzenie URL bez parametrów powoduje utratę miasta, trybów lub zoomu. Zachowaj wspólny obiekt URL przy aktualizacjach strony.
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';Ten kod zachowuje parametry znane stronie nadrzędnej. Jeśli użytkownik zmieni wyszukiwanie wewnątrz iframe, rodzic nie może bezpośrednio odczytać jego URL z innej domeny. Aby odzyskać ten stan, potrzebny jest jawnie zaimplementowany i opisany mechanizm, np. wymiana postMessage z weryfikacją pochodzenia. Nie wymyślaj nazw zdarzeń nieudostępnionych przez embed.
Obsługa lokalizacji i interakcji na urządzeniach mobilnych
allow="geolocation" zezwala iframe na żądanie lokalizacji, o ile jest zgoda i polityka uprawnień strony. Odmowa powinna pozwolić na korzystanie z wyszukiwania miasta. Nie żądaj pozycji od razu po wejściu na stronę, jeśli czytelnik tego nie wybrał.
Na artykule świadoma aktywacja mapy może zapobiec przechwytywaniu gestów przewijania czy zoomu podczas czytania. Kontrola musi być dostępna z klawiatury i wyraźnie opisana. Sprawdź zmiany orientacji i wąski ekran, nie tylko wersję desktop.
Sprawdzenie wyniku i stanów awarii
Testuj każdy filtr, znane miasto, obszar z małą ilością danych, nieprawidłowe wyszukiwanie oraz niedostępne rodziny. Mapa bez znacznika sama nie informuje, czy wyszukiwanie jest puste czy wystąpił błąd. Zachowaj komunikaty embedu i łatwy dostęp do pełnej mapy.
Rozróżnienie braku wyniku i błędu API
Przykład przewodnika do znajdowania toalet
Często zadawane pytania
Czy trzeba użyć klucza API w iframe?
Publiczne URL pokazane tutaj go nie zawierają. Nie umieszczaj sekretu w URL embed czy kodzie klienta.
Czy zoom=15 powiększa promień wyszukiwania?
Zoom reguluje widok. Nie utożsamiaj go z promieniem zapytania API; sprawdź parametry wyszukiwania używanego interfejsu.
Czy rodzic zna zmiany wewnątrz iframe?
Zna parametry, które przesyła. Wewnętrzne zmiany wymagają opisanej wymiany danych między domenami.