آشنایی با جئولوکیشن در HTML

موقعیت جغرافیایی در HTML

آشنایی با موقعیت جغرافیایی در HTML
آشنایی با موقعیت جغرافیایی در HTML

آموزش ایجاد موقعیت جغرافیایی در صفحات HTML ، آموزش جئولوکیشن در HTML ، چگونه موقعیت جغرافیایی یا سوال بهتر چگونه مختصات جغرافیایی کاربرانمان را به دست بیاریم؟ چرا اصلا کاربر باید موقعیت جغرافیایی اش را به صفحه ما اطلاع دهد؟ با استفاده از جئولوکیشن به چه چیز هایی دسترسی داریم؟

جئولوکیشن در html5

در این مقاله می‌خواهیم در رابطه با API جئولوکیشن که در مقاله آموزش متن محور HTML5 با آن آشنا شدیم، صحبت کنیم.

از API مختصات جغرافیایی برای مکان یابی محل کاربر استفاده می شود و در فروشگاه های آنلاین و سرویس های تاکسی اینترنتی می‌تواند استفاده شود. (راستی تاکسی ها هم رنگ قشنگی دارند xD )

مکان یابی محل کاربر

از این API برای دریافت مختصات جغرافیایی کاربران استفاده می شود. از آنجایی که این API می تواند باعث نقض قوانین حریم خصوصی شود، فقط زمانی مختصات کاربر در دسترس خواهد بود که کاربر اجازه آن را صادر کند.

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

استفاده از جئولوکیشن در HTML

توجه داشته باشید که : این API با تگ Map که در گذشته در مقاله آموزش کار با تگ Map با آن آشنا شدیم کاملا فرق می‌کند.

تابع getCurrentPosition برای بازگرداندن مختصات کاربر استفاده می شود. مثال زیر مختصات latitude و longitude کاربر را نمایش می دهد.

<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() مقدار طول جغرافیایی و عرض جغرافیایی خروجی را نمایش می دهد.

مثال بالا یک اسکریپت ساده بدون مدیریت خطا بود.

از API جئولوکیشن می‌توانید در بخش Auto Complete فرم ها نیز استفاده کنید. در آموزش کار با فرم ها در HTML و آموزش کار با تگ input در HTML می‌توانید با فرم ها آشنا شویم.

مدیریت خطا ها و عدم پذیرش

پارامتر دوم تابع 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;
  }
}

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

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

در مثال پایین، مقدار مختصات بازگشتی در مکان یابی در سرویس نقشه گوگل استفاده می شود.(با استفاده از تصویر ثابت)

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+"'>";
}

با استفاده از کد بالا می‌توانید یک تصویر ثابت از گوگل برای وب سایتتان دریافت کنید. البته باید نظر داشته باشید که این کد زمانی کار می‌کند که شما API Key یا کلید API مخصوص را از گوگل دریافت کرده باشید.

اطلاعات مکان

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

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

تابع getCurrentPosition بازگشت داده

تابع getCurrentPosition یک آبجکت را در هنگام موفق بودن عملیات بر می گرداند. مختصات latitude، longitude و دقت مقدار هایی هستند که همیشه در جئولوکیشن بازگشت داده می شوند. خواص دیگر آبجکت بازگشتی به شرح زیر هستند:

خاصیت  مقادیر
latitude مقدار دسیمال( همیشه وجود دارد)
longitude مقدار دسیمال(همیشه وجود دارد)
accuracy دقت مختصات(همیشه وجود دارد)
altitude ارتفاع از سطح دریا برحسب متر(اگر در دسترس باشد)
altitudeAccuracy دقت ارتقا (اگر در دسترس باشد)
heading سمت برحسب درجه در جهت عقربه ساعت از شمال(اگر در دسترس باشد)
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 = "Geolocation is not supported by this browser.";
  }
}
function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude; 
}
</script>

پایان ترم

[box type=”info” class=”question-from-users” width=””]

کدی بنویسید که Latitude محل زندگی خودتان را چاپ کند. (لطفا به جهت حفظ حریم خصوصی خودتان از ارسال عدد دریافت شده خودداری کنید و تنها کد را ارسال کنید.)

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

[/box]

نتیجه گیری

در این مقاله با GeoLocation یا مختصات جغرافیایی آشنا شدیم. امیدوارم با آن آشنا شده باشید.

اگر سوال ، پیشنهاد یا انتقادی داشتید حتما آن را با من در میان بگذارید و من در اولین فرصت به آن‌ها پاسخ خواهم داد.

فیلم آموزشی asp.net core 2

علی اسماعیلی
درباره خودم گفتن یا نوشتن کار آسونی نیست. باید تو کم‌ترین حجم مهم‌ترین اطلاعات رو بنویسی. وقتی که اولین بار دستم به کیبورد خورد، ۶ سالم بود. حس جالبی بود؛ زندگیم شده بود ۴ تا کلید WASD روی کیبورد کامپیوتر برای کنترل ماشین. از ۱۰ سالگی که مادرم با فوتوشاپ کار می‌کرد کنارش نشستم و یاد گرفتم. ۱۳ سالم بود که اولین وب‌سایتم رو با پی اچ پی نیوک ایجاد کردم. تا الان وب سایت‌های زیادی رو شروع کردم و شاید به خاطر اینکه هدف تجربه کردن رو داشتم شکست خوردند. موفق‌ترین پروژه شکست خوردم رو می‌تونم اوکسو معرفی کنم که شاید اسمش رو شنیده باشید. الانم دارم کار‌هایی رو شروع می‌کنم چون با خودم عهد کرده بودم که تا بیست سالگی جاهای مختلفی کار کنم و تجربه کنم و بعد از تجربیاتم استفاده کنم. بعد از رسیدن به بیست سالگی خوشحالم که یکی از تجربیات خوبم همکاری با میزفاست و دارم ادامش میدم…
سرفصل های آموزش HTML
پایین سرفصل های HTML هست، روی منم کلیک کنی میتونی ببینی.
فصل ۸ – کار با جدول در HTML

روی فصل بالا کلیک کنید.

ازمون HTML شرکت کن

روی لینک بالا کلیک کن

فیلم آموزشی asp.net core 2

2 نظر

2 پاسخ

  1. سلام، روزتون بخیر
    با استفاده از همین جئولوکیشن میشه مختصات یه نقشه توی سایت رو نشون داد ؟

    یعنی یه نقشه رو توی سایت بزارم بعد با استفاده از جئولوکیشن کاربر وقتی روی نقشه کلیک میکنه مختصات نقشه براش نمایش داده بشه

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

نشانی ایمیل شما منتشر نخواهد شد.

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=