موقعیت جغرافیایی HTML5

معرفی 

 
HTML Geolocation API برای تعیین موقعیت یک کاربر استفاده می شود. تکنیک های زیادی برای تعیین مکان کاربر استفاده می شود. در یک مرورگر وب، آدرس WIFI یا IP برای شناسایی مکان و در مرورگرهای مبتنی بر موبایل از تکنیک های WIFI، GPS یا مثلث سازی برای شناسایی مکان استفاده می شود. Geolocation API از هر یک از این تکنیک ها استفاده می کند. Geolocation API با پذیرش اجازه کاربر قبل از ارسال اطلاعات موقعیت مکانی به هر وب سایت، از حریم خصوصی کاربر محافظت می کند.
در این مقاله یاد می گیریم که چگونه مکان کاربر را شناسایی کرده و آن را روی نقشه گوگل نشان دهیم.
 

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

 
جدول زیر اولین نسخه مرورگر را نشان می دهد که از موقعیت جغرافیایی پشتیبانی می کند.
 
مرورگر
 
ابتدا یک صفحه وب ایجاد می کنیم و کد زیر را در آن صفحه قرار می دهیم. 
 
کد اچ تی ام ال
  1. <body>    
  2.     <dividdivid="div1"> <span>************HTML5 Geolocation*************</span> </div>    
  3.         <div>    
  4.             <inputtypeinputtype="button" id="btn" value="Show My Location" onclick="loadScript()" /> </div>    
  5.         <dividdivid="map">    
  6.             </div>    
  7. </body>    
اسکریپت
  1. <script>    
  2.     $(document).ready(function()    
  3.     {    
  4.         $("#btn").click(function()    
  5.         {    
  6.             if (navigator.geolocation)    
  7.             {    
  8.                 varGeo_Options = {    
  9.                     enableHighAccuracy: false,    
  10.                     timeout: Infinity,    
  11.                     maximumAge: 0    
  12.                 }    
  13.                 navigator.geolocation.getCurrentPosition(Success, Show_Error, Geo_Options)    
  14.             }    
  15.             else    
  16.             {    
  17.                 alert("OOPS! Your Browser Doesn't Support GeoLocation \n" + "Please Update Your Browser")    
  18.             }    
  19.     
  20.             function Success(position)    
  21.             {    
  22.                 alert(" Show My Location \n" + "Latitude is " + position.coords.latitude + "\n Longitude is " + position.coords.longitude + "\n Accuracy is " + position.coords.accuracy + "\n Altitude is " + position.coords.altitude + "\n Altitude Accuracy is " + position.coords.altitudeAccuracy);    
  23.                 varmapProp = {    
  24.                     center: newgoogle.maps.LatLng(position.coords.latitude, position.coords.longitude),    
  25.                     zoom: 13,    
  26.                     mapTypeId: google.maps.MapTypeId.ROADMAP    
  27.                 }    
  28.                 var marker = newgoogle.maps.Marker(    
  29.                 {    
  30.                     position: newgoogle.maps.LatLng(position.coords.latitude, position.coords.longitude),    
  31.                     title: 'Hello ! I am Here!'    
  32.                 });    
  33.                 var map = newgoogle.maps.Map(document.getElementById("map"), mapProp);    
  34.                 marker.setMap(map);    
  35.             }    
  36.             functionShow_Error(error)    
  37.             {    
  38.                 switch (error.code)    
  39.                 {    
  40.                     caseerror.PERMISSION_DENIED: alert("User denied the request");    
  41.                     break;    
  42.                     caseerror.POSITION_UNAVAILABLE: alert("Location information Not available.");    
  43.                     break;    
  44.                     caseerror.TIMEOUT: alert("Request time out");    
  45.                     break;    
  46.                     caseerror.UNKNOWN_ERROR: alert("Unknown error ");    
  47.                     break;    
  48.                 }    
  49.             };    
  50.         })    
  51.     });    
  52. </script>  
حالا اسکریپت را به چند قسمت تقسیم می کنیم و هر قسمت را جداگانه می خوانیم.
 
بررسی سازگاری مرورگر
  1. if (navigator.geolocation)    
  2. {    
  3.     // Geolocation Code    
  4. }    
  5. else    
  6. {    
  7.     alert("OOPS! Your Browser Doesn't Support GeoLocation \n" + "Please Update Your Browser")    
  8. }    
ویژگی موقعیت جغرافیایی شی ناوبر برای بررسی سازگاری مرورگرها برای API مکان جغرافیایی استفاده می شود.
 

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

  1. navigator.geolocation.getCurrentPosition(Success, Show_Error, Geo_Options)   
 
تصویر مکان
 
متد getCurrentPosition شی navigator.geolocation مکان فعلی کاربر را دریافت می کند. این روش سه پارامتر (روش پاسخ به تماس موفقیت آمیز، روش پاسخ به تماس خطا و گزینه موقعیت) را می گیرد. شرح هر پارامتر در زیر توضیح داده شده است. 
 

