定位 جغرافیایی HTML5

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

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

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

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

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

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

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

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

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

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

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

مثال

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

آزمایش کنید

توضیح مثال:

  • بررسی پشتیبانی از جغرافیایی‌سازی
  • اگر این روش پشتیبانی شود، روش getCurrentPosition() اجرا می‌شود. اگر پشتیبانی نشود، پیامی به کاربر نمایش داده می‌شود.
  • اگر روش getCurrentPosition() با موفقیت اجرا شود، یک شیء coordinates به روشی که در پارامتر showPosition مشخص شده است، بازمی‌گرداند
  • функشنی 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="درخواست برای دریافت مکان کاربر به تعویق افتاده است."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="یک خطای ناشناخته رخ داده است."
      break;
    }
  }

آزمایش کنید

کد خطا:

  • ممنوعیت دسترسی - کاربر اجازه مکان‌یابی را نمی‌دهد
  • مکان موجود نیست - نمی‌توان مکان فعلی را دریافت کرد
  • 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="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="latitude: " + position.coords.latitude +
  "<br />longitude: " + position.coords.longitude;
  }
</script>

آزمایش کنید