٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

آموزش موقعیت جغرافیایی HTML

HTML Geolocation API برای تعیین موقعیت کاربر استفاده می شود. موقعیت کاربر را پیدا کنید برای به دست آوردن موقعیت جغرافیایی کاربر از HTML Geolocation API استفاده می شود. از آنجا که این می تواند حریم خصوصی را به خطر…

محمد یوسفی

3 جولای 2021

HTML Geolocation API برای تعیین موقعیت کاربر استفاده می شود.

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

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

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

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


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

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

توجه: از Chrome 50 ، API جغرافیایی فقط در زمینه های ایمن مانند HTTPS کار می کند. اگر سایت شما از یک منبع غیر ایمن (مانند HTTP) میزبانی شود ، درخواست های دریافت مکان کاربران دیگر کار نمی کند.


با استفاده از موقعیت جغرافیایی HTML

این getCurrentPosition()روش برای بازگرداندن موقعیت کاربر استفاده می شود.

مثال زیر عرض و طول موقعیت کاربر را برمی گرداند:

مثال

<script>
var x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

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

مثال توضیح داده شده:

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

مثال بالا یک اسکریپت Geolocation بسیار اساسی است ، بدون اینکه خطایی در آن انجام شود.



مدیریت خطاها و رد ها

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

مثال

function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML = "The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "An unknown error occurred."
      break;
  }
}

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

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

در مثال زیر ، از عرض و عرض جغرافیایی برگشتی برای نشان دادن مکان در نقشه گوگل استفاده می شود (با استفاده از یک تصویر ثابت):

مثال

function showPosition(position) {
  var latlon = position.coords.latitude + "," + position.coords.longitude;

  var img_url = "https://maps.googleapis.com/maps/api/staticmap?center=
  "+latlon+"&zoom=14&size=400x300&sensor=false&key=YOUR_KEY";

اطلاعات خاص مکان

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

موقعیت جغرافیایی برای اطلاعات خاص موقعیت مکانی نیز بسیار مفید است ، مانند:

  • اطلاعات محلی به روز
  • نمایش نقاط مورد علاقه در نزدیکی کاربر
  • ناوبری نوبت به نوبت (GPS)

روش () getCurrentPosition – بازگشت داده ها

این <code class=”w3-codespan”>getCurrentPosition()روش یک شی object را به موفقیت برمی گرداند. ویژگی های عرض ، طول و دقت همیشه برمی گردند. سایر خصوصیات در صورت موجود بودن بازگردانده می شوند:



مکان جغرافیایی – روش های جالب دیگر

شی Ge موقعیت جغرافیایی روشهای جالب دیگری نیز دارد:

  • <code class=”w3-codespan”>watchPosition() – موقعیت فعلی کاربر را برمی گرداند و همچنان که کاربر حرکت می کند (مانند GPS در اتومبیل) همچنان موقعیت به روز شده را بازمی گرداند.
  • <code class=”w3-codespan”>clearWatch()- <code class=”w3-codespan”>watchPosition()روش را متوقف می کند .

مثال زیر <code class=”w3-codespan”>watchPosition()روش را نشان می دهد . برای آزمایش این مورد به یک دستگاه GPS دقیق نیاز دارید (مانند تلفن هوشمند):

<div class="w3-example">

مثال

<script>
var x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.watchPosition(showPosition);
  } else {
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}
function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude +
  "<br>Longitude: " + position.coords.longitude;
}
</script>

 

  document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها