API‌های موقعیت جغرافیایی وب

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

API Geolocation HTML برای دریافت مکان کاربر استفاده می‌شود.

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

آزمایش کنید

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

همه مرورگرها API جغرافیایی را پشتیبانی می‌کنند:

Chrome IE Firefox Safari Opera
پشتیبانی پشتیبانی پشتیبانی پشتیبانی پشتیبانی

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

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

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

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

<script>

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

آزمایش کنید

توضیح مثال:

  1. بررسی پشتیبانی از Geolocation
  2. اگر روش getCurrentPosition() پشتیبانی شود، اجرا کنید. اگر نه، پیامی به کاربر نمایش داده شود
  3. اگر روش getCurrentPosition() موفق باشد، یک شیء coordinates به تابع معینی که در پارامتر (showPosition) مشخص شده، بازمی‌گرداند
  4. تابع showPosition()纬度和经度 را خروجی می‌دهد

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

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

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

<script>

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

آزمایش کنید

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

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

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

<script>

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

اطلاعات مختص به موقعیت

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

Geolocation برای اطلاعات مختص به موقعیت نیز بسیار مفید است، مثلاً:

  • اطلاعات محلی جدید‌ترین
  • نمایش نقطه‌های علاقه‌مند کاربر
  • ناوبری مرحله به مرحله (Turn-by-turn navigation) (GPS)

getCurrentPosition() method - داده‌ها را بازمی‌گرداند

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

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

مетод‌های جالب Geolocation -

Geolocation دارای روش‌های جالب دیگری نیز است:

  • شما به دستگاه GPS دقیق نیاز دارید تا این را تست کنید (مثلاً تلفن هوشمند): - نمایش موقعیت فعلی کاربر و ادامه نمایش موقعیت‌های به‌روز شده با حرکت کاربر (مثلاً GPS در خودرو).
  • clearWatch() - توقف کنید method watchPosition ().

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

<script>

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

آزمایش کنید