JS ကျူတိုရီရယ်

JS ပင်မ JS မိတ်ဆက် JS ဘယ်သွားမလဲ။ JS Output JS ထုတ်ပြန်ချက် JS Syntax JS မှတ်ချက်များ JS အပြောင်းအလဲများ JS Let JS Const JS အော်ပရေတာများ JS ဂဏန်းသင်္ချာ JS တာဝန် JS ဒေတာအမျိုးအစားများ JS လုပ်ဆောင်ချက်များ JS အရာဝတ္ထုများ JS ပွဲများ JS စာတန်းများ JS စာတန်းနည်းလမ်းများ JS စာတန်းရှာဖွေမှု JS String Templates JS နံပါတ်များ JS နံပါတ်နည်းလမ်းများ JS Arrays JS Array Methods JS Array အမျိုးအစား JS Array Iteration JS Array Const JS ရက်စွဲများ JS ရက်စွဲပုံစံများ JS နေ့စွဲ နည်းလမ်းများ ရယူပါ။ JS ရက်စွဲ သတ်မှတ်နည်းလမ်းများ JS သင်္ချာ JS Random JS Booleans JS နှိုင်းယှဉ်မှုများ JS အခြေအနေများ JS Switch JS Loop For JS Loop For In JS Loop For Of JS Loop While JS Break JS Iterables JS အစုံများ JS Maps JS အမျိုးအစား JS အမျိုးအစား ပြောင်းခြင်း။ JS Bitwise JS RegExp JS အမှားများ JS နယ်ပယ် JS Hoisting JS တင်းကျပ်သောမုဒ် JS ဒီ Keyword ပါ။ JS Arrow Function JS သင်တန်းများ JS JSON JS Debugging JS စတိုင်လမ်းညွှန် JS အကောင်းဆုံးအလေ့အကျင့်များ JS အမှားများ JS စွမ်းဆောင်ရည် JS သီးသန့်စကားလုံးများ

JS ဗားရှင်းများ

JS ဗားရှင်းများ JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Edge JS သမိုင်း

JS အရာဝတ္ထုများ

Object အဓိပ္ပါယ်ဖွင့်ဆိုချက် Object Properties များ အရာဝတ္ထုနည်းလမ်းများ အရာဝတ္ထုပြသခြင်း။ အရာဝတ္ထု ဆက်စပ်ပစ္စည်းများ Object Constructors များ Object Prototypes Object Iterables အရာဝတ္ထုအစုံများ အရာဝတ္ထုမြေပုံများ Object ကိုးကား

JS လုပ်ဆောင်ချက်များ

လုပ်ဆောင်ချက် အဓိပ္ပါယ်ဖွင့်ဆိုချက် လုပ်ဆောင်ချက် ကန့်သတ်ချက်များ Function Invocation လုပ်ဆောင်ချက်ခေါ်ဆိုမှု လုပ်ဆောင်ချက်ကို အသုံးပြုပါ။ Function ပိတ်ခြင်းများ

JS သင်တန်းများ

အတန်းမိတ်ဆက် Class Inheritance အတန်းထဲမှာလည်း

JS Async

JS ပြန်ခေါ်မှုများ JS Asynchronous JS ကတိများ JS Async/Await

JS HTML DOM

DOM မိတ်ဆက် DOM နည်းလမ်းများ DOM စာရွက်စာတမ်း DOM ဒြပ်စင်များ DOM HTML DOM ပုံစံများ DOM CSS DOM အန်နီမေးရှင်းများ DOM ပွဲများ DOM ဖြစ်ရပ် နားထောင်သူ DOM လမ်းညွှန် DOM Nodes DOM စုစည်းမှုများ DOM Node စာရင်းများ

JS Browser BOM

JS Window JS မျက်နှာပြင် JS တည်နေရာ JS သမိုင်း JS Navigator JS Popup သတိပေးချက် JS Timing JS Cookies

JS ဝဘ် API များ

ဝဘ် API မိတ်ဆက် ဝဘ်ဖောင် API ဝဘ်သမိုင်း API ဝဘ်သိုလှောင်မှု API Web Worker API Web Fetch API ဝဘ် Geolocation API

JS AJAX

AJAX နိဒါန်း AJAX XMLHttp AJAX တောင်းဆိုချက် AJAX တုံ့ပြန်မှု AJAX XML ဖိုင် AJAX PHP AJAX ASP AJAX ဒေတာဘေ့စ် AJAX အပလီကေးရှင်းများ AJAX ဥပမာများ

JS JSON

