# របៀបបញ្ចូលផែនទីចល័តនៅលើគេហទំព័ររបស់អ្នក?

> បញ្ចូលផែនទី ROOTE នៅលើគេហទំព័ររបស់អ្នក៖ iframe ទម្លាប់ឆមាស, ជំរៅកង់, បង្គន់, ឡានក្រុង និងឡានរថភ្លើង ខ្សែស្វែងរកទីក្រុង និងបញ្ជូនប៉ារាម៉ែត្រ។

Source: https://www.roote.ai/km/guides/%E1%9E%9A%E1%9E%94%E1%9F%80%E1%9E%94%E1%9E%94%E1%9E%89%E1%9F%92%E1%9E%85%E1%9E%BC%E1%9E%9B%E1%9E%95%E1%9F%82%E1%9E%93%E1%9E%91%E1%9E%B8%E1%9E%85%E1%9E%9B%E1%9F%90%E1%9E%8F%E1%9E%93%E1%9F%85%E1%9E%9B%E1%9E%BE%E1%9E%82%E1%9F%81%E1%9E%A0%E1%9E%91%E1%9F%86%E1%9E%96%E1%9F%90%E1%9E%9A%E1%9E%9A%E1%9E%94%E1%9E%9F%E1%9F%8B%E1%9E%A2%E1%9F%92%E1%9E%93%E1%9E%80/
Language: km
Author: ROOTE

សម្រាប់បញ្ចូលផែនទីចល័តនៅលើគេហទំព័ររបស់អ្នកដោយមិនចាំបាច់បង្កើតចំណុចប្រទាក់ទាំងមូល ប្រើ iframe ROOTE។ ការបញ្ចូលនេះអាចទទួលបានការស្វែងរកទីក្រុង និងជម្រើសតម្រូវសម្រាប់ទំព័រ ដូចជា កង់សម្រាប់មគ្គុទេសក៍កង់ បង្គន់សម្រាប់មគ្គុទេសក៍ WC ឬឡានក្រុង និងឡានរថភ្លើងសម្រាប់ការដឹកជញ្ជូន។

គំរូក្នុងមគ្គុទេសក៍នេះប្រើ embed.roote.ai ដែលជាដែនដីដែលបញ្ចូលក្នុងមគ្គុទេសក៍ ROOTE។ ឯកសារជារួមក៏ពណ៌នាផងដែរអំពីការបញ្ចូល map.roote.ai ហើយបំបែកប៉ារាម៉ែត្រកាមេរ៉ាចេញពីប៉ារាម៉ែត្រស្វែងរកពេញលេញ។

## បន្ថែម iframe ទម្លាប់ឆមាស

ប្លុកនេះបើកការស្វែងរកកង់នៅទីក្រុង Bordeaux ជាមួយកម្រិតកញ្រ្ជៃ ១៥។ 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;. ទទឹង ១០០% ត្រូវបំពេញតាមទទឹងនៃផ្ទាំង។ រក្សារបស់ខ្ពស់ដែលអាចប្រើបានលើទូរស័ព្ទចល័ត ហើយកុំដាក់បញ្ជារដែលទាមទារចាំបាច់នៅក្រៅតំបន់មើលឃើញ។

## ជ្រើសរើសរបៀបដែលសមរម្យសម្រាប់ទំព័រ

| តម្រូវការ | ប៉ារាម៉ែត្រនៃការបញ្ចូល |
| --- | --- |
| កង់ | modes=bicycle |
| បង្គន់ | modes=toilets |
| ឡានក្រុង | modes=bus |
| ឡានរថភ្លើង | modes=tram |
| ឡានក្រុង និងឡានរថភ្លើង | modes=bus,tram |
| កង់ និងបង្គន់ | modes=bicycle,toilets |

តម្លៃទាំងនេះគឺសម្រាប់ផ្លូវ embed ROOTE ដែលភ្ជាប់ទៅកាន់ក្រុមចល័ត សេវាកម្ម និងដំណើរការ។ វាមិនជំនួសប៉ារាម៉ែត្រ REST ទេ៖ Services ប្រើ types ខណៈដែល Transit ប្រើ modes។ ផែនទីដែលមានចំណុចកណ្តាលនៅលើទីក្រុងមិនធានាថាក្រុមនីមួយៗមានលទ្ធផលនៅទីនោះ។

## បំបែកចល័តកាមេរ៉ា និងទីតាំងស្វែងរក

lat និង lon កំណត់ទីតាំងកាមេរ៉ា។ វាមិនគ្របគ្រាន់ក្នុងកិច្ចសន្យាដែលបានឯកសាររបស់ផែនទីសម្រាប់បង្កើតការស្វែងរកជិតខាងទេ។ ដើម្បីស្ដារការស្វែងរកដែលបានដឹង អ្នកប្រើ search_lat, search_lon និង search_label រួមជាមួយ modes និង zoom។

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

