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

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

به دست آوردن مکان کاربر در HTML این API به شما امکان می‌دهد با رضایت کاربر، به اطلاعات موقعیت مکانی وی، شامل طول و عرض جغرافیایی و همچنین دقت آن، دسترسی پیدا کنید. می‌توانید از رابط برنامه‌نویسی 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 بسته به برنامه ، مکان کاربر می‌تواند در مختصات تعریف شود ، روی نقشه یا مسیر ناوبری نمایش داده شود. برای خواندن مقالات در زمینه CSS و کسب اطلاعات در این زمینه به شما پیشنهاد می‌کنیم مقالات این دسته از سایت دویکس را مطالعه کنید.

در اینجا مراحلی که باید برای به دست آوردن مکان کاربر با استفاده از Geolocation API در HTML انجام دهید، آورده شده است:

1. بررسی پشتیبانی از مرورگر:

ابتدا باید بررسی کنید که آیا مرورگر کاربر از Geolocation API پشتیبانی می‌کند یا خیر. به این صورت می‌توانید از کد زیر استفاده کنید:

JavaScript

if (navigator.geolocation) {
  // مرورگر از Geolocation API پشتیبانی می‌کند
} else {
  // مرورگر از Geolocation API پشتیبانی نمی‌کند
}

2. درخواست دسترسی به مکان:

اگر مرورگر از Geolocation API پشتیبانی می‌کند، می‌توانید از navigator.geolocation.getCurrentPosition() برای درخواست دسترسی به مکان کاربر استفاده کنید. این روش یک تابع callback به عنوان آرگومان می‌گیرد که در صورت موفقیت یا عدم موفقیت اجرا می‌شود.

JavaScript

navigator.geolocation.getCurrentPosition(success, error);

function success(position) {
  // موقعیت کاربر در اشیاء `position` موجود است
  var latitude = position.coords.latitude;
  var longitude = position.coords.longitude;
  var accuracy = position.coords.accuracy;

  // می‌توانید از این اطلاعات برای نمایش مکان کاربر یا انجام سایر اقدامات استفاده کنید
}

function error(err) {
  // در صورت بروز خطا، می‌توانید کد خطا را در `err.code` بررسی کنید
  console.error('Error obtaining location:', err.code);
}

3. نمایش مکان کاربر:

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

نمایش طول و عرض جغرافیایی: می‌توانید طول و عرض جغرافیایی را به صورت ساده در یک عنصر HTML نمایش دهید.
استفاده از نقشه: می‌توانید از یک سرویس نقشه‌سازی مانند Google Maps برای نمایش مکان کاربر روی یک نقشه استفاده کنید.
ارائه خدمات مبتنی بر مکان: می‌توانید از اطلاعات موقعیت مکانی کاربر برای ارائه خدمات مرتبط با مکان، مانند رستوران‌ها، فروشگاه‌ها یا رویدادهای نزدیک ارائه دهید.

نکات مهم:

Geolocation API فقط با رضایت کاربر کار می‌کند. قبل از درخواست دسترسی به مکان، باید از کاربر اجازه بگیرید.
اطلاعات موقعیت مکانی کاربر می‌تواند اطلاعات حساسی باشد. باید از این اطلاعات به طور مسئولانه و با رعایت حریم خصوصی کاربران استفاده کنید.
Geolocation API ممکن است در همه شرایط دقیق نباشد. دقت اطلاعات موقعیت مکانی به عوامل مختلفی مانند نوع دستگاه، موقعیت کاربر و شرایط سیگنال GPS بستگی دارد.

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

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

به دست آوردن مکان کاربر در 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 در مرورگرهای قدیمی پشتیبانی نمی‌شود ، شما می‌توانید با استفاده از کتابخانه های پوششی آن را تغییر دهید.

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

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