آموزش API موقعیت جغرافیایی در HTML

از API موقعیت جغرافیایی(Geolocation) در HTML برای پیدا کردن موقعیت یک کاربر استفاده می شود.

پیدا کردن موقعیت یک کاربر

از API موقعیت جغرافیایی(Geolocation) در HTML برای دریافت موقعیت جغرافیایی یک کاربر استفاده می شود. از آنجا که ممکن است حریم خصوصی به خطر بیفتد، موقعیت جغرافیایی در دسترس نیست مگر اینکه کاربر (اجازه دهد و) استفاده از آن را قبول کند.

نکته: موقعیت جغرافیایی(Geolocation) در دستگاه های دارای GPS ،مانند گوشی های هوشمند، دقیق تر است.

پشتیبانی مرورگرها

اعداد درون جدول زیر، اولین ورژن از مرورگری را نشان می دهند که کاملاً از موقعیت جغرافیایی(Geolocation) پشتیبانی می کند.

					API
5.0 - 49.0 (http) 50.0 (https)	9.0	3.5	16.0	5.0	Geolocation

نکته: از کروم 50 به بعد، API موقعیت جغرافیایی(Geolocation) تنها در یک محتوای امن مثل HTTPS کار می کند. اگر سایت شما در یک مبداً غیر امن(مانند HTTP) قرار دارد، درخواست دریافت لوکیشن عمل نخواهد کرد.

استفاده از موقعیت جغرافیایی(Geolocation) در HTML

از متد getCurrentPosition() برای برگرداندن موقعیت(position) کاربر استفاده می شود. در مثال زیر، طول جغرافیایی(longitude) و عرض جغرافیایی(latitude) از موقعیت کاربر برگردانده(return) می شود:

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

نکته: اگر پس از کلیک روی دکمه ی "امتحان کنید" در مثال بالا، چیزی نمایش داده نشد، سعی کنید به جای مرورگر فایرفاکس، از کروم استفاده کنید(تا باز شود).

توضیح مثال بالا:

1. ابتدا بررسی می شود که آیا از موقعیت جغرافیایی(Geolocation) پشتیبانی می شود یا خیر.
2. اگر از موقعیت جغرافیایی پشتیبانی شود، متد getCurrentPosition() اجرا می شود. در غیر این صورت، یک پیغام به کاربر نمایش داده می شود.
3. اگر متد getCurrentPosition() موفقیت آمیز باشد، این متد، آبجکت مختصات را، به تابعی که در پارامتر مشخص شده است(showPosition) برمی گرداند.
4. تابع showPosition() عرض جغرافیایی(latitude) و طول جغرافیایی(longitude) را بعنوان خروجی، بیرون می دهد.

مثال بالا، یک اسکریپت بسیار ساده برای موقعیت جغرافیایی(Geolocation) است که مدیریت خطا(error handling) ندارد.

رسیدگی به خطاها(Errors) و عدم پذیرش ها(Rejections)

از پارامتر دومِ متدِ getCurrentPosition() برای رسیدگی به خطاها استفاده می شود. این پارامتر، یک تابع را مشخص می کند که اگر دادنِ لوکیشنِ(location) کاربر با شکست مواجه شود، اجرا شود:

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;
  }
} 

اطلاعات مربوط به مکان(location-specific information)

در این بخش، نشان داده شده است که چگونه موقعیت یک کاربر، روی یک نقشه نشان داده شود. موقعیت جغرافیایی(Geolocation) برای اطلاعات مربوط به مکان، از قبیل موارد زیر، بسیار مفید است:

• به روز رسانی کردن اطلاعات محلی
• نمایش نقاط مورد علاقه در نزدیکی کاربر
• ناوبری گام به گام (GPS)

متد getCurrentPosition() داده ها را برمی گرداند

متد getCurrentPosition() ، یک آبجکت را در صورت موفقیت، برمی گرداند. عرض جغرافیایی(latitude) و طول جغرافیایی(longitude) همواره برگردانده می شوند. اما دیگر ویژگی ها(property) در صورتِ در دسترس بودن، برگردانده می شوند:

بررسی آبجکت موقعیت جغرافیایی و دیگر متدهای این زمینه

آبجکت موقعیت جغرافیایی(Geolocation) متدهای جذاب دیگری نیز دارد:

• متد watchPosition(): موقعیت(position) فعلی کاربر را برمی گرداند و همان طور که کاربر حرکت می کند(مانند 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>