محل‌یابی جغرافیایی HTML5

تست شخصی کنید: مکان خود را در نقشه گوگل نمایش دهید

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

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

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

این ویژگی ممکن است حریم خصوصی کاربر را نقض کند، مگر اینکه کاربر موافقت کند، اطلاعات مکان کاربر در دسترس نیست.

نکته:برای دستگاه‌هایی که دارای GPS هستند، مانند iPhone، جغرافیابی دقیق‌تر است.

HTML5 - استفاده از جغرافیابی

برای دریافت مکان کاربر از روش getCurrentPosition() استفاده کنید.

در اینجا یک مثال ساده از جغرافیابی آورده شده است که می‌تواند طول و عرض جغرافیایی مکان کاربر را بازمی‌گرداند.

مثال

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="این مرورگر پشتیبانی از موقعیت جغرافیایی را ندارد.";}
  }
function showPosition(position)
  {
  x.innerHTML="عرض جغرافیایی: " + position.coords.latitude +
  "<br />طول جغرافیایی: " + position.coords.longitude;
  }
</script>

آزمایش کنید

توضیح مثال:

  • تشخیص این که آیا جغرافیابی پشتیبانی می‌شود یا خیر
  • اگر پشتیبانی شود، روش getCurrentPosition() اجرا می‌شود. اگر پشتیبانی نشود، پیامی به کاربر نمایش داده می‌شود.
  • اگر روش getCurrentPosition() با موفقیت اجرا شود، یک شیء coordinates به روش تعیین شده در پارامتر showPosition بازمی‌گرداند
  • فuncton showPosition() طول و عرض جغرافیایی را دریافت و نمایش می‌دهد

مثال بالا یک اسکریپت پایه‌ای برای جغرافیابی است که شامل مدیریت خطا نمی‌شود.

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

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

مثال

function showError(error)
  {
  switch(error.code)
    {
    case error.PERMISSION_DENIED:
      x.innerHTML=\"درخواست مکان جغرافیایی توسط کاربر رد شده است.\"
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML=\"معلومات مکان در دسترس نیست.\"
      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;
    }
  }

آزمایش کنید

کد خطا:

  • Permission denied - کاربر اجازه مکان‌یابی را نداده است
  • مکان موجود نیست - نمی‌توان مکان فعلی را دریافت کرد
  • Timeout - عملیات به زمان اتمام رسید

نمایش نتایج در نقشه

برای نمایش نتایج در نقشه، باید به سرویس نقشه‌ای دسترسی داشته باشید که از مختصات جغرافیایی پشتیبانی می‌کند، مانند نقشه‌های گوگل یا بای‌دو:

مثال

function showPosition(position)
{
var latlon=position.coords.latitude+","+position.coords.longitude;
var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML="<img src='"+img_url+"' />";
}

آزمایش کنید

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

اسکریپت‌های نقشه گوگل

لینک بالا به شما نشان می‌دهد که چگونه می‌توانید از اسکریپت برای نمایش نقشه تعاملی با گزینه‌های تیک، بزرگنمایی و حرکت استفاده کنید.

اطلاعات مکان مشخص

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

مثال:

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

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

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

ویژگی‌ها توضیح
coords.latitude مختصات عرض جغرافیایی به صورت اعداد اعشاری
coords.longitude مختصات طول جغرافیایی به صورت اعداد اعشاری
coords.accuracy دقت مکان‌یابی
coords.altitude ارتفاع، از سطح دریا با واحد متر اندازه‌گیری می‌شود
coords.altitudeAccuracy دقیت ارتفاع موقعیت
coords.heading جهت، از شمال مثبت شروع می‌شود و به درجه
coords.speed سرعت، به میتر در ثانیه
timestamp تاریخ و زمان پاسخ

ماهیت Geolocation - روش‌های جالب دیگر

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

clearWatch() - توقف روش watchPosition()

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

مثال

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.watchPosition(showPosition);
    }
  else{x.innerHTML="این مرورگر پشتیبانی از موقعیت جغرافیایی را ندارد.";}
  }
function showPosition(position)
  {
  x.innerHTML="عرض جغرافیایی: " + position.coords.latitude +
  "<br />طول جغرافیایی: " + position.coords.longitude;
  }
</script>

آزمایش کنید