# Kā integrēt mobilitātes karti savā mājaslapā?

> Integrējiet ROOTE karti savā vietnē: atsaucīgs iframe, filtri velosipēdiem, tualetēm, autobusam un tramvajam, pilsētas meklēšana un parametru nodošana.

Source: https://www.roote.ai/lv/guides/kartu-mobilitati-integret-sava-lapaa/
Language: lv
Author: ROOTE

Lai integrētu mobilitātes karti savā vietnē bez pilnas saskarnes veidošanas, izmantojiet ROOTE iframe. Embed var saņemt pilsētas meklēšanu un lapai piemērotus filtrus: velosipēdi velosipēdu ceļvežiem, tualetes tualetes ceļvežiem, autobusi un tramvaji sabiedriskajam transportam.

Šī ceļveža piemēri izmanto embed.roote.ai, domēnu, kas integrēts ROOTE ceļvežos. Vispārējā dokumentācija apraksta arī map.roote.ai integrāciju un atšķir kameras parametrus no pilnas meklēšanas parametriem.

## Atsaucīga iframe pievienošana

Šis bloks atver velosipēdu meklēšanu Bordo ar tālummaiņu 15. URL ir veidots kodā; iframe virsraksts apraksta saturu ekrāna lasītājiem. Pielāgojiet šo virsrakstu lapas valodai.

```
<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 atribūtā ampersandi jāraksta kā &amp;. Platums 100 % pielāgojas konteinerim. Saglabājiet mobilajām ierīcēm piemērotu augstumu un izvairieties no būtisko vadības elementu izvietošanas ārpus redzamās zonas.

## Izvēlieties lapai atbilstošos režīmus

| Nepieciešamība | Embed parametrs |
| --- | --- |
| Velosipēdi | modes=bicycle |
| Tualetes | modes=toilets |
| Autobusi | modes=bus |
| Tramvaji | modes=tram |
| Autobusi un tramvaji | modes=bus,tram |
| Velosipēdi un tualetes | modes=bicycle,toilets |

Šīs vērtības nāk no embed ROOTE maršruta, kas savienots ar mobilitātes, pakalpojumu un tranzīta kategorijām. Tās neaizvieto REST parametrus: Pakalpojumi izmanto types, bet Tranzīts izmanto modes. Karte, kas fokusēta uz pilsētu, negarantē, ka katrai kategorijai būs dati tajā pilsētā.

## Atšķirt kameras pozīciju un meklēšanas izcelsmi

Lat un lon nosaka kameras pozīciju. Tie vien neizveido tuvuma meklēšanu saskaņā ar kartes definīciju. Lai atjaunotu zināmu meklēšanu, izmantojiet search_lat, search_lon un search_label kopā ar modes un tālummaiņu.

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

Augstāk minētās koordinātas ir atsauces punkts Bordo, nevis lietotāja pozīcija. Ja pievienojat arī kameras parametrus, varat parādīt citu teritoriju, saglabājot meklēšanas punktu attālumu aprēķinam. Dariet to tikai, ja vēlaties šo atdalījumu.

[ROOTE kartes parametru dokumentācija](https://doc.roote.ai/map)

## Veidot URL nezaudējot īpašos simbolus

Lietojiet URL un URLSearchParams funkcijas, nevis manuālu virkņu savienošanu. Tas kodēs atstarpes, akcentus un atdalītājus. Šis kods ir paredzēts pārlūkam un izveido iframe adresi no lietotāja ievadītās vietas.

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

## Saglabāt kontekstu uz pilno karti

Saite uz map.roote.ai jāveido ar pašreizējā meklējuma stāvokli, ja tas ir zināms. URL atjaunošana bez parametriem zaudē pilsētu, režīmus vai tālummaiņu. Izmantojiet kopīgu URL objektu lapas atjauninājumiem.

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

Šis kods saglabā failus, ko pazīst mātes lapa. Ja lietotājs maina meklēšanu iframe, mātes lapa nevar tieši nolasīt iframe URL citā domēnā. Lai saņemtu šādu informāciju, nepieciešams īstenots un dokumentēts mehānisms, piemēram, postMessage apmaiņa ar avota verifikāciju. Neizgudrojiet notikumu vārdus ārpus embed nodrošinātajiem.

## Pārvaldīt atrašanās vietu un mobilās ierīces mijiedarbību

allow="geolocation" ļauj iframe pieprasīt atrašanās vietu, ievērojot vietnes piekļuves politiku un lietotāja piekrišanu. Noliegums nedrīkst traucēt pilsētas meklēšanu. Neprasiet atrašanās vietu pēc lapas ielādes, ja lietotājs to nav izvēlējies.

Raksta kontekstā brīvprātīga kartes aktivizācija var novērst ritināšanas vai tālummaiņas uztveršanu kā gestu lasīšanas laikā. Vadība jābūt pieejamai ar tastatūru un skaidri nosaukta. Pārbaudiet orientācijas un šauru ekrānu izmaiņas, ne tikai darbvirsmas versiju.

## Pārbaudīt rezultātu un kļūdu stāvokļus

Pārbaudiet katru filtru, zināmu pilsētu, reģionu ar maz datu, nederīgu meklēšanu un nepieejamu kategoriju. Karte bez marķiera vien nevar parādīt, vai meklēšana ir tukša vai ir kļūda. Saglabājiet embed kļūdu paziņojumus un piekļuvi pilnajai kartei.

[Atšķirt rezultāta neesamību un API kļūdu](https://www.roote.ai/lv/guides/nav-rezultatu-apis-klaidu-atpazisana/)

[Izvēlēties starp embed, API un MCP](https://www.roote.ai/lv/guides/api-vai-mcp-kuru-izveleties-mobilitates-datu-integracijai/)

[Piemērs ceļvedim, kā atrast tualetes](https://www.roote.ai/lv/guides/kadas-atrast-belemtas-publiskas-tualetes-sevi-apkaime/)

## Biežāk uzdotie jautājumi

### Vai iframe jāievieto API atslēga?

Šeit redzamajās publiskajās URL API atslēgas nav. Nelieciet slepenus datus embed URL vai klienta kodā.

### Vai zoom=15 palielina meklēšanas diapazonu?

Tālummaiņa regulē skatu. Neuztveriet to kā API meklēšanas rādiusu; pārbaudiet konkrētās saskarnes meklēšanas parametrus.

### Vai mātes lapa zina par izmaiņām iframe?

Mātes lapa zina tikai tās nodotos parametrus. Iekšējām izmaiņām nepieciešams dokumentēts datu apmaiņas mehānisms starp abiem domēniem.