‎‎رابط جغرافيائي وب ـWeb Geolocation API

‎‎موقعيت يابي كاربرLocate the User's Position -‎

‎براي يافتن موقعيت كاربرازHTML Geolocation API استفاده ميشود .از آنجائيكه اين مي تواند ‎حريم خصوصي كاربر را بخطر بياندازد، موقعيت در دسترس نيست مگر اينكه كاربر آنرا تائيد كند.

‎‎پشتيباني مرورگرBrowser Support -‎

‎Geolocation API‎توسط همه مرورگر ها پشتيباني ميشوند :

‎

‎Yes‎	‎Yes‎	‎Yes‎	‎Yes‎	‎Yes‎

‎‎استفاده از رابط جغرافيائيUsing the 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 >

‎‎تشريح مثال:

‎
• ‎‎بررسي پشتيباني مرورگر از رابط جغرافيائي .ويژگيnavigtor.geolocation
• ‎اگر پشتيباني شود، متد‎getCurrentPosition( )‎ اجرا ميگردد .در غيراينصورت پيغامي ‎براي كاربر ميدهد.
• ‎اگر متد‎getCurrentPosition( )‎ موفق باشد، يك شئ مختصات به تابع مشخص شده در ‎پارامتر ارسال مي نمايد .اين تابع‎showPosition( )‎ است .
• ‎‎تابع‎showPosition( )‎ طول وعرض جغرافيائي را جهت نمايش به صفحه ارسال ميكند.
‎

‎‎مثال بالا يك اسكريپت بسيار ابتدائي است، آن بدون رسيدگي به خطاهاست.

‎‎خطا يابي موقعيت جغرافيائيHandling Errors and Rejecions -‎

‎پارامتر دوم متد‎‎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;
  }
}

‎‎نمايش نتيجه در نقشهDispplaying Result in Map -‎

‎‎براي نمايش نتيجه در نقشه، بايد به يك سرويس نقشه مانندGoogle Mapd دسترسي داشته باشيد .

‎در مثال زير، طول وعرض جغرافيائي بازگشتي براي نشان دادن مكان در نقشه گوگل‎)‎ ‎با استفاده از يك تصويرثابت‎(‎ استفاده ميگردد .

‎‎مثال ـ نمايش در نقشه

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+"'>";
}

‎‎اطلاعات مكاني ـLocation -‎ specific Information

‎در اين صفحه نحوه نمايش موقعيت كاربر بر روي نقشه نشان داده شده است .موقعيت جغرافيائي نيز ‎براي اطلاعات مكاني بسيار مفيد ميباشد، مانند:

‎
• ‎‎اطلاعات محلي بروز
• ‎‎نمايش نقاط مورد علاقه در نزديكي كاربر
• ‎‎ناوبري گام بگام‎(GPS)‎
‎

‎The getCurrentPostion( ) Method - Return Data

‎‎برگشت داده اي متد‎getCurrentPosition( )‎

‎متد‎‎getCurrentPosition( )‎‎ در صورت موفقيت شئي را برگشت ميدهد .

‎آن شئ شامل ويژگي هاي طول و عرض جغرافيائي و دقت ، كه هميشه برگشت ميشوند .ساير ويژگي ها ‎در صورت وجود بازگردانده خواهند شد:

‎Geolocation Object -‎ othrer interesting Methods‎

‎‎شئ‎ متدهاي هاي ديگر موردتوجه -geolocation

‎‎شئ‎geolocation‎ همچنين داراي متدهاي مورد توجه ديگري مطابق زير دارد:

‎
• ‎‎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 >

JS Tutorial آموزش جاوااسکریپت

JS Objects اشیاء جاوااسکریپت

JS Functions توابع جاوااسکریپت

JS Classes کلاسهای جاوااسکریپت

JS Async ناهمزمانی جاوااسکریپت

JS HTML DOM شئ دام

JS Browser BOM شئ مرورگر

JS Web APIs رابط های اپی آی وب

JS AJAX آجکس وجاوااسکریپت

JavaScript JSON

JavaScript vs JQuery

JS Graphics گرافیک جاوااسکریپت

JS References فهرست مطالب