مکان کاربر در HTML

به دست آوردن مکان کاربر در HTML

دسته بندی : آموزش HTML سطح مقاله : متوسط زمان مطالعه : 5 دقیقه آخرین بروز رسانی: 01 آذر 1399

در این مقاله چگونگی به دست آوردن مکان کاربر در HTML را بررسی می کنیم.

Geolocation API  به کاربر اجازه می دهد با دادن مجوز ویژه ، داده های موقعیت مکانی خود را با یک برنامه وب به اشتراک بگذارد.

HTML Geolocation API توضیح داده شده است

Geolocation API که در HTML5 معرفی شده است به شما امکان می دهد اطلاعات مربوط به موقعیت جغرافیایی فعلی کاربر را دریافت کنید.به دست آوردن مکان کاربر در HTML می تواند به شما کمک کند داده های مربوطه را برای ارائه انتخاب کنید (به عنوان مثال ، اطلاعات آب و هوا یا ترافیک):

<!DOCTYPE html>
<html>
  <head>
    <script>
      const demo = document.getElementById('demo');
      function error(err) {
          demo.innerHTML = `Failed to locate. Error: ${err.message}`;
      }

      function success(pos) {
          demo.innerHTML = 'Located.';
          alert(`${pos.coords.latitude}, ${pos.coords.longitude}`);
      }

      function getGeolocation() {
          if (navigator.geolocation) {
              demo.innerHTML = 'Locating…';
              navigator.geolocation.getCurrentPosition(success, error);
          } else { 
              demo.innerHTML = 'Geolocation is not supported by this browser.';
          }
      }
   </script>
  </head>
  <body>
    <button onclick="getGeolocation()">
      Get my coordinates!
    </button>
    <div id="demo"></div>
  </body>
</html>

مرورگر به صراحت از کاربر می خواهد که اجازه خود را معمولاً به صورت هشدار بازشو یا جعبه گفتگو بدهد. اگر آن ها می خواهند حریم خصوصی خود را حفظ کنند ، به راحتی می توانند با جمع آوری چنین اطلاعاتی مخالفت کنند.

به دست آوردن مکان کاربر در HTML بسته به برنامه ، مکان کاربر می تواند در مختصات تعریف شود ، روی نقشه یا مسیر ناوبری نمایش داده شود.

موقعیت جغرافیایی چگونه کار می کند

به دست آوردن مکان کاربر در HTML متکی به روش های متعددی است. مرورگرهای رایانه از آدرس IP و دستگاه های تلفن همراه از روش های GPS و مثلث سازی سلول استفاده می کنند. هر دو در صورت امکان از WiFi نیز استفاده می کنند.

برای دریافت اطلاعات مربوط به مکان فعلی کاربر ، باید از روش navigator.geolocation.getCurrentPosition استفاده کنید:

function success(pos) {
  alert(`latitude: ${pos.coords.latitude}
  \n longitude: ${pos.coords.longitude}
  \n accuracy: ${pos.coords.accuracy}`);
}

function getGeolocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(success);
  }
}

getGeolocation();

اگر کاربر موافقت کند داده ها را به اشتراک بگذارد ، شما  position object را دریافت خواهید کرد که شامل timestamp و یک شی به نام coords است. مقادیری را که تعریف می کند مشاهده کنید:

واحدمعنیویژگی
درجهمختصات جغرافیاییLatitude and longitude
متردقت داده های عرض و طول جغرافیاییAccuracy
مترارتفاع نسبت به سطح دریاAltitude
مترصحت داده های ارتفاعAltitudeAccuracy
درجهجهت حرکتHeading
متر بر ثانیهسرعت حرکتspeed

توجه: سه مقدار اول هر بار ، بدون توجه به روش شناسایی مکان ، بازگردانده می شوند. چهار مورد دیگر فقط در صورت موجود بودن قابل برگشت است.

به دست آوردن مکان کاربر در HTML برای ادامه دریافت داده های موقعیت جغرافیایی HTML در فواصل منظم ، از روش  watchPosition استفاده کنید. موقعیت تغییر یافته کاربر را در صورت تغییر یا استفاده از تکنیک مکان دقیق تری برمی گرداند:

function success(pos) {
  alert(`latitude: ${pos.coords.latitude}
  \n longitude: ${pos.coords.longitude}
  \n accuracy: ${pos.coords.accuracy}`);
}

function watchPosition() {
  if (navigator.geolocation) {
    navigator.geolocation.watchPosition(success);
  }
}

watchPosition();

توجه: روش  watchPosition یک شناسه منحصر به فرد ارائه می دهد که می تواند برای شناسایی ناظر موقعیت استفاده شود.

در قسمت به دست آوردن مکان کاربر در HTML برای متوقف کردن روش  watchPosition ، ازclearWatch استفاده کنید:

<script>
var watchId = -1;

function error(err) {
        console.warn(err.message);
}

function success(pos) {
  alert(`latitude: ${pos.coords.latitude}
  \n longitude: ${pos.coords.longitude}
  \n accuracy: ${pos.coords.accuracy}`);
}

function watchPosition() {
  if (navigator.geolocation) {
       watchId = navigator.geolocation.watchPosition(success);
  }
}
      