روش بازگشت به تماس موفقیت آمیز

در کد بالا زمانی که کاربر درخواست اشتراک‌گذاری را بپذیرد، «موفقیت» نامیده می‌شود. متد callback شامل یک شی موقعیت است. این شی موقعیت حاوی اطلاعاتی در مورد مکان کاربر است. این پارامتر موقعیت حاوی اطلاعات زیر است:
  1. مهر زمان: نشان دهنده زمانی است که در آن مکان گرفته شده است.
  2. شی Coords: حاوی اطلاعاتی درباره مکان است. شی cords حاوی اطلاعات زیر در مورد محل شی است.
ویژگی شرح
طول جغرافیایی عرض جغرافیایی مختصات جغرافیایی در درجه اعشار
دقت سطح دقت مختصات
سرعت سرعت نسبی را بر حسب متر بر ثانیه نشان می دهد
سرفصل اطلاعات عنوان 360 درجه را ارائه می دهد
ارتفاع ارتفاع موقعیت از سطح دریا بر حسب متر
دقت ارتفاع دقت مقدار نگرش واقعی به دست آمده در متر. بزرگ عدد کوچکتر دقت است
 
هنگام فراخوانی روش موفقیت، اطلاعات مربوط به مکان کاربر را نشان می دهد،
  1. function Success(position) {    
  2.     
  3.    alert(" Show My Location \n" +    
  4.    "Latitude is " + position.coords.latitude +    
  5.    "\n Longitude is " + position.coords.longitude +    
  6.    "\n Accuracy is " + position.coords.accuracy +    
  7.    "\n Altitude is " + position.coords.altitude +    
  8.    "\n Altitude Accuracy is " + position.coords.altitudeAccuracy);    
  9. }    
خروجی
 
پیام
  

روش برگشت به تماس خطا

  1. functionShow_Error(error)    
  2. {    
  3.     switch (error.code)    
  4.     {    
  5.         caseerror.PERMISSION_DENIED: alert("User denied the request");    
  6.         break;    
  7.         caseerror.POSITION_UNAVAILABLE: alert("Location information Not available.");    
  8.         break;    
  9.         caseerror.TIMEOUT: alert("Request time out");    
  10.         break;    
  11.         caseerror.UNKNOWN_ERROR: alert("Unknown error ");    
  12.         break;    
  13.     }    
  14. };    
روش برگشت خطا زمانی فراخوانی می شود که خطای موقعیت رخ دهد. این خطا ممکن است به هر دلیلی رخ داده باشد ( درخواست رد شده توسط کاربر، زمان درخواست، در دسترس نبودن موقعیت یا به هر دلیل دیگری).
 

گزینه موقعیت 

 
پارامتر گزینه موقعیت برخی از گزینه ها را در طول بازیابی اطلاعات مکان ارائه می دهد. این پارامتر شامل گزینه های زیر است.
  1. varGeo_Options = {    
  2.     enableHighAccuracy: false,    
  3.     timeout: Infinity,    
  4.     maximumAge: 0    
  5. }    
گزینه شرح
فعال کردن دقت بالا اگر مقدار درست باشد، مرورگر موقعیت دقیق تری را ارائه می دهد. اما این روند را کند می کند. مقدار پیش فرض غلط است
تایم اوت حداکثر زمان بر حسب میلی ثانیه که یک عامل کاربر می تواند برای بازیابی مکان کاربر صرف کند.
حداکثر سن نشان‌دهنده مدت زمانی (میلی‌ثانیه) است که عامل کاربر می‌تواند با استفاده از داده‌های مکان ذخیره‌شده قبل از تلاش برای دستیابی به داده‌های مکان جدید طول بکشد. صفر به این معنی است که عامل کاربر از مکان ذخیره شده استفاده نمی کند و بی نهایت به این معنی است که عامل کاربر از مکان ذخیره شده برای مدت طولانی استفاده می کند.
 
نشان دادن موقعیت مکانی کاربر در Google Maps.
  1. varmapProp = {    
  2.     center: newgoogle.maps.LatLng(position.coords.latitude, position.coords.longitude),    
  3.     zoom: 13,    
  4.     mapTypeId: google.maps.MapTypeId.ROADMAP    
  5. }    
  6. var marker = newgoogle.maps.Marker(    
  7. {    
  8.     position: newgoogle.maps.LatLng(position.coords.latitude, position.coords.longitude),    
  9.     title: 'Hello ! I am Here!'    
  10. });    
  11. var map = newgoogle.maps.Map(document.getElementById("map"), mapProp);    
  12. marker.setMap(map);     
