Cara Memasukkan Peta Mobiliti dalam Laman Web Anda?

Untuk memasukkan peta mobiliti ke dalam laman web anda tanpa membina keseluruhan antara muka, gunakan iframe ROOTE. Embed boleh menerima carian bandar dan penapis yang sesuai mengikut halaman: basikal untuk panduan basikal, tandas untuk panduan WC, bas dan trem untuk pengangkutan.

Contoh dalam panduan ini menggunakan embed.roote.ai, domain yang digunakan dalam panduan ROOTE. Dokumentasi umum juga menerangkan integrasi map.roote.ai dan membezakan parameter kamera dengan carian penuh.

Tambah iframe responsif

Blok ini membuka carian basikal di Bordeaux dengan zoom 15. URL dibina dalam kod; tajuk iframe menerangkan kandungannya untuk pembaca skrin. Sesuaikan tajuk ini dengan bahasa halaman anda.

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

Dalam atribut HTML, pemisah & ditulis sebagai &. Lebar 100% mengikut kontena. Jaga ketinggian yang sesuai untuk mudah alih dan elakkan meletakkan kawalan penting di luar kawasan terlihat.

Pilih mod yang sesuai dengan halaman

Nilai ini adalah laluan embed ROOTE yang berkaitan dengan keluarga mobiliti, perkhidmatan dan transit. Ia tidak menggantikan parameter REST: Perkhidmatan menggunakan types, manakala Transit menggunakan modes. Peta tertumpu pada satu bandar tidak menjamin setiap keluarga mempunyai hasil di situ.

Bezakan kamera dan asal carian

lat dan lon menentukan kamera. Ia tidak mencukupi, menurut kontrak peta yang didokumentasi, untuk mencipta carian berdekatan. Untuk memulihkan carian yang diketahui, gunakan search_lat, search_lon dan search_label bersama mod dan zoom.

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

Koordinat di atas adalah titik rujukan di Bordeaux, bukan kedudukan pengguna. Jika anda juga menambah parameter kamera, anda boleh memaparkan kawasan lain sambil mengekalkan titik untuk pengiraan jarak. Lakukan hanya jika pemisahan ini dikehendaki.

Dokumentasi parameter peta ROOTE

Bina URL tanpa kehilangan aksara khas

Gunakan URL dan URLSearchParams daripada menyambung secara manual. Ini mengekodkan ruang, aksen dan pemisah. Kod ini untuk pelayar dan mencipta alamat iframe dari tempat yang dimasukkan.

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

Simpan konteks ke peta penuh

Pautan ke map.roote.ai harus meneruskan keadaan carian semasa jika anda mengetahuinya. Membina semula URL tanpa parameternya akan kehilangan bandar, mod atau zoom. Simpan objek URL yang sama semasa kemas kini oleh laman anda.

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

Kod ini menyimpan parameter yang diketahui oleh halaman induk. Jika pengguna mengubah carian dalam iframe, induk tidak boleh terus membaca URL dalam domain lain. Untuk mendapatkan keadaan ini, perlu ada mekanisme yang diterangkan dan didokumentasi, contohnya pertukaran postMessage dengan validasi asal. Jangan cipta nama acara yang tidak disediakan oleh embed.

Urus lokasi dan interaksi mudah alih

allow="geolocation" membenarkan iframe meminta lokasi, tertakluk kepada persetujuan dan polisi kebenaran laman. Penolakan harus membenarkan carian bandar digunakan. Jangan minta kedudukan sebaik tiba di laman jika pengguna tidak memilih tindakan itu.

Pada artikel, pengaktifan peta secara sukarela boleh elakkan kawalan zoom atau skrol menangkap gerak isyarat semasa bacaan. Kawalan harus kekal boleh diakses melalui papan kekunci dan jelas dinamakan. Semak perubahan orientasi dan skrin kecil, bukan hanya versi desktop.

Sahkan hasil dan keadaan kegagalan

Uji setiap penapis, bandar yang dikenali, kawasan dengan data sedikit, carian tidak sah dan keluarga tidak tersedia. Peta tanpa penanda tidak menunjukkan sendiri jika carian kosong atau berlaku ralat. Simpan mesej embed dan akses ke peta penuh.

Bezakan tiada hasil dan ralat API

Pilih antara embed, API dan MCP

Contoh panduan mencari tandas

Soalan lazim

Perlu letak kunci API dalam iframe?

URL awam yang ditunjukkan tidak mengandungnya. Jangan letak rahsia dalam URL embed atau kod klien.

Adakah zoom=15 tingkatkan jejari carian?

Zoom mengawal pandangan. Jangan samakan dengan jejari permintaan API; semak parameter carian dalam antara muka yang digunakan.

Adakah induk tahu perubahan dalam iframe?

Ia tahu parameter yang dihantar. Perubahan dalaman memerlukan mekanisme pertukaran didokumentasi antara kedua domain.