function stopWatching() {
  if (navigator.geolocation) {
        navigator.geolocation.clearWatch(watchId);
  }
}
</script>
<body>
  <button onclick="watchPosition()">
    Watch My Position!
  </button>
  <button onclick="stopWatching()">
    Stop Watching
  </button>
</body>

استفاده از Google Geolocation API

شما می توانید مختصات بازگشت داده شده توسط روش های Geolocation HTML5 HTML را بر روی نقشه نشان دهید. برای انجام این کار ، شما به یک سرویس نقشه (به عنوان مثال ، Google Maps) نیاز دارید. مثال زیر از Google Geolocation API برای نمایش مکان کاربر فعلی استفاده می کند.

اول ، شما باید یک عنصر HTML را به عنوان بوم نقشه تعریف کنید و Google Geolocation API را فراخوانی کنید. سپس ، برای بدست آوردن مکان کاربر ، از روشهای موقعیت جغرافیایی HTML5 استفاده کنید. سپس به عملکردی ارسال می شود که از Google Geolocation API استفاده می کند و روی نقشه نشان داده می شود:

<body>
<div id="canvas" style="width: 100%; height: 400px;"></div>
<script>
 function getGeolocation() {
   navigator.geolocation.getCurrentPosition(drawMap);
 }
 function drawMap(geoPos) {
   geolocate = new google.maps.LatLng(geoPos.coords.latitude, geoPos.coords.longitude);
   let mapProp = {
     center: geolocate,
     zoom:5,
   };
   let map=new google.maps.Map(document.getElementById('canvas'),mapProp);
   let infowindow = new google.maps.InfoWindow({
     map: map,
     position: geolocate,
     content:
       `Location from HTML5 Geolocation:
          <br>Latitude: ${geoPos.coords.latitude}
          <br>Longitude: ${geoPos.coords.longitude}`
      });
 }
 getGeolocation();
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

اگر این موضوع کمی پیچیده به نظر می رسد ، می توان مثال فوق را با جزئیات بیشتری تجزیه و تحلیل کرد:

1- <div id=”canvas” style=”width:100%;height:400px;”></div> یک عنصر HTML را تنظیم می کند تا به عنوان بوم نقشه استفاده شود.

2- <script src=”https://maps.googleapis.com/maps/api/js”></script> ، Google Geolocation API را فراخوانی می کند.

3- getGeolocation () اولین عملکردی است که اجرا می شود.

4- navigator.geolocation.getCurrentPosition(drawMap); ، مکان کاربر را دریافت می کند و آن را به تابع () drawMap می فرستد.

5- drawMap (geoPos) از Google Maps API برای نشان دادن موقعیت مکانی کاربر روی نقشه استفاده می کند.

6- geolocate = new google.maps.LatLng(geoPos.coords.latitude, geoPos.coords.longitude); ، بر اساس مختصات مکان جغرافیایی HTML ، یک شی Maps Google Maps LatLng ایجاد می کند.

7- var map=new google.maps.Map(document.getElementById(“canvas”),mapProp); ، یک نقشه Google در داخل عنصر HTML داده شده ایجاد می کند.

8- var infowindow = new google.maps.InfoWindow({…}) ،یک پنجره Google Maps ایجاد می کند که طول و عرض جغرافیایی کاربر را نشان می دهد.

مدیریت خطا در به دست آوردن مکان کاربر در HTML

در به دست آوردن مکان کاربر در HTML اگر برخی از روش ها در دریافت موقعیت کاربر ناموفق باشند ، کدهای خطا را برمی گردانند:

معنیکد خطا
کاربر درخواست را رد کرد.error.PERMISSION_DENIED
اطلاعات مکان جغرافیایی HTML5 در دسترس نیستerror.POSITION_UNAVAILABLE
زمان درخواست اطلاعات مکان به پایان رسیده است.error.TIMEOUT
خطای رخ داده را نمی توان تعیین کرد.error.UNKNOWN_ERROR

در بیشتر موارد ، با استفاده از یک عملکرد واکنش خطا به راحتی می توان خطاها را کنترل کرد:

function error(err) {
  console.error(`ERROR(${error.code}): ${err.message}`);
}

function success(pos) {
  alert(`latitude: ${pos.coords.latitude}
  \n longitude: ${pos.coords.longitude}
  \n accuracy: ${pos.coords.accuracy}`);
}

function getGeolocation() {
  navigator.geolocation.getCurrentPosition(success, error);
}

نکات مهم موقعیت جغرافیایی HTML5 در به دست آوردن مکان کاربر در HTML

  • به خاطر داشته باشید در به دست آوردن مکان کاربر در HTML دقت پایین همیشه چیز بدی نیست – همه چیز به هدف بستگی دارد. این ممکن است ناوبری مسیر را خراب کند ، اما هنوز هم برای جستجوی مشاغل محلی یا یافتن اطلاعات آب و هوا عالی است.
  • در حالی که HTML5 Geolocation API در مرورگرهای قدیمی پشتیبانی نمی شود ، شما می توانید با استفاده از کتابخانه های پوششی آن را تغییر دهید.

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

در همه مرورگرها مانند کروم، اکسپلور، فایرفکس، سافاری ،اپرا پشتیبانی می شود.

در دوره آموزش HTML و CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.

این مقاله چقدر براتون مفید بود؟

میانگین رتبه : 1/5 - تعداد رای : 1