Liikumiskaardi integreerimiseks oma lehele ilma kogu liidese ise ehitamata kasuta ROOTE iframe'i. Embed võimaldab linnotsingut ja lehele sobivaid filtreid: rattad rattajuhendiks, WC-d tualetijuhendiks, buss ja tramm ühistranspordi jaoks.
Selles juhendis kasutatavad näited põhinevad embed.roote.ai domeenil, mis on ROOTE juhendites standardiseeritud. Ülddokumentatsioon kirjeldab samuti map.roote.ai integratsiooni ja eristab kaamera parameetreid ja otsingu parameetreid.
Lisa paindlik iframe
See plokk avab Bordeaux's rattotsingu suumitasemega 15. URL ehitatakse koodis; iframe päis kirjeldab sisu ekraanilugejatele. Muuda see pealkiri vastavalt oma lehe keelele.
<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 atribuudi puhul kirjutatakse eraldajad & kui &. Laius 100% järgneb konteineri laiusele. Hoia mobiilis piisav kõrgus ning ära aseta olulisi juhtnuppe nähtavast väljaspool.
Vali lehele sobivad liikumisviisid
| Vajaminev | Embed'i parameeter |
|---|---|
| Rattad | modes=bicycle |
| WC-d | modes=toilets |
| Bussid | modes=bus |
| Tramm | modes=tram |
| Buss ja tramm | modes=bus,tram |
| Rattad ja WC-d | modes=bicycle,toilets |
Need väärtused pärinevad ROOTE embed marsruutidest, seotud liikumise, teenuste ja transiidiga. Need ei asenda REST parameetreid: Teenused kasutavad types, Transiit modes. Linnale tsentreeritud kaart ei garanteeri, et igas kategoorias oleks tulemusi.
Kaamera ja otsingu lähtekoha eristamine
lat ja lon määravad kaamera asukoha. Need ei loo kaardi dokumenteeritud lepingu järgi lähedusotsingut. Teadmise otsingu taastamiseks kasuta search_lat, search_lon ja search_label koos modes ja suumiga.
https://embed.roote.ai/?search_lat=44.8416106&search_lon=-0.5810938&search_label=Bordeaux&zoom=15&modes=bus,tramÜlaltoodud koordinaadid on Bordeauxs asukoha viide, mitte kasutaja asukoht. Kui lisad kaamera parameetrid, saad näidata teist ala, säilitades samal ajal distantsi arvutuseks otsingupunkti. Tee seda vaid, kui eristamine on vajalik.
ROOTE kaardi parameetrite dokumentatsioon
URL ehitamine ilma erimärke kaotamata
Kasuta URL ja URLSearchParams asemel manuaalse kokkuliitmise. See kodeerib tühikud, täpitähed ja eraldajad õigesti. Kood on mõeldud brauserile ja loob iframe aadressi sisestatud asukoha põhjal.
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();Konteksti säilitamine täiskaardi suunas
Link map.roote.ai-le peaks sisaldama teadaolevat otsingu olekut. Uue URL loomine parameetriteta kaotab linna, modes või suumi info. Hoia muutusteks ühine URL objekt oma lehel.
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';See kood säilitab teadaolevad parameetrid vanemlehe poolt. Kui kasutaja iframe sees otsingut muudab, ei saa vanem domeeni tõttu URL-i otseselt lugeda. Selle saamiseks on vaja dokumenteeritud mehhanismi, näiteks valideeritud postMessage vahetust. Ära kasuta nime, mida embed ei paku.
Asukoha ja mobiilsete interaktsioonide haldamine
allow="geolocation" lubab iframe'il küsida asukohta, vastavalt kasutaja nõusolekule ja saidi poliitikale. Keeldumine peab jätma linnotsingu saadaval. Ära küsi asukohta kohe lehe laadimisel, kui kasutaja pole seda algatanud.
Artiklis võib kaardi vabatahtlik aktiveerimine vältida kerimise ja suumi häirivaid liigutusi lugemise ajal. Juhtnupp peab olema klaviatuuriga ligipääsetav ja selgelt nimetatud. Kontrolli orientatsiooni muutuseid ja kitsast ekraani, mitte ainult lauaarvuti versiooni.
Tulemuse ja riketega seotud olekute kontrollimine
Testi iga filtrit, tuntud linna, väheste andmetega piirkonda, vigast otsingut ja puuduvat kategooriat. Kaart ilma märgistuseta ei ütle üksi, kas otsing on tühi või rike. Säilita embed'i teated ja juurdepääs täiskaardile.
Erinevuste määratlemine tulemuse puudumise ja API vea vahel
Näide juhendist tualettide leidmiseks
Korduma kippuvad küsimused
Kas iframe'sse tuleb lisada API võti?
Avalikes URL-ides, mida siin näidatakse, võtmeid pole. Ära pane saladust embed URL-i või kliendikoodi.
Kas zoom=15 suurendab otsinguraadiust?
Zoom reguleerib vaadet. Ära arvesta seda API päringu raadiuse määramisel; vaata kasutatava liidese otsingu seadeid.
Kas vanem teab iframe sees tehtud muudatusi?
Ta teab vaid edastatud parameetreid. Sisemised muudatused nõuavad kahe domeeni vahel dokumenteeritud andmevahetusmehhanismi.