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

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

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

گوگل کروم	فایرفاکس	اینترنت اکسپلورر/Edge	سافاری	اپرا
از نسخه ی 5 تا 49 در حالت `http` و از نسخه ی 50 به بعد فقط در حالت `https`	3.5	9.0	5.0	16.0

توجه داشته باشید که در گوگل کروم تنها زمانی می توانید درخواست موقعیت جغرافیایی کاربر را بدهید که سایت شما در بستری امن مانند HTTPS میزبانی شود. اگر وب سایت شما روی HTTP میزبانی می شود درخواست های موقعیت جغرافیایی دیگر کار نخواهند کرد.

شروع نحوه ی کار این API با استفاده از تابع ()getCurrentPosition است که موقعیت مکانی کاربر را برمیگرداند. در مثال زیر عرض و طول جغرافیایی کاربر را از او خواسته ایم:

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

مشاهده ی خروجی

این مثال ابتدا چک می کند تا ببیند مرورگر کاربر از قابلیت Geolocation (موقعیت جغرافیایی) پشتیبانی می کند یا خیر:

if (navigator.geolocation)

اگر از این قابلیت پشتیبانی می کرد، می گوید تابع ()getCurrentPosition را اجرا کن. در غیر این صورت به کاربر پیامی مبنی بر عدم پشتیبانی مرورگرش نمایش بده:

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

اگر کاربر متد ()getCurrentPosition را تایید کرد و موفقیت آمیز بود، یک شیء حاوی مختصات کاربر به تابعی که به صورت آرگومان به این متد داده شده است تحویل داده می شود:

    navigator.geolocation.getCurrentPosition(showPosition);

تابع ()showPosition نیز در آخر عرض و طول جغرافیایی کاربر را نمایش می دهد:

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

مدیریت خطاها

مثال بالا بسیار ساده بود و هیچ کدی برای کار کردن با خطاهای احتمالی نداشت. بنابراین بیایید یک مثال پیچیده تر بنویسیم! پارامتر دوم تابع ()getCurrentPosition برای مدیریت خطا ها کاربرد دارد؛ تابعی را مشخص می کند تا در صورت بروز خطا آن را مدیریت کند:

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

مشاهده ی خروجی

پیام های کار با خطا به این شرح است:

پیام خطا	ترجمه
Location information is unavailable.	اطلاعات مربوط به موقعیت جغرافیایی در دسترس نیست.
The request to get user location timed out.	زمان درخواست دسترسی به موقعیت جغرافیایی کاربر طولانی شد.
An unknown error occurred.	خطای ناشناخته ای رخ داده است.

نمایش در نقشه

برای نمایش اطلاعات در نقشه به یک سرویس ارائه ی نقشه مانند 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+"'>";
}

استفاده از api مربوط به google maps نیاز به توضیحات فراوان دارد و در این مقاله نمی گنجد اما اطلاعات آن به صورت کامل در فضای اینترنت موجود است که می توانید از آن استفاده کنید.

ما می توانیم از موقعیت افراد استفاده کنیم تا بر اساس آن اطلاعات خاصی را به آن ها نمایش دهیم یا از آن ها مخفی کنیم. به طور مثال ارائه ی اطلاعات مختص به موقعیت کاربر (مثلا تنها برای کاربران مشهدی) یا ارائه ی اطلاعات مربوط به موقعیت کاربر (مانند تاکسی های اینترنتی) و غیره.

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

متدهای دیگر

شیء Geolocation متد های جالب دیگری نیز دارد:

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

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

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

مشاهده ی خروجی

امیدوارم از این قسمت لذت برده باشید.

دیدگاه‌های شما (2 دیدگاه)

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

احسان

23 مرداد 1400

سلام مرسی از آموزشتون خیلی جالب بود و اما یه سوال داشتم... میخوام بدونم حالا چیکار باید کرد همین که لینک سایت رو باز کردن موقعیت مکانی کاربر نمایش داده بشه و نیازی به اینکه دکمه نمایش رو بزنه نباشه. ایا راه حلی وجود داره؟!

مصطفی

09 خرداد 1398

سلام نمی‌دونم چرا لوکیشن منو اشتباه نمایش می‌ده. الان لوکیشن منو توی این نقطه گفته، که برای کانادا هست. Latitude: 56.130365999999995 Longitude: -106.34677099999999 با این سایت تست کردم: https://www.gps-coordinates.net/ ضمنا اجازه دسترسی به دریافت لوکیشن رو هم مرورگر داره و اینکه از لپ‌تاپ دارم تست می‌کنم. ممنون می‌شم توضیح بدید که چرا مختصات رو اشتباه پیدا می‌کنه؟

امیر زوارمی

سلام دوست عزیز بنده تست کردم و مشکلی نداشت برام. سعی کنید این موارد رو چک کنید: 1- مرورگرتون رو به آخرین نسخه آپدیت کنید. 2- از VPN استفاده نکنید؛ استفاده از VPN ممکنه موقعیت رو تغییر بده (مثلا از سرور کانادا وصل شده باشید). 3- قسمت Developer Tools (کلید f12) مرورگر کروم رو باز کنید. از منوی سه نقطه ای سمت بالا و راست اون قسمت گزینه ی More Tools رو انتخاب کنید و از اونجا روی Sensors کلیک کنید. دقت کنید که Geo-location رو روی مکان خاصی override نکرده باشید

موقعیت یابی مکانی در HTML - استفاده از API

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

مدیریت خطاها

نمایش در نقشه

متدهای دیگر