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

ចម្លងកូដខាងក្រោមដែលផែនទីគួរបង្ហាញនៅលើទំព័ររបស់អ្នក៖

<script src="https://aqicn.org/maplet/embed.v1.js"
        data-city="london"
        data-lat="51.5074" data-lng="-0.1278" data-zoom="11"
        data-lang="km"
        data-height="450"></script>

លទ្ធផល (ផ្លាស់ទី ឬពង្រីកផែនទី ដើម្បីធ្វើបច្ចុប្បន្នភាពកូដខាងលើ)៖

ដើម្បីជៀសវាងការពន្យារពេលការបង្ហាញទំព័ររបស់អ្នក ស្គ្រីបអាចត្រូវបានផ្ទុកអសមកាលកម្ម ជាមួយគុណលក្ខណៈ async ឬ defer ។ ដោយសារតែស្គ្រីបមិនដំណើរការនៅទីតាំងរបស់វានៅក្នុងទំព័រ គុណលក្ខណៈ data-dom-target ត្រូវបានទាមទារដើម្បីបញ្ជាក់ធាតុដែលផែនទីត្រូវបានបញ្ចូល។ ធាតុអាចត្រូវបានដាក់នៅកន្លែងណាមួយនៅក្នុងទំព័រ មុន ឬក្រោយស្លាក script។

<div id="aqi-map"></div>

<script async src="https://aqicn.org/maplet/embed.v1.js"
        data-city="paris"
        data-lang="km"
        data-dom-target="aqi-map"
        data-height="450"></script>

លទ្ធផល៖

កំពុងផ្ទុកស្គ្រីបពី javascript

ស្គ្រីបក៏អាចត្រូវបានបញ្ចូលជាថាមវន្តផងដែរ ឧទាហរណ៍ពីកម្មវិធីគ្រប់គ្រងស្លាក ឬកម្មវិធីទំព័រតែមួយ។ ច្បាប់ data-dom-target ដូចគ្នាត្រូវបានអនុវត្ត៖

<div id="aqi-map"></div>

<script>
  var s = document.createElement("script");
  s.src = "https://aqicn.org/maplet/embed.v1.js";
  s.setAttribute("data-city", "london");
  s.setAttribute("data-dom-target", "aqi-map");
  s.setAttribute("data-lang", "km");
  document.head.appendChild(s);
</script>

ផែនទីត្រូវបានកំណត់រចនាសម្ព័ន្ធជាមួយគុណលក្ខណៈដូចខាងក្រោមនៃស្លាកស្គ្រីប។ ពួកវាទាំងអស់គឺជាជម្រើស លើកលែងតែ data-dom-target សម្រាប់ការផ្ទុកអសមកាល។

ផែនទីជាច្រើនអាចត្រូវបានបង្កប់នៅលើទំព័រតែមួយ៖ ប្រើស្លាកស្គ្រីបមួយសម្រាប់ផែនទីនីមួយៗ។

សូមបំពេញជម្រើសខាងក្រោមដើម្បីទទួលបានលេខកូដសម្រាប់ផែនទីរបស់អ្នក ហើយមើលវាជាមុន។

• តំណភ្ជាប់នៅក្នុងផែនទី (ឧ. ព័ត៌មានលម្អិតស្ថានីយ៍) បើកនៅក្នុងផ្ទាំងថ្មីមួយ ដូច្នេះអ្នកទស្សនាមិនចាកចេញពីទំព័ររបស់អ្នកទេ។
• ផែនទីអាចត្រូវបានបង្កប់នៅលើគេហទំព័រណាមួយដែលបម្រើតាមរយៈ http ឬ https ។ វាមិនអាចបង្ហាញពីទំព័រដែលបើកជាឯកសារក្នុងស្រុក ( file:// ) បានទេ។
• ប្រសិនបើផែនទីត្រូវបានដាក់ក្នុង iframe ដែលបាន sandboxed នោះ sandbox ត្រូវតែអនុញ្ញាតយ៉ាងហោចណាស់ allow-scripts allow-same-origin allow-popups ។
• សូមកុំលុប ឬលាក់ការសន្មត់ថាជារបស់គម្រោងសន្ទស្សន៍គុណភាពខ្យល់ពិភពលោក និងរបស់ប្រភពទិន្នន័យ។

ការប្រើប្រាស់ iframe ដោយផ្ទាល់

ប្រសិនបើអ្នកមិនអាចបន្ថែមស្គ្រីបទៅក្នុងទំព័ររបស់អ្នកបានទេ ផែនទីក៏អាចត្រូវបានបង្កប់ជាមួយ iframe ធម្មតាផងដែរ។ ទីតាំងគឺជាផ្នែកមួយនៃ url ហើយទិដ្ឋភាពត្រូវបានកំណត់ដោយប៉ារ៉ាម៉ែត្រ lat , lng និង zoom ៖

<iframe src="https://aqicn.org/maplet/london/km/?lat=51.5074&lng=-0.1278&zoom=11"
        width="100%" height="450" style="border:0" loading="lazy"
        title="Real-time air quality map"></iframe>