كيفية دمج خريطة تنقل في موقعك؟

لدمج خريطة تنقل في موقعك دون بناء الواجهة كاملة، استخدم 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% يتبع عرض الحاوية. احتفظ بارتفاع مناسب للجوال وتجنب وضع عناصر تحكم ضرورية خارج المنطقة الظاهرة.

اختيار الأوضاع المناسبة للصفحة

هذه القيم هي مسارات إدماج ROOTE المرتبطة بفئات التنقل، الخدمات والعبور. لا تحل محل معطيات REST: تستخدم الخدمات types، والعبور يستخدم 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 مع التحقق من المصدر. لا تختر أسماء أحداث غير موفرة من الإدماج.

إدارة المواقع والتفاعلات على الجوال

السماح="geolocation" يسمح لـ iframe بطلب الموقع، مع موافقة وسياسات الصلاحيات للموقع. الرفض يجب أن يتيح استخدام بحث المدينة. لا تطلب الموقع فور الدخول إذا لم يختار القارئ ذلك.

في مقال، التفعيل الطوعي للخريطة يمكن أن يمنع التمرير أو التكبير من اعتراض الإيماءات أثناء القراءة. يجب أن تبقى الضوابط متاحة للوحة المفاتيح ومحددة بوضوح. تحقق من تغييرات الاتجاه والشاشات الضيقة، ليس فقط نسخة الكمبيوتر.

التحقق من النتيجة وحالات العطل

اختبر كل فلتر، مدينة معروفة، منطقة بها بيانات قليلة، بحث غير صالح وعائلة غير متاحة. خريطة بدون علامات لا تميز وحدها بين بحث فارغ أو عطل. احتفظ برسائل الإدماج وإمكانية الوصول للخريطة الكاملة.

تمييز بين عدم وجود نتيجة وخطأ API

الاختيار بين الإدماج، API و MCP

مثال دليل لإيجاد المراحيض

الأسئلة المتكررة

هل يجب وضع مفتاح API في iframe؟

عناوين URL العامة هنا لا تحتوي عليه. لا تضع سراً في عنوان إدماج أو شفرة العميل.

هل يزيد zoom=15 من نصف قطر البحث؟

التكبير يضبط العرض. لا تعتبره نصف قطر طلب API؛ تحقق من معطيات البحث في الواجهة المستخدمة.

هل يعلم الأصل بالتغييرات داخل iframe؟

يعرف المعطيات التي يمررها. التغيرات الداخلية تتطلب آلية تبادل موثقة بين النطاقين.