Kaip įterpti mobilumo žemėlapį į savo svetainę?

Norėdami įterpti mobilumo žemėlapį į savo svetainę nekurdamas visos sąsajos, naudokite ROOTE iframe. Įterpimas gali atlikti miesto paiešką ir pritaikytus filtrus puslapiui: dviračiai dviračių gidui, tualetai tualetų gidui, autobusai ir tramvajai transportui.

Šio vadovo pavyzdžiai naudoja embed.roote.ai domeną, integruotą ROOTE vadovuose. Bendra dokumentacija aprašo ir map.roote.ai integraciją bei skiria kameros parametrus nuo pilnos paieškos parametrų.

Responsive iframe įterpimas

Šis blokas atidaro dviračių paiešką Bordo mieste su masteliu 15. URL sukuriamas kode; iframe pavadinimas aprašo jo turinį ekrano skaitytuvams. Priderinkite šį pavadinimą prie savo puslapio kalbos.

<iframe
  title="Carte ROOTE — vélos à Bordeaux"
  src="https://embed.roote.ai/?q=Bordeaux&amp;modes=bicycle&amp;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 atributo viduje & skyrikliai rašomi kaip &. Plotis 100 % atitinka konteinerio plotį. Palaikykite mobiliajame įrenginyje tinkamą aukštį ir venkite būtinų valdiklių išdėstymo nematomoje zonoje.

Pasirinkite puslapiui tinkamus režimus

Šios reikšmės yra ROOTE embed kelių šeimų mobilumo, paslaugų ir tranzito maršrutų. Jos nepakeičia REST parametrų: Paslaugoms naudojami types, o Tranzitui modes. Žemėlapis, sukurtas miestui, negarantuoja, kad visos šeimos turės rezultatų.

Atskirkite kameros poziciją nuo paieškos šaltinio

lat ir lon nustato kameros vietą. Pagal žemėlapio sutartį jos neužtikrina artimiausios paieškos sukūrimo. Norėdami atkurti žinomą paiešką naudokite search_lat, search_lon ir search_label su režimais ir masteliu.

https://embed.roote.ai/?search_lat=44.8416106&search_lon=-0.5810938&search_label=Bordeaux&zoom=15&modes=bus,tram

Aukščiau pateiktos koordinatės yra Bordo orientyras, o ne vartotojo pozicija. Jei pridėsite kameros parametrus, galėsite rodyti kitą sritį išlaikydami atstumų skaičiavimo tašką. Darykite tai tik jei toks atskyrimas yra pageidaujamas.

ROOTE žemėlapio parametrų dokumentacija

Sukurti URL neprarandant specialių simbolių

Naudokite URL ir URLSearchParams vietoje rankinio sujungimo. Tai užkoduos tarpus, diakritinius ženklus ir skyriklius. Šis kodas skirtas naršyklei ir kuria iframe adresą iš įvestos vietos.

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();

Išsaugoti kontekstą perėjimui į pilną žemėlapį

Nuoroda į map.roote.ai turi atkurti esamą paieškos būseną, jeigu ji žinoma. Sukūrus URL be parametrų prarandamas miestas, režimai ar mastelis. Laikykite bendrą URL objektą puslapio atnaujinimų metu.

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';

Šis kodas išsaugo parametrus, kuriuos žino tėvinis puslapis. Jei vartotojas keičia paiešką iframe viduje, tėvui negalima tiesiogiai perskaityti jos URL kitoje domeno zonoje. Reikia aiškiai įgyvendinto ir aprašyto mechanizmo, pvz., postMessage mainų su kilmės patikrinimu. Neprisigalvokite įvykių pavadinimų, kurių embed nepalaiko.

Valdyti lokalizaciją ir mobiliųjų sąveikas

allow="geolocation" leidžia iframe prašyti vietos, laikantis naudotojo sutikimo ir teisės politikos. Atmetimas turi leisti naudoti miesto paiešką. Neprašykite vietos iš karto puslapyje jeigu naudotojas to neinicijavo.

Straipsnyje sąmoninga žemėlapio aktyvacija gali užkirsti kelią ratukui ar mastelio keitimui paimti gestus skaitymo metu. Valdiklis turi likti pasiekiamas klaviatūra ir aiškiai įvardintas. Patikrinkite orientacijos pokyčius ir siaurus ekranus, ne tik darbalaukį.

Patikrinti rezultatus ir gedimų būsenas

Išbandykite kiekvieną filtrą, žinomą miestą, nedaug duomenų turinčią zoną, neteisingą paiešką ir nepasiekiamą šeimą. Žemėlapis be žymių neaiškus, ar paieška tuščia, ar yra klaida. Išsaugokite embed žinutes ir prieigą prie pilno žemėlapio.

Atskirti rezultatų nebuvimą nuo API klaidos

Pasirinkti tarp embed, API ir MCP

Pavyzdinis vadovas, kaip rasti tualetus

Dažnai užduodami klausimai

Ar iframe reikia API rakto?

Vieši URL čia neturi API rakto. Neskelbkite slapto rakto embed URL ar kliento kode.

Ar zoom=15 padidina paieškos spindulį?

Zoom reguliuoja vaizdo mastelį. Nesiūlykite jo kaip API užklausos spindulio; patikrinkite naudojamos sąsajos paieškos parametrus.

Ar tėvinis puslapis žino iframe viduje atliktus pakeitimus?

Jis žino perduotus parametrus. Vidiniai pakeitimai reikalauja abipusio ir dokumentuoto mainų mechanizmo tarp domenų.