٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

آموزش Web Geolocation API

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

محمد یوسفی

29 جولای 2021

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

برای به دست آوردن موقعیت جغرافیایی کاربر از HTML Geolocation API استفاده می شود.

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

توجه: موقعیت مکانی جغرافیایی برای دستگاههایی که دارای GPS هستند دقیقاً دقیق است.


Geolocation API در همه مرورگرها پشتیبانی می شود:

توجه: از Chrome 50 ، API جغرافیایی فقط در زمینه های ایمن مانند HTTPS کار می کند. اگر سایت شما از یک منبع غیر ایمن (مانند HTTP) میزبانی شود ، درخواست های دریافت مکان کاربران دیگر کار نمی کند.


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

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

مثال زیر عرض و طول موقعیت کاربر را برمی گرداند:

مثال

<script>
const 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)
  • تابع showPosition () عرض و طول جغرافیایی را تولید می کند

مثال بالا یک اسکریپت Geolocation بسیار اساسی است ، بدون اینکه خطایی در آن انجام شود.



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

پارامتر دوم 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;
  }
}

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

برای نمایش نتیجه در نقشه ، باید به یک سرویس نقشه مانند Google Maps دسترسی داشته باشید.

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

مثال

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

  let 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+"'>";
}

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

این صفحه نحوه نشان دادن موقعیت کاربر بر روی نقشه را نشان داده است.

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

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

روش () getCurrentPosition – بازگشت داده ها

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


مکان جغرافیایی – روش های جالب دیگر

شی Ge موقعیت جغرافیایی روشهای جالب دیگری نیز دارد:

  • watchPosition() – موقعیت فعلی کاربر را برمی گرداند و همچنان که کاربر حرکت می کند (مانند GPS در اتومبیل) همچنان وضعیت به روز شده را بازمی گرداند.
  • clearWatch()– watchPosition()روش را متوقف می کند .

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

مثال

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

منبع

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها