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

          برنامه نویس 
            بازدید : 37
          چهارشنبه 12 تیر 1398
           نظرات (0)
        

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

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

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

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

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

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<!DOCTYPE html>
<html>
<body>
 
<p>Click the button toget your coordinates.</p>
 
<button onclick="getLocation()">TryIt</button>
 
<pid="demo"></p>
 
<script>
varx=document.getElementById("demo");
 
functiongetLocation(){
  if(navigator.geolocation){
    navigator.geolocation.getCurrentPosition(showPosition);
  }else{
    x.innerHTML="Geolocation is not supported by this browser.";
  }
}
 
functionshowPosition(position){
  x.innerHTML="Latitude: "+position.coords.latitude+
  "<br>Longitude: "+position.coords.longitude;
}
</script>
 
</body>
</html>

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

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

 
1

if(navigator.geolocation)

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

 



1
2
3
4
5

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

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

 
1

    navigator.geolocation.getCurrentPosition(showPosition);

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

 



1
2
3
4

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

مدیریت خطاها

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

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

<!DOCTYPE html>
<html>
<body>
 
<p>Click the button toget your coordinates.</p>
 
<button onclick="getLocation()">TryIt</button>
 
<pid="demo"></p>
 
<script>
varx=document.getElementById("demo");
 
functiongetLocation(){
  if(navigator.geolocation){
    navigator.geolocation.getCurrentPosition(showPosition,showError);
  }else{
    x.innerHTML="Geolocation is not supported by this browser.";
  }
}
 
functionshowPosition(position){
  x.innerHTML="Latitude: "+position.coords.latitude+
  "<br>Longitude: "+position.coords.longitude;
}
 
functionshowError(error){
  switch(error.code){
    caseerror.PERMISSION_DENIED:
      x.innerHTML="User denied the request for Geolocation."
      break;
    caseerror.POSITION_UNAVAILABLE:
      x.innerHTML="Location information is unavailable."
      break;
    caseerror.TIMEOUT:
      x.innerHTML="The request to get user location timed out."
      break;
    caseerror.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 نمایش داده می شوند (با استفاده از یک تصویر استاتیک):

 



1
2
3
4
5
6
7
8

functionshowPosition(position){
  varlatlon=position.coords.latitude+","+position.coords.longitude;
 
  varimg_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 دقیق (مانند تلفن های همراه هوشمند) نیاز دارید:

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<!DOCTYPE html>
<html>
<body>
 
<p>Click the button toget your coordinates.</p>
 
<button onclick="getLocation()">TryIt</button>
 
<pid="demo"></p>
 
<script>
varx=document.getElementById("demo");
 
functiongetLocation(){
  if(navigator.geolocation){
    navigator.geolocation.watchPosition(showPosition);
  }else{
    x.innerHTML="Geolocation is not supported by this browser.";
  }
}
    
functionshowPosition(position){
    x.innerHTML="Latitude: "+position.coords.latitude+
    "<br>Longitude: "+position.coords.longitude;
}
</script>
 
</body>
</html>

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

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

منبع: روکسو

ارسال نظر برای این مطلب