موقعیت یابی جغرافیایی در HTML

API موقعیت‌یابی جغرافیایی (Geolocation) در HTML

API موقعیت‌یابی جغرافیایی برای دریافت موقعیت مکانی فعلی کاربر استفاده می‌شود.

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

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

نکته: API موقعیت‌یابی جغرافیایی فقط در زمینه‌های امن مانند HTTPS در دسترس است. نکته: API موقعیت‌یابی جغرافیایی برای دستگاه‌های دارای GPS، مانند گوشی‌های هوشمند یا ساعت‌های هوشمند، دقیق‌تر است.

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

اعداد موجود در جدول، اولین نسخه مرورگری را مشخص می‌کنند که به طور کامل از Geolocation پشتیبانی می‌کند.

استفاده از API موقعیت‌یابی جغرافیایی HTML

API موقعیت‌یابی جغرافیایی از طریق یک فراخوانی به navigator.geolocation قابل دسترسی است. این کار باعث می‌شود مرورگر از کاربر برای دسترسی به داده‌های موقعیت مکانی او اجازه بخواهد. اگر کاربر موافقت کند، مرورگر برای دسترسی به این اطلاعات به دنبال بهترین قابلیت موجود در دستگاه خواهد گشت (برای مثال GPS). متد getCurrentPosition() برای بازگرداندن موقعیت مکانی فعلی کاربر استفاده می‌شود. مثال زیر طول و عرض جغرافیایی موقعیت فعلی کاربر را برمی‌گرداند:

مثال

<script>
  const x = document.getElementById("demo");

  function getLocation() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(success, error);
    } else {
      x.innerHTML = "Geolocation is not supported by this browser.";
    }
  }

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

  function error() {
    alert("Sorry, no position available.");
  }
</script>

توضیح مثال:

• بررسی می‌کند که آیا Geolocation پشتیبانی می‌شود یا خیر.

• اگر Geolocation پشتیبانی شود، متد getCurrentPosition() را اجرا می‌کند. در غیر این صورت، پیامی به کاربر نمایش می‌دهد.

• تابع success() موقعیت کاربر را بر حسب طول و عرض جغرافیایی خروجی می‌دهد.

• تابع error() در صورتی که مرورگر در اجرای getCurrentPosition() با خطا مواجه شود، یک متن هشدار نمایش می‌دهد.

مدیریت خطا و رد درخواست‌ها

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

مثال

function error(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;
  }
}

اطلاعات وابسته به موقعیت مکانی

موقعیت‌یابی جغرافیایی برای اطلاعات وابسته به موقعیت نیز بسیار مفید است، مانند:

• اطلاعات محلی به‌روز

• نمایش نقاط مورد علاقه (Points-of-interest) در نزدیکی کاربر

• ناوبری نوبت به نوبت (GPS)

متد ()getCurrentPosition - داده‌های بازگشتی

متد getCurrentPosition() در صورت موفقیت، یک شیء (object) برمی‌گرداند. خصوصیات latitude، longitude و accuracy همیشه بازگردانده می‌شوند. سایر خصوصیات در صورت در دسترس بودن بازگردانده می‌شوند:

شیء Geolocation - سایر متدهای جالب

شیء Geolocation متدهای جالب دیگری نیز دارد:

• watchPosition() - موقعیت فعلی کاربر را برمی‌گرداند و با حرکت کاربر، به بازگرداندن موقعیت به‌روزشده ادامه می‌دهد (مانند GPS در یک ماشین).

• clearWatch() - متد watchPosition() را متوقف می‌کند.

مثال زیر متد watchPosition() را نشان می‌دهد. برای آزمایش این مورد به یک دستگاه GPS دقیق نیاز دارید (مانند یک گوشی هوشمند):

مثال

<script>
  const x = document.getElementById("demo");

  function getLocation() {
    if (navigator.geolocation) {
      navigator.geolocation.watchPosition(success, error);
    } else {
      x.innerHTML = "Geolocation is not supported by this browser.";
    }
  }

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

  function error(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;
    }
  }
</script>