منطقه جغرافیایی

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Html-menu.png
موارد آموزشی
فرم‌های HTML
گرافیک در HTML
رسانه در HTML
APIها در HTML
۱موقعیت جغرافیایی
۲Drag / Drop
۳ذخیره‌سازی وب
۴Workerهای وب
۵SSE
مثال‌ها
مرجع HTML

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

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

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

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

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

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

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

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


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

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

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

مثال زیر، طول و عرض جغرافیایی موقعیت کاربر را برمی‌گرداند.

مثال

 1 <script>
 2 var x = document.getElementById("demo");
 3 function getLocation() {
 4   if (navigator.geolocation) {
 5     navigator.geolocation.getCurrentPosition(showPosition);
 6   } else {
 7     x.innerHTML = "Geolocation is not supported by this browser.";
 8   }
 9 }
10 
11 function showPosition(position) {
12   x.innerHTML = "Latitude: " + position.coords.latitude +
13   "<br>Longitude: " + position.coords.longitude;
14 }
15 </script>


مشاهدهٔ نتیجه


شرح مثال:

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

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

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

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

مثال

 1 function showError(error) {
 2   switch(error.code) {
 3     case error.PERMISSION_DENIED:
 4       x.innerHTML = "User denied the request for Geolocation."
 5       break;
 6     case error.POSITION_UNAVAILABLE:
 7       x.innerHTML = "Location information is unavailable."
 8       break;
 9     case error.TIMEOUT:
10       x.innerHTML = "The request to get user location timed out."
11       break;
12     case error.UNKNOWN_ERROR:
13       x.innerHTML = "An unknown error occurred."
14       break;
15   }
16 }


مشاهدهٔ نتیجه


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

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

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

مثال

1 function showPosition(position) {
2   var latlon = position.coords.latitude + "," + position.coords.longitude;
3 
4   var img_url = "https://maps.googleapis.com/maps/api/staticmap?center=
5   "+latlon+"&zoom=14&size=400x300&sensor=false&key=YOUR_KEY";
6 
7   document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
8 }

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

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

همچنین 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 دقیق برای آزمایش آن نیاز دارید (مانند گوشی هوشمند):

مثال

 1 <script>
 2 var x = document.getElementById("demo");
 3 function getLocation() {
 4   if (navigator.geolocation) {
 5     navigator.geolocation.watchPosition(showPosition);
 6   } else {
 7     x.innerHTML = "Geolocation is not supported by this browser.";
 8   }
 9 }
10 function showPosition(position) {
11   x.innerHTML = "Latitude: " + position.coords.latitude +
12   "<br>Longitude: " + position.coords.longitude;
13 }
14 </script>


مشاهدهٔ نتیجه



منابع آموزشی