طراحی سایت, ساخت ربات تلگرام, آموزش php , سورس کد php ,سورس ربات تلگرام , سورس فروشگاه اینترنتی , آموزش طراحی وب

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


آموزش HTML - مقدمه

در جلسه قبلی آموزش HTML با SSE در html5 آشنا شدیم. در این بخش به موقعیت جغرافیایی (geolocation) در html5 خواهیم پرداخت.

قابلیت موقعیت جغرافیایی HTML5 برای پیدا کردن موقعیت مکانی بازدید کننده ی سایت به کار میرود.

موقعیت جغرافیایی چیه؟

ویژگی موقعیت جغرافیایی HTML5 به شما کمک می کند تا مختصات جغرافیاییِ (اعداد طول و عرض جغرافیایی) موقعیت جاریِ بازدید کننده ی وب سایت تان را بیابید. این ویژگی برای فراهم کردن تجربه ی بهتری از دیدن سایت برای کاربر مفید است (UX). مثلاً، می توانید به نتایج جستجویی که در مکان کاربر بصورت فیزیکی بسته شده، برگردید.

یافتن مختصات بازدیدکننده

دریافت اطلاعات مکانِ بازدیدکننده ی سایت با استفاده از API موقعیت جغرافیایی HTML5 به سادگی قابل انجام است. این API از سه متد که در آبجکت navigator.geolocation بسته بندی شدن استفاده می کند

getCurrentPosition()
, watchPosition() و clearWatch().

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

نکته: مرورگر بدون گرفتن اجازه از بازدید کننده، اطلاعات مکانی کاربر را به اشتراک نخواهد گذاشت. استانداردِ موقعیت جغرافیایی، گرفتن اجازه از کاربر را برای هر وب سایتی که داده های مربوط به مکان کاربر را درخواست کند، بصورت یک قانون رسمی برای حفظ حریم خصوصی تعریف شده است.

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

ممکن است وضعیتی پیش آید که کاربر رغبتی به اشتراک گذاری اطلاعات مکانی خود نداشته باشد. برای مواجه با چنین موقعیت هایی، می توانید زمانی که getCurrentLocation() را فراخوانی می کنین از دو تابع بهره ببرین. تابع اول اگر تلاش برای گرفتن موقعیت جغرافیایی موفقیت آمیز باشد، اجرا میشود، در حالی که دومی اگر تلاش برای گرفتن موقعیت جغرافیایی موفقیت آمیز نباشد، اجرا خواهد شد.

نشان دادن مکان در نقشه ی Google

می توانید با اطلاعات موقعیت جغرافیایی کارهای جالبی انجام بدید، مثل نشان دادن مکان کاربر در نقشه ی Google. مثال زیر مکان جاری شما را در نقشه ی Google بر اساس داده های طول و عرض جغرافیایی شما که از طریق ویژگیِ موقعیت جغرافیاییِ HTML5 بدست آمده نشان می دهد.

حتما بخوانید  آموزش HTML - لیست ها در HTML

مثال بالا به سادگی با استفاده از عکس های ایستا (static)، مکان را روی نقشه Google نشان میدهد. با این حال می توانید نقشه های تعاملی Google را نیز همراه با ویژگی های درگ کردن، زوم کردن و ویژگی های دیگری که در زندگی واقعی دارند، ایجاد کنید.

برای یادگیری بیش تر درمورد نقشه های Google و API جاوا اسکریپت، به آدرس زیر مراجعه بفرمایید:

حتما بخوانید  کشیدن و رها کردن در html5

https://developers.google.com/maps/documentation/javascript/reference

نظارت بر جابه جاییِ بازدیدکننده

همه ی مثال هایی که تا این جا دیدین براساس متدِ getCurrentPosition() بود. به هر حال، شیء موقعیت جغرافیایی (geolocation)، متد دیگری به نام watchPosition() دارد که با برگرداندن آپدیت های مکانی به هنگام تغییرات مکانی، به شما امکان دنبال کردن حرکات بازدیدکننده را میدهد.

امیدوارم در این بخش آموزش HTML , از موقعیت جغرافیایی html5 نهایت استفاده را برده باشید.

در بخش بعدی با کشیدن و رها کردن در HTML آشنا می شویم.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.

حسن شفیعی
مدرس ، پنتستر ، توسعه دهنده اپلیکیشن های تحت وب ، عضو مرکز حامی نخبگان و از مدیران و اعضای رسمی تیم امنیتی آشیانه هستم . علاقه خاصی به زبان های تحت وب, امنیت شبکه و لینوکس دارم و هر روز تلاش می کنم به این حوزه ها مسلط تر شوم و اطلاعاتم را در وب به اشتراک بگذارم

دیدگاه کاربران

avatar

دانلود رایگان (هدیه ویژه)

کتاب آموزش زبان برنامه نویسی PHP را دانلود و همین امروز یادگیری را شروع کن و به جمع برنامه نویسان ملحق شو ;)

دانلود رایگان کتاب

سورس فروشگاهی دیجی کالا

بخش کاربران

هنوز عضو نیستید ؟ کلیک کنید

مجوزهای ما

logo-samandehi

دانلود کتاب

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

تخفیف 150 هزار تومانی برای سورس فروشگاهی دیجی کالا تا پایان خردادماه - کد تخفیف : np150
ثانیه
دقیقه
ساعت
روز
خرید محصول