Nola integratu mugikortasun-mapa zure webgunean?

Mugikortasun-mapa bat zure webgunean integratu nahi baduzu guztiz interfaze osoa eraiki gabe, erabili ROOTE iframe bat. Embed-ek hiria bilatzeko aukera eta orrialdeari egokitutako iragazkiak jaso ditzake: bizikletak bizikleta gida baterako, komun publikoak WC gida baterako, autobus eta tranbia garraioetarako.

Gida honetako adibideak embed.roote.ai erabiltzen dute, ROOTE gidetan integratutako domeinua. Dokumentazio orokorrak map.roote.ai-ren integrazioa ere azaltzen du eta bereizten ditu kameraren parametroak eta bilaketa oso batenak.

Iframe erantzunkorra gehitu

Bloke honek bizikleta bilaketa irekitzen du Bordelen, zoom maila 15arekin. URLa kodean eraikitzen da; iframearen izenburua bere edukia deskribatzen du pantailarako irakurgailuentzat. Egokitu izenburua zure orriaren hizkuntzara.

<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 atributu batean, separadoreak '&' '&' moduan idazten dira. Zabalera %100 izango da edukiontzia jarraituz. Mantendu altuera erabilgarria mugikorrean eta saihestu kontrol esanguratsuak ikusgai ez dauden eremuetan jartzea.

Orriari dagokion moduak aukeratu

Balio hauek ROOTE embed ibilbidearenak dira, mugikortasunean, zerbitzuetan eta garraioan familiei lotuak. Ez dute ordezkatzen REST parametroak: Zerbitzuek 'types' erabiltzen dute, garraioak 'modes'. Hiri batean zentraturiko mapa batek ez du bermatzen familiak denak bertan emaitzarik izatea.

Kamera eta bilaketa jatorria bereiztu

lat eta lon kameraren kokapena definitzen dute. Hala ere, ez dira nahikoa gertutasun bilaketa bat sortzeko, kartaren dokumentatutako hitzarmenaren arabera. Bilaketa ezagutua berreskuratzeko, erabili search_lat, search_lon eta search_label, moduekin eta zoomarekin batera.

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

Goiko koordinatuak Bordeleko erreferentzia-puntu bat dira, erabiltzailearen kokapena ez. Kamera parametroak ere gehitzen badituzu, beste eremu bat erakutsi dezakezu distantziak kalkulatzeko erabiltzen den puntua gordez. Hori bakarrik egin nahi izanez gero, bereizketa hori nahi bada.

ROOTE kartaren parametroen dokumentazioa

URL eraiki karaktere bereziak galdu gabe

Erabili URL eta URLSearchParams eta ez konkatakzio eskuzkoa. Honek espazioak, azentuak eta separadoreak kodetzen ditu. Kode hau nabigatzaileari dago zuzendua eta iframearen helbide bat sortzen du erabiltzaileak sartutako kokapenetik.

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

Egoera gordetzea karta osoari

map.roote.ai-rako esteka batek eguneroko bilaketa-egoera hartu behar du ez badakizu. Parametroak gabe URL berria sortzeak hiria, moduak edo zooma galtzea eragingo du. Mantendu URL objektu komun bat orrialdeak eskaintzen dituen eguneratzeetan.

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

Kode honek orrialde nagusiak ezagutzen dituen parametroak gordetzen ditu. Erabiltzaileak iframe barruan bilaketa aldatzen badu, gurasoak ezin du berehala irakurri URL beste domeinu batean. Egoera hori berreskuratzeko mekanismo bat behar da, argiki inplementatua eta dokumentatua, adibidez postMessage trukea jatorriaren balidazioarekin. Ez asmatu embed-ek ez duen gertaera izenik.

Kokapena eta mugikor interakzioak kudeatu

allow="geolocation" aukera ematen dio iframe-i kokapena eskatzeko, baimen eta politika webgunearen arabera. Errefusatze bat hiri bilaketa erabilgarria utzi behar du. Ez eskatu kokapena orrialdean sartzean erabiltzaileak ekintza hori aukeratu gabe.

Artikulu batean, kartaren aktibazio borondatez batek saihestu dezake bere desplazamendua edo zooma irakurketa bitartean keinuak harrapatzea. Kontrola teklekin sar daiteke eta ondo izendatu behar da. Egiaztatu orientazio aldaketak eta pantaila estuak, ez bakarrik ordenagailu bertsioa.

Emaitza eta erroreak egiaztatu

Iragazki guztien probatu, hiria ezaguna, datu gutxiko eremua, bilaketa baliogabea eta familia ez eskuragarria. Markerik gabeko mapa batek bakarrik ez du esaten bilaketa hutsik dagoen ala akats bat dagoen. Gorde embed-aren mezuak eta sarbide erabilgarria karta osoarentzako.

Emaitza eza eta API errorea bereizi

Embed, API eta MCP artean aukeratu

Komunak aurkitzeko gida adibidea

Ohiko galderak

API giltza behar da iframe-an?

Hemen agertzen diren URL publikoek ez dute horrelakorik. Ez jarri sekreturik embed URL edo bezero kodean.

zoom=15 bilaketa erradioa handitzen du?

Zoomak ikuspegia doitu egiten du. Ez nahastu API eskaera erradioarekin; egiaztatu erabilitako interfaze bilaketa parametroak.

Gurasoak iframe-n egindako aldaketak ezagutzen ditu?

Bertako parametroak transmititzen ditu. Barruko aldaketek truke mekanismo dokumentatu bat behar dute bi domeinuen artean.