موقعیت یابی مکانی در HTML – استفاده از API

HTML 5 Geo Location

API در HTML: موقعیت مکانی
2 444

API موقعیت جغرافیایی کاربر

API مربوط به موقعیت جغرافیایی کاربر برای دریافت موقعیت مکانی آن هاست که می تواند اهداف مختلفی داشته باشد اما از آن جا که این قابلیت ممکن است به حریم خصوصی کاربران صدمه وارد کند، کار نخواهد کرد تا زمانی که خود کاربر آن را تایید کند. دقیق ترین حالت موقعیت یابی کاربران در تلفن های همراه است که دارای تکنولوژی هایی مانند GPS هستند. پشتیبانی مرورگر های مختلف از این قابلیت بدین شرح است:

گوگل کروم فایرفاکس اینترنت اکسپلورر/Edge سافاری اپرا
از نسخه ی 5 تا 49 در حالت http و از نسخه ی 50 به بعد فقط در حالت https 3.5 9.0 5.0 16.0

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

شروع نحوه ی کار این API با استفاده از تابع ()getCurrentPosition است که موقعیت مکانی کاربر را برمیگرداند. در مثال زیر عرض و طول جغرافیایی کاربر را از او خواسته ایم:

مشاهده ی خروجی

این مثال ابتدا چک می کند تا ببیند مرورگر کاربر از قابلیت Geolocation (موقعیت جغرافیایی) پشتیبانی می کند یا خیر:

اگر از این قابلیت پشتیبانی می کرد، می گوید تابع ()getCurrentPosition را اجرا کن. در غیر این صورت به کاربر پیامی مبنی بر عدم پشتیبانی مرورگرش نمایش بده:

اگر کاربر متد ()getCurrentPosition را تایید کرد و موفقیت آمیز بود، یک شیء حاوی مختصات کاربر به تابعی که به صورت آرگومان به این متد داده شده است تحویل داده می شود:

تابع ()showPosition نیز در آخر عرض و طول جغرافیایی کاربر را نمایش می دهد:

مدیریت خطاها

مثال بالا بسیار ساده بود و هیچ کدی برای کار کردن با خطاهای احتمالی نداشت. بنابراین بیایید یک مثال پیچیده تر بنویسیم! پارامتر دوم تابع ()getCurrentPosition برای مدیریت خطا ها کاربرد دارد؛ تابعی را مشخص می کند تا در صورت بروز خطا آن را مدیریت کند:

مشاهده ی خروجی

پیام های کار با خطا به این شرح است:

پیام خطا ترجمه
Location information is unavailable. اطلاعات مربوط به موقعیت جغرافیایی در دسترس نیست.
The request to get user location timed out. زمان درخواست دسترسی به موقعیت جغرافیایی کاربر طولانی شد.
An unknown error occurred. خطای ناشناخته ای رخ داده است.

نمایش در نقشه

برای نمایش اطلاعات در نقشه به یک سرویس ارائه ی نقشه مانند Google Maps نیاز دارید. به طور مثال در کد زیر عرض و طول جغرافیایی کاربر دریافت شده و در Google Map نمایش داده می شوند (با استفاده از یک تصویر استاتیک):

استفاده از api مربوط به google maps نیاز به توضیحات فراوان دارد و در این مقاله نمی گنجد اما اطلاعات آن به صورت کامل در فضای اینترنت موجود است که می توانید از آن استفاده کنید.

ما می توانیم از موقعیت افراد استفاده کنیم تا بر اساس آن اطلاعات خاصی را به آن ها نمایش دهیم یا از آن ها مخفی کنیم. به طور مثال ارائه ی اطلاعات مختص به موقعیت کاربر (مثلا تنها برای کاربران مشهدی) یا ارائه ی اطلاعات مربوط به موقعیت کاربر (مانند تاکسی های اینترنتی) و غیره.

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

متدهای دیگر

شیء Geolocation متد های جالب دیگری نیز دارد:

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

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

مشاهده ی خروجی

امیدوارم از این قسمت لذت برده باشید.

ترتیبی که روکسو برای یادگیری مطالب سری صفر تا صد HTML به شما توصیه می‌کند:
2 نظر
  1. مصطفی
    0

    سلام
    نمی‌دونم چرا لوکیشن منو اشتباه نمایش می‌ده.
    الان لوکیشن منو توی این نقطه گفته، که برای کانادا هست.
    Latitude: 56.130365999999995
    Longitude: -106.34677099999999

    با این سایت تست کردم:
    https://www.gps-coordinates.net/

    ضمنا اجازه دسترسی به دریافت لوکیشن رو هم مرورگر داره و اینکه از لپ‌تاپ دارم تست می‌کنم.
    ممنون می‌شم توضیح بدید که چرا مختصات رو اشتباه پیدا می‌کنه؟

    1. امیر زوارمی
      0

      سلام دوست عزیز
      بنده تست کردم و مشکلی نداشت برام. سعی کنید این موارد رو چک کنید:

      ۱- مرورگرتون رو به آخرین نسخه آپدیت کنید.

      ۲- از VPN استفاده نکنید؛ استفاده از VPN ممکنه موقعیت رو تغییر بده (مثلا از سرور کانادا وصل شده باشید).

      ۳- قسمت Developer Tools (کلید f12) مرورگر کروم رو باز کنید. از منوی سه نقطه ای سمت بالا و راست اون قسمت گزینه ی More Tools رو انتخاب کنید و از اونجا روی Sensors کلیک کنید. دقت کنید که Geo-location رو روی مکان خاصی override نکرده باشید

ارسال نظر

توجه:‌ آدرس ایمیل شما منتشر نخواهد شد.

film izle | eskisehir escort | modanisa | mersin escort | www.ieski.com | eskort adana | www.izmir-eskort.org | kabak koyu | hd tv izle