วิธีฝังแผนที่การเคลื่อนที่ในเว็บไซต์ของคุณ?

หากต้องการฝังแผนที่การเคลื่อนที่ในเว็บไซต์ของคุณโดยไม่ต้องสร้างอินเทอร์เฟซทั้งหมด ให้ใช้ iframe ของ ROOTE การฝังสามารถรับการค้นหาเมืองและตัวกรองที่เหมาะกับหน้า: จักรยานสำหรับไกด์จักรยาน ห้องน้ำสำหรับไกด์ห้องน้ำ รถบัสและรถรางสำหรับระบบขนส่ง

ตัวอย่างในไกด์นี้ใช้ embed.roote.ai โดเมนที่ฝังในไกด์ ROOTE เอกสารทั่วไปยังอธิบายการฝัง map.roote.ai และแยกพารามิเตอร์ของกล้องออกจากการค้นหาแบบเต็ม

เพิ่ม iframe ที่ตอบสนอง

บล็อกนี้เปิดการค้นหาจักรยานที่เมืองบอร์กโดซ์ด้วยระดับซูม 15 URL สร้างในโค้ด หัวข้อ iframe อธิบายเนื้อหาสำหรับเครื่องอ่านหน้าจอ ปรับหัวข้อนี้ให้เหมาะกับภาษาของหน้าคุณ

<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 ตัวคั่น & เขียนเป็น & ความกว้าง 100% ตามขนาดของคอนเทนเนอร์ รักษาความสูงที่ใช้งานได้บนมือถือและหลีกเลี่ยงการวางปุ่มควบคุมสำคัญนอกโซนที่มองเห็นได้

เลือกโหมดที่สอดคล้องกับหน้า

ค่านี้เป็นของเส้นทาง embed ROOTE ที่เชื่อมต่อกับหมวดการเคลื่อนที่ บริการ และการขนส่ง ไม่ทดแทนพารามิเตอร์ REST: Services ใช้ types ส่วน Transit ใช้ modes แผนที่ที่โฟกัสเมืองไม่ได้รับประกันว่าหมวดทั้งหมดมีผลลัพธ์ในเมืองนั้น

แยกแยะกล้องและต้นทางการค้นหา

lat และ lon กำหนดตำแหน่งกล้อง แต่ไม่เพียงพอในสัญญาที่กำหนดของแผนที่สำหรับการสร้างการค้นหาใกล้เคียง เพื่อกู้คืนการค้นหาที่ทราบ ใช้ search_lat, search_lon และ search_label พร้อมกับโหมดและซูม

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

พิกัดข้างต้นเป็นจุดอ้างอิงที่บอร์กโดซ์ ไม่ใช่ตำแหน่งผู้ใช้ ถ้าคุณเพิ่มพารามิเตอร์กล้องด้วย คุณสามารถแสดงพื้นที่อื่นในขณะที่รักษาจุดที่ใช้คำนวณระยะทาง ไว้เฉพาะเมื่อแยกนี้ต้องการเท่านั้น

เอกสารพารามิเตอร์ของแผนที่ ROOTE

สร้าง URL โดยไม่สูญเสียอักขระพิเศษ

ใช้ URL และ URLSearchParams แทนการต่อข้อความด้วยมือ ซึ่งจะเข้ารหัสช่องว่าง สระบุ และตัวคั่น โค้ดนี้ใช้กับเบราว์เซอร์และสร้างที่อยู่ iframe จากที่ตั้งที่ป้อน

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

รักษาบริบทไปยังแผนที่เต็ม

ลิงก์ไปยัง map.roote.ai ควรเก็บสถานะการค้นหาปัจจุบันถ้าคุณรู้ สร้าง URL ใหม่โดยไม่เอาพารามิเตอร์จะสูญเสียเมือง โหมด หรือซูม เก็บอ็อบเจ็กต์ URL ร่วมเวลาปรับปรุงโดยหน้า

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

โค้ดนี้เก็บพารามิเตอร์ที่หน้าแม่รู้ ถ้าผู้ใช้เปลี่ยนการค้นหาภายใน iframe หน้าแม่ไม่สามารถอ่าน URL บนโดเมนอื่นโดยตรง เพื่อดึงสถานะต้องใช้เมคานิซึมที่ระบุและมีเอกสาร เช่น postMessage พร้อมตรวจสอบต้นทาง ไม่ต้องสร้างชื่อเหตุการณ์ที่ embed ไม่ให้มา

จัดการตำแหน่งและปฏิสัมพันธ์บนมือถือ

allow="geolocation" อนุญาต iframe ขอที่อยู่ตำแหน่ง โดยขึ้นกับการยินยอมและนโยบายสิทธิ์ของไซต์ ปฏิเสธควรทำให้การค้นหาเมืองใช้งานได้ อย่าขอตำแหน่งทันทีเมื่อเปิดหน้า ถ้าผู้ใช้ไม่ได้เลือกการกระทำนี้

ในบทความ การเปิดใช้งานแผนที่โดยสมัครใจช่วยป้องกันการเลื่อนหรือซูมไปรบกวนการอ่าน ควบคุมควรยังใช้แป้นพิมพ์ได้และมีชื่อชัด ตรวจสอบการเปลี่ยนแปลงทิศทางหน้าจอและจอแคบ ไม่ใช่แค่เวอร์ชันคอมพิวเตอร์

ตรวจสอบผลลัพธ์และสถานะข้อผิดพลาด

ทดสอบชุดตัวกรอง แต่ละเมืองที่รู้ พื้นที่ข้อมูลน้อย การค้นหาผิด และหมวดที่ไม่มีข้อมูล แผนที่ที่ไม่มีเครื่องหมายไม่บ่งชี้ว่าการค้นหาเป็นค่าว่างหรือมีปัญหา เก็บข้อความจาก embed และเข้าถึงแผนที่เต็มได้

แยกแยะระหว่างไม่มีผลลัพธ์และข้อผิดพลาด API

เลือกใช้ embed, API หรือ MCP

ตัวอย่างไกด์ค้นหาห้องน้ำ

คำถามที่พบบ่อย

ต้องใส่ API key ใน iframe หรือไม่?

URL สาธารณะที่แสดงไม่มีคีย์ อย่าใส่ความลับใน URL embed หรือโค้ดฝั่งลูกค้า

zoom=15 ขยายรัศมีการค้นหาหรือไม่?

ซูมควบคุมมุมมอง ไม่ใช่รัศมีคำขอ API ตรวจสอบพารามิเตอร์การค้นหาของอินเทอร์เฟซที่ใช้

หน้าแม่รู้การเปลี่ยนแปลงใน iframe หรือไม่?

รู้พารามิเตอร์ที่ส่งไป การเปลี่ยนแปลงภายในต้องมีเมคานิซึมแลกเปลี่ยนข้อมูลที่มีเอกสารระหว่างสองโดเมน