# איך לשלב מפה של ניידות באתר שלך?

> שלבו מפה של ROOTE באתרכם: iframe מותאם, מסננים לאופניים, שירותים, אוטובוסים וטרם, חיפוש עיר והעברת פרמטרים.

Source: https://www.roote.ai/he/guides/integrer-carte-mobilite-site/
Language: he
Author: ROOTE

כדי לשלב מפה של ניידות באתר שלכם בלי לבנות את כל הממשק, השתמשו ב iframe של ROOTE. ה embed יכול לקבל חיפוש עיר ומסננים מותאמים לדף: אופניים למדריך אופניים, שירותים למדריך שירותים, אוטובוסים וטרם לתחבורה.

הדוגמאות במדריך זה משתמשות ב 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, המפרידים & נכתבים כ &amp;. הרוחב של 100% מתאים לרוחב המיכל. שמרו על גובה שמתאים למובייל והימנעו למקם בקרות חיוניות מחוץ לאזור הנראה.

## בחירת המצבים המתאימים לדף

| צורך | פרמטר embed |
| --- | --- |
| אופניים | modes=bicycle |
| שירותים | modes=toilets |
| אוטובוס | modes=bus |
| טרם | modes=tram |
| אוטובוס וטרם | modes=bus,tram |
| אופניים ושירותים | modes=bicycle,toilets |

ערכים אלו שייכים למסלול embed של 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](https://doc.roote.ai/map)

## בניית 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](https://www.roote.ai/he/guides/%D7%90%D7%99%D7%9F-%D7%AA%D7%95%D7%A6%D7%90%D7%94-%D7%90%D7%95-%D7%A9%D7%92%D7%99%D7%90%D7%AA-api-%D7%90%D7%99%D7%9A-%D7%9C%D7%94%D7%91%D7%93%D7%99%D7%9C/)

[בחירה בין embed, API ו- MCP](https://www.roote.ai/he/guides/api-o-mcp-ezoru-et-hashama-be-donneot-mobilite/)

[דוגמת מדריך למציאת שירותים](https://www.roote.ai/he/guides/echol-mekomot-slirot-rovot-parim-beqirb/)

## שאלות נפוצות

### האם צריך מפתח API ב iframe?

כתובות ה URL הפומביות המוצגות כאן אינן מכילות מפתח כזה. אל תשימו סוד בכתובת embed או בקוד צד לקוח.

### האם zoom=15 מגדיל את טווח החיפוש?

הזום מגדיר את תצוגת המפה. אל תזהו אותו עם טווח בקשת API; בדקו את פרמטרי החיפוש של הממשק בו משתמשים.

### האם האב מודע לשינויים בתוך ה iframe?

הוא מודע לפרמטרים שהוא מעביר. שינויים פנימיים דורשים מנגנון חילופי מידע מתועד בין שני הדומיינים.