100% کامل شده تا

منطقه جغرافیایی در اچ‌تی‌ام‌ال (HTML Geolocation API)

از موتو کد، دانشنامهٔ برنامه‌نویسی


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


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

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


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


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

اعداد در جدول نشان دهندهٔ اولین نسخه مرورگر هستند که Geolocation را پشتیبانی کامل می‌کنند.

API Chrome Internet Explorer / Edge Firefox Safari Opera
منطقه جغرافیایی ۵٫۰ - ۴۹٫۰ (http)
۵۰٫۰ (https)
۹٫۰ ۳٫۵ ۵٫۰ ۱۶٫۰


توجه: از کروم نسخهٔ ۵۰، API منطقه جغرافیایی فقط در زمینه‌های امن مانند HTTPS کار می‌کند. اگر سایت شما در یک مبدأ ناامن قرار گرفته باشد (مانند HTTP)، درخواست‌ها برای به‌دست‌آوردن موقعیت کاربر عمل نخواهند کرد.


استفاده از مکان جغرافیایی HTML

متد 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>

مثال
<!DOCTYPE html>
<html>
<body>

<p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Try It</button>

<p id="demo"></p>

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

</body>
</html>

Responsive demo.svg

شرح مثال:

  • بررسی می‌کند آیا Geolocation پشتیبانی می‌شود یا نه
  • اگر پشتیبانی می‌شود، متد getCurrentPosition() را اجرا می‌کند. اگر نه پیامی به کاربر نمایش می‌دهد
  • اگر متد getCurrentPosition() موفق بود، شیء مختصاتی را به تابع تعیین شده در پارامتر برمی‌گرداند (showPosition)
  • تابع showPosition() طول و عرض جغرافیایی را بعنوان خروجی می‌دهد

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



رسیدگی به خطاها و رد کردن‌ها

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

مثال
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;
  }
}

مثال
<!DOCTYPE html>
<html>
<body>

<p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Try It</button>

<p id="demo"></p>

<script>
var x = document.getElementById("demo");

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition, showError);
  } else { 
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude;
}

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

</body>
</html>

Responsive demo.svg



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

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

در مثال زیر، طول و عرض جغرافیایی به دست آمده برای نشان دادن مکان کاربر در Google Map استفاده می‌شود (با استفاده از یک تصویر استاتیک):

مثال
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+"'>";
}



اطلاعات مربوط به مکان

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

همچنین Geolocation برای اطلاعات مربوط به مکان هم بسیار مفید است، مانند:

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


متد getCurrentPosition() – داده‌های خروجی

متد getCurrentPosition() در صورت موفقیت یک شیء را برمی‌گرداند. خصوصیات طول و عرض جغرافیایی و دقت همیشه برگردانده می‌شوند (return می‌شوند). خصوصیات دیگر اگر موجود باشند برگردانده می‌شوند.

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


شیء Geolocation - روش‌های جالب دیگر

شیء Geolocation روش‌های جالب دیگری هم دارد:

  • watchPosition() - مکان فعلی کاربر را برمی‌گرداند و به‌طور پیوسته با حرکت کاربر موقعیت مکانی او را بروزرسانی می‌کند.
  • clearWatch() - متد watchPosition() را متوقف می‌کند.

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

مثال
<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>

مثال
<!DOCTYPE html>
<html>
<body>

<p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Try It</button>

<p id="demo"></p>

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

</body>
</html>

Responsive demo.svg


منابع آموزشی




به‌روزرسانی شده: ۲۳ روز پیش