با استفاده از کد بالا، یک شیء نقشه گوگل ایجاد می کنیم و مرکز نقشه های گوگل را با استفاده از طول و عرض جغرافیایی بازیابی شده از API موقعیت جغرافیایی تعریف می کنیم. ما همچنین یک نشانگر ایجاد می کنیم و خاصیت نشانگر را حفظ می کنیم و در نهایت این نشانگر را به شی نقشه اختصاص می دهیم.
 
بنابراین وقتی این برنامه را در یک مرورگر وب اجرا می کنیم، مکان فعلی مکان فعلی را در نقشه گوگل دریافت می کنیم.
 
محل
 
کد کامل
  1. <htmlxmlns="http://www.w3.org/1999/xhtml">    
  2.     <headrunat="server">    
  3.         <title></title>    
  4.         <scriptsrc="jquery-ui-1.11.4.custom/jquery-ui-1.11.4.custom/external/jquery/jquery.js">    
  5.             </script>    
  6.             <!--Goolge API-->    
  7.             <scriptsrc="http://maps.googleapis.com/maps/api/js">    
  8.                 </script>    
  9.                 </head>    
  10.                 <script>    
  11.                     $(document).ready(function()    
  12.                     {    
  13.                         $("#btn").click(function()    
  14.                         {    
  15.                             if (navigator.geolocation)    
  16.                             {    
  17.                                 varGeo_Options = {    
  18.                                     enableHighAccuracy: false,    
  19.                                     timeout: Infinity,    
  20.                                     maximumAge: 0    
  21.                                 }    
  22.                                 navigator.geolocation.getCurrentPosition(Success, Show_Error, Geo_Options)    
  23.                             }    
  24.                             else    
  25.                             {    
  26.                                 alert("OOPS! Your Browser Doesn't Support GeoLocation \n" + "Please Update Your Browser")    
  27.                             }    
  28.     
  29.                             function Success(position)    
  30.                             {    
  31.                                 alert(" Show My Location \n" + "Latitude is " + position.coords.latitude + "\n Longitude is " + position.coords.longitude + "\n Accuracy is " + position.coords.accuracy + "\n Altitude is " + position.coords.altitude + "\n Altitude Accuracy is " + position.coords.altitudeAccuracy);    
  32.                                 varmapProp = {    
  33.                                     center: newgoogle.maps.LatLng(position.coords.latitude, position.coords.longitude),    
  34.                                     zoom: 13,    
  35.                                     mapTypeId: google.maps.MapTypeId.ROADMAP    
  36.                                 }    
  37.                                 var marker = newgoogle.maps.Marker(    
  38.                                 {    
  39.                                     position: newgoogle.maps.LatLng(position.coords.latitude, position.coords.longitude),    
  40.                                     title: 'Hello ! I am Here!'    
  41.                                 });    
  42.                                 var map = newgoogle.maps.Map(document.getElementById("map"), mapProp);    
  43.                                 marker.setMap(map);    
  44.                             }    
  45.                             functionShow_Error(error)    
  46.                             {    
  47.                                 switch (error.code)    
  48.                                 {    
  49.                                     caseerror.PERMISSION_DENIED: alert("User denied the request");    
  50.                                     break;    
  51.                                     caseerror.POSITION_UNAVAILABLE: alert("Location information Not available.");    
  52.                                     break;    
  53.                                     caseerror.TIMEOUT: alert("Request time out");    
  54.                                     break;    
  55.                                     caseerror.UNKNOWN_ERROR: alert("Unknown error ");    
  56.                                     break;    
  57.                                 }    
  58.                             };    
  59.                         })    
  60.                     });    
  61.                 </script>    
  62.                 <style>    
  63.                     #div1 {    
  64.                         background-color: coral;    
  65.                         color: ButtonHighlight;    
  66.                         font-size: 30px;    
  67.                         height: 80px;    
  68.                         width: 1000px;    
  69.                         text-align: center;    
  70.                         margin-left: 150px    
  71.                     }    
  72.                       
  73.                     #map {    
  74.                         height: 700px;    
  75.                         width: 1000px;    
  76.                         text-align: center;    
  77.                         margin-left: 150px;    
  78.                         margin-top: 10px    
  79.                     }    
  80.                       
  81.                     #btn {    
  82.                         color: chocolate;    
  83.                         background-color: aquamarine;    
  84.                         font-size: 26px;    
  85.                         margin-left: 550px;    
  86.                         margin-top: 10px    
  87.                     }    
  88.                 </style>    
  89.     
  90.                 <body>    
  91.                     <divid="div1"> <span>************HTML5 Geolocation*************</span> </div>    
  92.                         <div>    
  93.                             <inputtype="button" id="btn" value="Show My Location" onclick="loadScript()" />     
  94.                         </div>    
  95.                         <divid="map">    
  96.                      </div>    
  97.                 </body>    
  98.     
  99.              </html>    

خلاصه

 
در این مقاله با HTML5 Geolocation آشنا شدیم. 
 
با تشکر از خواندن مقاله