JSON မိတ်ဆက် JSON Syntax JSON နှင့် XML JSON ဒေတာအမျိုးအစားများ JSON Parse JSON Stringify JSON အရာဝတ္ထုများ JSON Arrays JSON ဆာဗာ JSON PHP JSON HTML JSON JSONP

JS နှင့် jQuery

jQuery ရွေးချယ်မှုများ jQuery HTML jQuery CSS jQuery DOM

JS ဂရပ်ဖစ်

JS ဂရပ်ဖစ် JS Canvas JS Plotly JS Chart.js JS Google Chart JS D3.js

JS ဥပမာများ

JS ဥပမာများ JS HTML DOM JS HTML ထည့်သွင်းမှု JS HTML Objects JS HTML ပွဲများ JS Browser JS တည်းဖြတ်သူ JS လေ့ကျင့်ခန်းများ JS Quiz JS လက်မှတ်

JS ကိုးကားချက်များ

JavaScript Objects HTML DOM အရာဝတ္ထုများ


ဝဘ် Geolocation API


အသုံးပြုသူ၏ရာထူးကိုရှာပါ။

HTML Geolocation API ကို အသုံးပြုသူတစ်ဦး၏ ပထဝီဝင်အနေအထားကို ရရှိရန် အသုံးပြုသည်။

၎င်းသည် privacy ကိုအလျှော့အတင်းလုပ်နိုင်သောကြောင့်၊ အသုံးပြုသူမှ၎င်းကိုအတည်ပြုမပေးပါကရာထူးမရနိုင်ပါ။

မှတ်ချက်- စမတ်ဖုန်းကဲ့သို့ GPS ပါသည့် စက်များအတွက် Geolocation သည် အတိကျဆုံးဖြစ်သည်။


Geolocation API ကို ဘရောက်ဆာအားလုံးတွင် ပံ့ပိုးထားသည်-

Yes Yes Yes Yes Yes

မှတ်ချက်- Chrome 50 တွင် Geolocation API သည် HTTPS ကဲ့သို့သော လုံခြုံသောအကြောင်းအရာများတွင်သာ အလုပ်လုပ်ပါမည်။ အကယ်၍ သင့်ဆိုက်ကို လုံခြုံမှုမရှိသော မူရင်း ( HTTP ကဲ့သို့) တွင် လက်ခံထားပါက သုံးစွဲသူများ၏ တည်နေရာကို ရယူရန် တောင်းဆိုချက်များ လုပ်ဆောင်နိုင်တော့မည် မဟုတ်ပါ။


Geolocation API ကိုအသုံးပြုခြင်း။

အသုံးပြုသူ၏ getCurrentPosition()အနေအထားကို ပြန်ပေးရန် နည်းလမ်းကို အသုံးပြုသည်။

အောက်ဖော်ပြပါ ဥပမာသည် အသုံးပြုသူ၏ တည်နေရာ၏ လတ္တီတွဒ်နှင့် လောင်ဂျီတွဒ်တို့ကို ပြန်ပေးသည်-

ဥပမာ

<script>
const x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude +
  "<br>Longitude: " + position.coords.longitude;
}
</script>

ဥပမာ ရှင်းပြထားသည်-

  • Geolocation ကို ပံ့ပိုးထားခြင်း ရှိမရှိ စစ်ဆေးပါ။
  • ထောက်ခံပါက getCurrentPosition() နည်းလမ်းကို လုပ်ဆောင်ပါ။ မဟုတ်ပါက အသုံးပြုသူထံသို့ မက်ဆေ့ချ်တစ်ခု ပြသပါ။
  • getCurrentPosition() method အောင်မြင်ပါက၊ ၎င်းသည် parameter (showPosition) တွင်ဖော်ပြထားသော လုပ်ဆောင်ချက်အား သြဒိနိတ်အရာဝတ္တုအား ပြန်ပေးသည်။
  • showPosition() လုပ်ဆောင်ချက်သည် Latitude နှင့် Longitude ကိုထုတ်ပေးသည်။

အထက်ဖော်ပြပါ ဥပမာသည် အမှားအယွင်းမရှိသော အလွန်အခြေခံကျသော Geolocation script တစ်ခုဖြစ်သည်။



အမှားများနှင့် ငြင်းပယ်မှုများကို ကိုင်တွယ်ခြင်း။