សមាសធាតុភាគលើគឺជាចំណុចយោងនៅ Bordeaux មិនមែនទីតាំងអ្នកប្រើប្រាស់ឡើយ។ ប្រសិនបើអ្នកបន្ថែមប៉ារាម៉ែត្រកាមេរ៉ា អ្នកអាចបង្ហាញតំបន់ផ្សេងទៀត ខណៈដែលរក្សាចំណុចប្រើសម្រាប់ចម្ងាយ។ សូមធ្វើតែបើចង់បំបែកចំណុចនេះប៉ុណ្ណោះ។

[ឯកសារពីប៉ារាម៉ែត្រផែនទី ROOTE](https://doc.roote.ai/map)

## បង្កើត URL ដោយមិនបាត់បង់តួអក្សរពិសេស

ប្រើ URL និង URLSearchParams ជំនួស concaténation ដោយដៃ។ វាកូដចន្លោះខ្ទង់ ពីរ សញ្ញាសំនៀង និងចំណែក។ កូដនេះសម្រាប់កម្មវិធីរកមើល ហើយបង្កើតអាសយដ្ឋាន 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 ថ្មីដោយគ្មានប៉ារាម៉ែត្រត្រូវបាត់បង់ទីក្រុង, modes ឬ zoom។ រក្សាវត្ថុ 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/km/guides/%E1%9E%82%E1%9F%92%E1%9E%98%E1%9E%B6%E1%9E%93%E1%9E%9B%E1%9E%91%E1%9F%92%E1%9E%92%E1%9E%95%E1%9E%9B-%E1%9E%AC%E1%9E%80%E1%9F%86%E1%9E%A0%E1%9E%BB%E1%9E%9F-api-%E1%9E%8F%E1%9E%BE%E1%9E%92%E1%9F%92%E1%9E%9C%E1%9F%81%E1%9E%B8%E1%9E%94%E1%9F%82%E1%9E%94%E1%9E%8E%E1%9E%B6-%E1%9E%8A%E1%9E%B9%E1%9E%84%E1%9E%97%E1%9E%B6%E1%9E%96%E1%9E%81%E1%9E%BB%E1%9E%9F%E1%9E%82%E1%9F%92%E1%9E%93%E1%9E%B6/)

[ជ្រើសរើសរវាង embed, API និង MCP](https://www.roote.ai/km/guides/api-rou-mcp-chet-chuey-tveu-komnas-doum-neak/)

[គំរូមគ្គុទេសក៍ស្វែងរកបង្គន់](https://www.roote.ai/km/guides/%E1%9E%9A%E1%9E%94%E1%9F%80%E1%9E%94%E1%9E%9A%E1%9E%80%E1%9E%94%E1%9E%93%E1%9F%92%E1%9E%91%E1%9E%94%E1%9F%8B%E1%9E%91%E1%9E%B9%E1%9E%80%E1%9E%9F%E1%9E%B6%E1%9E%92%E1%9E%B6%E1%9E%9A%E1%9E%8E%E1%9F%88%E1%9E%A5%E1%9E%8F%E1%9E%82%E1%9E%B7%E1%9E%8F%E1%9E%90%E1%9F%92%E1%9E%9B%E1%9F%83%E1%9E%87%E1%9E%BB%E1%9F%86%E1%9E%9C%E1%9E%B7%E1%9E%89%E1%9E%81%E1%9F%92%E1%9E%9B%E1%9E%BD%E1%9E%93/)

## សំណួរញឹកញាប់

### ត្រូវដាក់កូនសោ API នៅក្នុង iframe ទេឬ?

URL សាធារណៈបង្ហាញនៅទីនេះមិនមាន។ កុំដាក់សម្ងាត់នៅក្នុង URL embed រឺកូដភាគីអតិថិជន។

### zoom=15 បង្កើនកម្រិតស្វែងរកទេឬ?

កម្រិត zoom គឺដើម្បីបញ្ជាក់មើល។ កុំច្របល់វាជាសកម្មភាពតំបន់ API។ ពិនិត្យប៉ារាម៉ែត្រស្វែងរកនៅចំណុចប្រទាក់ដែលប្រើប្រាស់។

### មេដឹកនាំដឹងពីការផ្លាស់ប្តូរនៅក្នុង iframe ទេឬ?

វាដឹងប៉ារាម៉ែត្រដែលវាផ្ញើ។ ការផ្លាស់ប្តូរខាងក្នុងត្រូវការមេកានិចផ្លាស់ប្តូរដែលបានឯកសារ រវាងដែនទាំងពីរ។