بهترین سایت برای توسعه دهندگان وب

دروس HTML5

شروع HTML مقدمه HTML ویرایشگران HTML مثالهای اساسی HTML المان های HTML ویژگی های HTML عناوین HTML بندهای HTML سبک های HTML قالب بندی HTML نقل قول های HTML نظرات HTML رنگهای HTML HTML و CSS پیوندهای HTML تصاویر HTML جداول HTML لیست های HTML بلوک های HTML کلاس های HTML شناسه های HTML فریم های HTML HTML و JavaScript مسیرهای پرونده HTML HTML قسمت هدینگ چیدمان های HTML HTML پاسخگو کد رایانه HTML موجودیت HTML نمادهای HTML رمزگذاری HTML رمزگذاری URL HTML HTML و XHTML

HTML فرم ها

فرم های HTML المان های فرم HTML انواع ورودی HTML صفات ورودی HTML

HTML5

مقدمه HTML5 پشتیبانی HTML5 المان های جدید HTML5 المان های معنایی HTML5 مهاجرت از HTML4 راهنمای سبک HTML5

HTML گرافیک

HTML Canvas HTML SVG

HTML رسانه

چندرسانه ای HTML ویدیوی HTML صوت HTML افزونه های HTML یوتیوب HTML

HTML API

مکان جغرافیایی HTML کشیدن / رها کردن HTML HTML ذخیره وب HTML کارهای وب HTML و SSE

HTML مثال

مثالهای HTML آزمون ها HTML تمرینات HTML گواهی HTML خلاصه HTML قابلیت دسترسی به HTML

HTML منابع

لیست برچسب های HTML صفات HTML صفات جهانی HTML رویدادهای HTML رنگهای HTML کانواس HTML صوتی / تصویری HTML نسخه معتبر HTML مجموعه نویسه های HTML رمزگذاری URL HTML رمزگذاری زبان HTML پیام های HTTP روشهای HTTP مبدل PX به EM میانبرهای صفحه کلید

HTML5 درسهایی برای مبتدیان

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


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


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

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

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

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


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

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

API Chrome Edge Firefox Safari Opera
موقعیت مکانی 5.0 - 49.0 (http)
50.0 (https)
9.0 3.5 5.0 16.0

توجه : از 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 = "موقعیت جغرافیایی توسط این مرورگر پشتیبانی نمی شود.";
  }
}

function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude +
  "<br>Longitude: " + position.coords.longitude;
}
</script>
خودتان آزمایش کنید »

توضیح مثال بالا:

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

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


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

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

مثال

function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "کاربر درخواست موقعیت جغرافیایی را رد کرده است."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "اطلاعات مکان در دسترس نیست"
      break;
    case error.TIMEOUT:
      x.innerHTML = "درخواست دریافت مهلت زمانی کاربر."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "خطا ناشناخته اتفاق افتاده است "
      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";

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

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

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

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

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

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

متد ()getCurrentPositionیک شی object را به موفقیت برمی گرداند. ویژگی های عرض ، طول و دقت همیشه برمی گردند. سایر خصوصیات در صورت موجود بودن بازگردانده می شوند:

ویژگی برگشت
coords.latitude عرض جغرافیایی به عنوان یک عدد اعشاری (همیشه برگشتی)
coords.longitude طول به عنوان عدد اعشاری (همیشه برگشتی)
coords.accuracy دقت موقعیت (همیشه برگردانده شده)
coords.altitude ارتفاع بر حسب متر از سطح متوسط دریا (در صورت وجود برگردانده می شود)
coords.altitudeAccuracy دقت ارتفاع موقعیت (در صورت موجود بودن برگشت داده می شود)
coords.heading عنوان به عنوان درجه از عقب ساعت از شمال (در صورت وجود برگردانده می شود)
coords.speed سرعت بر حسب متر بر ثانیه (در صورت وجود برگشت داده می شود)
timestamp تاریخ / زمان پاسخ (در صورت وجود برگشت داده شده)

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

روش های متفاوت جالبتری هم برای پیدا کردن موقعیت مکانی شی وجود دارد

  • () watchPosition - موقعیت فعلی کاربر را برمی گرداند و همچنان که کاربر حرکت می کند به بازگرداندن موقعیت به روز شده ادامه می دهد (مانند GPS در ماشین).
  • clearWatch() متد watchPosition() را متوقف می کند.

مثال زیر روش () watchPosition را نشان می دهد. برای آزمایش این مورد به یک دستگاه GPS دقیق نیاز دارید (مانند تلفن هوشمند):

مثال

<script>
var x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.watchPosition(showPosition);
  } else {
    x.innerHTML = "موقعیت جغرافیایی توسط این مرورگر پشتیبانی نمی شود.";
  }
}
function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude +
  "<br>Longitude: " + position.coords.longitude;
}
</script>
خودتان آزمایش کنید »





این سایت برای آموزش ، آزمایش و یادگیری بهینه شده است. نمونه ها را می توان برای بهبود ساده کرد خواندن و درک اساسی. آموزشها ، پیوندها و مثالها مرتباً تجدید نظر می شوند تا از آنها جلوگیری شود خطاها ، اما ما نمی توانیم صحت و عملکرد کامل همه مطالب را تضمین کنیم. با استفاده از این سایت ، شما موافقت می کنید که مطالعه کرده اید و پذیرفته ایدمقررات استفاده , کوکی و سیاست های حفظ حریم خصوصی. کپی رایت 1999-2020 حق چاپ و .. محفوظ توسط احمد فرجی
سایت توسط چارچوب farsiw3.ir طراحی شده است.

Farsiw3.ir