getCurrentPosition()အမှားများကို ကိုင်တွယ်ရန် နည်းလမ်း ၏ ဒုတိယ ဘောင်ကို အသုံးပြုသည်။ အသုံးပြုသူ၏တည်နေရာကို ရယူရန် ပျက်ကွက်ပါက ၎င်းသည် လုပ်ဆောင်ရန် လုပ်ဆောင်ချက်ကို သတ်မှတ်ပေးသည်-

ဥပမာ

function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML = "The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "An unknown error occurred."
      break;
  }
}

မြေပုံတွင်ရလဒ်ကိုပြသခြင်း။

မြေပုံတစ်ခုတွင် ရလဒ်ကိုပြသရန်၊ သင်သည် Google Maps ကဲ့သို့ မြေပုံဝန်ဆောင်မှုသို့ ဝင်ရောက်ခွင့် လိုအပ်ပါသည်။

အောက်ဖော်ပြပါ ဥပမာတွင်၊ ပြန်ပေးသော လတ္တီတွဒ်နှင့် လောင်ဂျီတွဒ်တို့ကို Google Map တွင် တည်နေရာပြရန် (အငြိမ်ပုံသဏ္ဍာန်ကို အသုံးပြု၍) ကိုအသုံးပြုသည်-

ဥပမာ

function showPosition(position) {
  let latlon = position.coords.latitude + "," + position.coords.longitude;

  let img_url = "https://maps.googleapis.com/maps/api/staticmap?center=
  "+latlon+"&zoom=14&size=400x300&sensor=false&key=YOUR_KEY";

  document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}

တည်နေရာ-တိကျသောအချက်အလက်

ဤစာမျက်နှာသည် မြေပုံပေါ်တွင် သုံးစွဲသူတစ်ဦး၏ အနေအထားကို မည်သို့ပြသရမည်ကို သရုပ်ပြထားပါသည်။

Geolocation သည် အောက်ပါကဲ့သို့သော တည်နေရာဆိုင်ရာ အချက်အလက်များအတွက် အလွန်အသုံးဝင်ပါသည်။

  • နောက်ဆုံးပေါ် ဒေသဆိုင်ရာ အချက်အလက်
  • အသုံးပြုသူအနီးတွင် စိတ်ဝင်စားဖွယ်အချက်များ ပြသခြင်း။
  • တစ်ကွေ့ပြီးတစ်ကွေ့ လမ်းပြခြင်း (GPS)

getCurrentPosition() နည်းလမ်း - ဒေတာပြန်ပို့ခြင်း။

နည်းလမ်း သည် getCurrentPosition()အောင်မြင်မှုတွင် အရာဝတ္ထုတစ်ခုကို ပြန်ပေးသည်။ လတ္တီတွဒ်၊ လောင်ဂျီတွဒ်နှင့် တိကျမှု ဂုဏ်သတ္တိများကို အမြဲတမ်း ပြန်ပေးသည်။ ရနိုင်လျှင် အခြားဂုဏ်သတ္တိများကို ပြန်ပေးသည်-

Property Returns
coords.latitude The latitude as a decimal number (always returned)
coords.longitude The longitude as a decimal number (always returned)
coords.accuracy The accuracy of position (always returned)
coords.altitude The altitude in meters above the mean sea level (returned if available)
coords.altitudeAccuracy The altitude accuracy of position (returned if available)
coords.heading The heading as degrees clockwise from North (returned if available)
coords.speed The speed in meters per second (returned if available)
timestamp The date/time of the response (returned if available)

Geolocation Object - အခြားစိတ်ဝင်စားဖွယ်နည်းလမ်းများ

Geolocation object တွင် အခြားသော စိတ်ဝင်စားဖွယ် နည်းလမ်းများ လည်း ရှိပါသည်။

  • watchPosition()- အသုံးပြုသူ၏ လက်ရှိအနေအထားကို ပြန်ပေးကာ အသုံးပြုသူရွေ့လျားသွားသည့်အတိုင်း (ကားရှိ GPS ကဲ့သို့) မွမ်းမံထားသော အနေအထားသို့ ဆက်လက်ရောက်ရှိနေပါသည်။
  • clearWatch()- watchPosition()နည်းလမ်းကိုရပ်ပါ။

အောက်ဖော်ပြပါ ဥပမာသည် watchPosition()နည်းလမ်းကို ပြသည်။ ဤ (စမတ်ဖုန်းကဲ့သို့) စမ်းသပ်ရန် တိကျသော GPS ကိရိယာတစ်ခု လိုအပ်သည်-

ဥပမာ

<script>
const x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.watchPosition(showPosition);
  } else {
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}
function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude +
  "<br>Longitude: " + position.coords.longitude;
}
</script>