Paano Maglagay ng Mapa ng Mobility sa Sariling Site?

Para maglagay ng mapa ng mobility sa iyong site nang hindi kinakailangang gawin ang buong interface, gamitin ang ROOTE iframe. Ang embed ay maaaring tumanggap ng paghahanap ng lungsod at angkop na mga filter para sa pahina: bisikleta para sa gabay ng bisikleta, palikuran para sa gabay ng palikuran, bus at tram para sa transportasyon.

Ang mga halimbawa sa gabay na ito ay gumagamit ng embed.roote.ai, ang domain na ginagamit sa mga gabay ng ROOTE. Ang pangkalahatang dokumentasyon ay naglalarawan din ng integrasyon ng map.roote.ai at pinag-iiba ang mga parameter ng kamera mula sa mga kumpletong paghahanap.

Magdagdag ng responsive iframe

Binubuksan ng block na ito ang paghahanap ng bisikleta sa Bordeaux gamit ang zoom na 15. Ang URL ay binubuo sa code; ang pamagat ng iframe ay naglalarawan ng nilalaman nito para sa mga screen reader. Iangkop ang pamagat na ito sa wika ng iyong pahina.

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

Sa isang HTML attribute, ang separator na & ay sinusulat bilang &. Ang lapad na 100% ay sumusunod sa lalim ng lalagyan. Panatilihin ang taas na angkop para sa mobile at iwasang ilagay ang mga kailangang kontrol sa labas ng nakikitang lugar.

Pumili ng mga mode na naaayon sa pahina

Ang mga halagang ito ay mula sa embed ROOTE path na konektado sa mga pamilya mobility, services, at transit. Hindi nito pinapalitan ang mga REST parameters: Ginagamit ng Services ang types, samantalang gumagamit ang Transit ng modes. Ang isang mapa na nakasentro sa isang lungsod ay hindi garantiya na bawat pamilya ay may resulta doon.

Ihiwalay ang kamera at pinagmulan ng paghahanap

Ang lat at lon ay nagpo-posisyon ng kamera. Hindi ito sapat, sa dokumentadong kontrata ng mapa, upang lumikha ng paghahanap ng kalapitan. Para maibalik ang isang kilalang paghahanap, gamitin ang search_lat, search_lon, at search_label, kasama ang modes at zoom.

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

Ang mga coordinate sa itaas ay isang reference point sa Bordeaux, hindi ang posisyon ng gumagamit. Kapag nagdagdag ka rin ng mga parameter ng kamera, maaari kang magpakita ng ibang lugar habang pinananatili ang punto para sa distansya. Gawin lamang ito kung nais mong magkaroon ng ganitong paghahati.

Dokumentasyon ng mga parameter ng mapa ng ROOTE

Bumuo ng URL na hindi nawawala ang mga espesyal na karakter

Gamitin ang URL at URLSearchParams sa halip na manu-manong pagdikit. Ito ay nag-eencode ng mga spaces, tuldik, at separators. Ang code na ito ay para sa browser at lumilikha ng address ng iframe mula sa ipinasok na lugar.

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

Panatilihin ang konteksto papunta sa kumpletong mapa

Ang link sa map.roote.ai ay dapat maglaman ng kasalukuyang estado ng paghahanap kung alam mo ito. Ang muling paggawa ng URL nang walang mga parameter ay nawawalan ng lungsod, mga mode, o zoom. Panatilihin ang isang karaniwang URL object sa mga pag-update na ginagawa ng iyong pahina.

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

Pinapanatili ng code na ito ang mga parameter na kilala ng parent na pahina. Kapag binago ng user ang paghahanap sa loob ng iframe, hindi direktang mababasa ng parent ang URL nito sa ibang domain. Upang makuha ang estado, kailangan ng mekanismong ipinatupad at dokumentado, tulad ng postMessage exchange na may validation ng pinagmulan. Huwag gumawa ng event name na hindi ibinibigay ng embed.

Pamahalaan ang lokalisasyon at mga interaksyong mobile

Ang allow="geolocation" ay pinapayagan ang iframe na humiling ng lokasyon, depende sa pahintulot ng user at polisiya ng site. Ang pagtanggi ay dapat payagang magamit pa rin ang paghahanap ng lungsod. Huwag hingin agad ang posisyon pagdating pa lang sa pahina kung hindi ito pinili ng user.

Sa isang artikulo, ang kusang pag-activate ng mapa ay maaaring maiwasan ang pagkuha ng gestures ng scrolling o zoom habang nagbabasa. Ang control ay dapat manatiling accessible sa keyboard at malinaw ang pangalan. Suriin ang mga pagbabago sa orientation at makitid na screen, hindi lang sa bersyong desktop.

Suriin ang resulta at mga estado ng pagkasira

Subukan ang bawat filter, isang kilalang lungsod, isang lugar na may kaunting data, isang hindi wastong paghahanap, at isang unavailable na pamilya. Ang isang mapa na walang marker ay hindi sapat upang sabihin kung ang paghahanap ay walang resulta o may sira. Panatilihin ang mga mensahe mula sa embed at madaling access sa kumpletong mapa.

Ihiwalay ang kawalan ng resulta sa API error

Pumili sa pagitan ng embed, API, at MCP

Halimbawa ng gabay para maghanap ng palikuran

Mga Madalas Itanong

Kailangang ilagay ba ang API key sa iframe?

Ang mga pampublikong URL na ipinakita dito ay walang API key. Huwag ilagay ang isang sekreto sa embed URL o client code.

Pinapalawak ba ng zoom=15 ang radius ng paghahanap?

Inaayos ng zoom ang view. Huwag ipagpalagay na ito ang radius ng API request; suriin ang mga parameter ng paghahanap sa ginamit na interface.

Nakikilala ba ng parent ang mga pagbabagong ginawa sa iframe?

Alam nito ang mga parameter na ipinapasa nito. Ang panloob na pagbabago ay nangangailangan ng dokumentadong mekanismo ng palitan ng impormasyon sa pagitan ng dalawang domain.