میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

جئولوکیشن در HTML

جئولوکیشن یا Geolocation در HTML

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

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

از آنجایی که این API می تواند باعث نقض قوانین حریم خصوصی شود، فقط زمانی مختصات کاربر در دسترس خواهد بود که کاربر اجازه آن را صادر کند.

نکته: جئولوکیشن برای دستگاه هایی که دارای GPS هستند مانند گوشی های هوشمند دقیق تر است.

 

 

استفاده از جئولوکیشن در HTML

تابع getCurrentPosition برای بازگرداندن مختصات کاربر استفاده می شود. مثال زیر مختصات latitude و longitude کاربر را نمایش می دهد.

 

<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() موفقیت آمیز بوده باشد. مقدار مختصات کاربر از طریق تابع تعیین شده بازگشت داده می شود.

تابع showposition() مقدار طول جغرافیایی و عرض جغرافیایی خروجی را نمایش می دهد.

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

 

مدیریت خطا ها و عدم پذیرش

پارامتر دوم تابع getCurrentPosition برای مدیریت خطا ها مورد استفاده قرار می گیرد. این تابع یک تابع دیگر را برای زمانی که عملیات گرفتن مختصات با مشکل مواجه می شود اجرا می کند.

 

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

 

بیشتر
نقل و قول در Html

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

برای نمایش نتایج در یک نقشه، نیاز به دسترسی به سرویس نقشه مانند نقشه گوگل دارید.

در مثال پایین، مقدار مختصات بازگشتی در مکان یابی در سرویس نقشه گوگل استفاده می شود.(با استفاده از تصویر ثابت)

function showPosition(position) {
  var latlon = position.coords.latitude + "," + position.coords.longitude;

  var img_url = "https://maps.googleapis.com/maps/api/staticmap?center=
  "+latlon+"&zoom=14&size=400x300&sensor=false&key=YOUR_KEY";

  document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}

 

 

با استفاده از کد بالا می‌توانید یک تصویر ثابت از گوگل برای وب سایتتان دریافت کنید. البته باید نظر داشته باشید که این کد زمانی کار می‌کند که شما API Key یا کلید API مخصوص را از گوگل دریافت کرده باشید.

 

 

تابع getCurrentPosition بازگشت داده

تابع getCurrentPosition یک آبجکت را در هنگام موفق بودن عملیات بر می گرداند. مختصات latitude، longitude و دقت مقدار هایی هستند که همیشه در جئولوکیشن بازگشت داده می شوند. خواص دیگر آبجکت بازگشتی به شرح زیر هستند:

خاصیت  مقادیر
latitude مقدار دسیمال( همیشه وجود دارد)
longitude مقدار دسیمال(همیشه وجود دارد)
accuracy دقت مختصات(همیشه وجود دارد)
altitude ارتفاع از سطح دریا برحسب متر(اگر در دسترس باشد)
altitudeAccuracy دقت ارتقا (اگر در دسترس باشد)
heading سمت برحسب درجه در جهت عقربه ساعت از شمال(اگر در دسترس باشد)
speed سرعت برحسب متر بر ثانیه (اگر در دسترس باشد)
timestamp تاریخ و زمان پاسخ بازگشتی(اگر در دسترس باشد)

 

آبجکت جئولوکیشن توابع کاربردی دیگری نیز دارد که جالب توجه هستند:

  • Watchposition – موقعیت فعلی کاربر و موقعیت به روز شده کاربر در صورت حرکت کاربر را باز می گرداند (مانند gps در خودرو ).
  • Clearwatch – عملکرد تابع watchposition را متوقف می کند.

 

 

امیدواریم این بخش از آموزش در مورد جئولوکیشن یا Geolocation در Html نیز برای شما مفید واقع شده باشد و ما را در تلگرام و اینستاگرام دنبال کنید .

بیشتر
لیست در Html
ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