Jinsi ya kujumuisha ramani ya usafiri kwenye tovuti yako?

Ili kujumuisha ramani ya usafiri kwenye tovuti yako bila kujenga kiolesura kizima, tumia iframe ya ROOTE. Embed inaweza kupokea utafutaji wa mji na vichujio vinavyofaa kwa ukurasa: baiskeli kwa mwongozo wa baiskeli, vyoo kwa mwongozo wa choo, basi na tram kwa usafiri.

Mifano ya mwongozo huu hutumia embed.roote.ai, kikoa kilichojumuishwa katika miongozo ya ROOTE. Nyaraka za jumla pia zinaelezea ujumuishaji wa map.roote.ai na kutofautisha vigezo vya kamera na utafutaji kamili.

Ongeza iframe inayojibadilisha

Sehemu hii hufungua utafutaji wa baiskeli Bordeaux kwa zoom 15. URL imejengwa kwenye msimbo; kichwa cha iframe kinaelezea yaliyomo kwa wasikilizaji wa skrini. Rekebisha kichwa hiki kwa lugha ya ukurasa wako.

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

Katika sifa ya HTML, vipatanishi & huandikwa &. Upana wa 100% unafuata upana wa kontena. Hifadhi urefu unaotumika kwenye simu na epuka kuweka vidhibiti muhimu nje ya eneo linaloonekana.

Chagua hali zinazofanana na ukurasa

Thamani hizi ni za safari ya embed ROOTE inayounganisha familia za usafiri, huduma na usafirishaji. Hazibadilishi vigezo vya REST: Huduma hutumia types, wakati Usafirishaji hutumia modes. Ramani iliyozingatia mji haiahidi kwamba kila familia ina matokeo huko.

Tofautisha kamera na chanzo cha utafutaji

lat na lon huweka nafasi ya kamera. Haya siyo ya kutosha, katika mkataba wa ramani uliobainishwa, kuunda utafutaji wa karibu. Ili kurejesha utafutaji uliojulikana, tumia search_lat, search_lon na search_label, pamoja na modes na zoom.

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

Urambazaji ulio juu ni nukta ya kumbukumbu Bordeaux, siyo nafasi ya mtumiaji. Ikiwa pia utaongeza vigezo vya kamera, unaweza kuonyesha eneo tofauti huku ukihifadhi nukta inayotumika kwa umbali. Fanya hivyo tu ikiwa utofauti huu unahitajika.

Nyaraka za vigezo vya ramani ya ROOTE

Jenga URL bila kupoteza herufi maalum

Tumia URL na URLSearchParams badala ya kuunganisha kwa mikono. Hii huhifadhi nafasi, alama za sauti na vipatanishi. Msimbo huu ni kwa kivinjari na hutengeneza anwani ya iframe kutoka kwa mahali kilichoingizwa.

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

Hifadhi muktadha kuelekea ramani kamili

Kiungo kwa map.roote.ai kinapaswa kuendesha hali ya sasa ya utafutaji kama unajua. Kuunda URL upya bila vigezo hupoteza mji, hali au zoom. Hifadhi kitu cha URL cha pamoja wakati wa masasisho yanayotokana na ukurasa wako.

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

Msimbo huu unahifadhi vigezo vinavyojulikana na ukurasa mzazi. Ikiwa mtumiaji anabadilisha utafutaji ndani ya iframe, mzazi hawezi kusoma URL moja kwa moja kwenye kikoa kingine. Ili kupata hali hii, inahitajika mfumo uliotekelezwa wazi na kueleweka, kama mifano ya kubadilishana postMessage yenye uthibitishaji wa chanzo. Usibuni majina ya matukio ambayo hayajatumwa na embed.

Simamia mahali na mwingiliano wa simu

allow="geolocation" inaruhusu iframe kuomba eneo kwa idhini na sera za ruhusa za tovuti. Kukanusha kunapaswa kuwezesha utafutaji wa mji kutumika. Usiombe eneo mara mtu anapokuja kwenye ukurasa ikiwa hajachagua tendo hilo.

Kwenye makala, kuamilisha ramani kwa hiari kunaweza kuzuia kusogeza au kuzama kudukuliwa kama ishara wakati wa kusoma. Udhibiti unapaswa kubaki upatikane kwa kibodi na kuitwa wazi. Hakikisha mabadiliko ya mwelekeo na skrini nyembamba, siyo toleo la kompyuta tu.

Kagua matokeo na hali za hitilafu

Jaribu kila kichujio, mji maarufu, eneo lenye data chache, utafutaji batili na familia isiyopatikana. Ramani isiyo na alama yaoni haionyeshi peke yake kama utafutaji ni tupu au kuna hitilafu. Hifadhi ujumbe wa embed na ufikiaji mzuri kwa ramani kamili.

Tofautisha kati ya kutokuwepo kwa matokeo na kosa la API

Chagua kati ya embed, API na MCP

Mfano wa mwongozo wa kupata vyoo

Maswali Mara kwa Mara

Je, ni lazima kuweka funguo za API kwenye iframe?

URL za umma zilizoonyeshwa hapa hazijumuishi hizi. Usihifadhi siri ndani ya URL za embed au msimbo wa mteja.

Je, zoom=15 huongeza mduara wa utafutaji?

Zoom huweka mtazamo. Usidhani ni mduara wa ombi la API; hakikisha vigezo vya utafutaji vya kiolesura kinachotumika.

Je, mzazi anajua mabadiliko yanayofanywa kwenye iframe?

Anajua vigezo anayovitoa. Mabadiliko ya ndani yanahitaji mfumo wa kubadilishana ujumbe ulioelezewa kati ya maeneo mawili.