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

HTML5 Geolocation (مکان‌یابی) برای مکان‌یابی موقعیت کاربر استفاده می‌شود.

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

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

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

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

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

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

نکته:برای دستگاه‌هایی که دارای 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 مشخص شده است، بازمی‌گردد
  • توابع showPosition() مختصات طول و عرض جغرافیایی را دریافت و نمایش می‌دهد

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

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

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

مثال

function showError(error)
  {
  switch(error.code)
    {
    در حالت error.PERMISSION_DENIED:
      x.innerHTML = "کاربر درخواست مکان‌یابی را رد کرده است."
      break;
    در حالت error.POSITION_UNAVAILABLE:
      x.innerHTML = "اطلاعات مکان در دسترس نیست."
      break;
    case error.TIMEOUT:
      x.innerHTML="درخواست برای دریافت موقعیت کاربر زمان‌بری شده است."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="یک خطای ناشناخته رخ داده است."
      break;
    }
  }

آزمایش کنید

کد خطا:

  • راستای مجوز - کاربر اجازه دسترسی به تعیین مکان را ندارد
  • مکان غیرقابل دسترسی - نمی‌توان موقعیت فعلی را دریافت کرد
  • Timeout - عملیات اضافه‌ زمان‌بری شده

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

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

مثال

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>

آزمایش کنید