مقدمه
با عرض سلام خدمت کاربران سایت پی وی لرن . ما تاکنون در دوره آموزش کامل html در پی وی لرن، به بحث آشنایی کامل با html5 با ویژگی ها و عناصر آن ، پرداختیم. سپس به مبحث گرافیک در html5 ، پرداختیم. و در ادامه در آخرین مطالب آموزشی در مباحث چند رسانه ای در html، به مباحث آموزشی نظیر کار با Plug-ins در html و استفاده از ویدئوهای YouTube در html ، پرداختیم. اکنون در این فصل از آموزشهای html، قصد داریم وارد مباحث کار با انواع API ، در HTML شویم. و در اولین بخش آموزشی به موضوع کاربردی موقعیت جغرافیای در html5 و Google Maps در html از بخش آموزش API در html5 ، می پردازیم.
موقعیت جغرافیای در html5
موقعیت جغرافیای در html5
موقعیت جغرافیایی (HTML Geolocation) ، یک API است، که برای مکانیابی موقعیت جغرافیایی کاربران، استفاده می شود.
محل جغرافیایی کاربران
HTML Geolocation برای گرفتن موقعیت جغرافیایی یک کاربر استفاده می شود.
از آنجا که این ویژگی به حریم خصوصی کاربران مربوط می شود ، موقعیت آنها در دسترس نیست، مگر اینکه کاربر آن را تایید کند.
استفاده از قابلیت HTML Geolocation
از تابع ()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 () گزینه های Latitude و Longitude را به عنوان خروجی می دهد.
رفع خطاهای احتمالی
دومین پارامتر از روش () 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 را دارید.
در مثال زیر، طول و عرض جغرافیایی بازگشتی برای نشان دادن موقعیت مکانی در نقشه Google (با استفاده از یک تصویر استاتیک) بکار می رود:
مثال :
| 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 یک شی را در صورت موفقیت برمی گرداند.پارامترهای ابعاد عرض، طول جغرافیایی و دقت همیشه بازگشت می یابد. و خواص دیگر نیز اگر موجود باشند برمی گرداند:
| خصوصیت | Returns |
|---|
| coords.latitude | طول عرضی به عنوان یک عدد دهدهی (همیشه برگشت) |
| coords.longitude | طول جغرافیایی به عنوان یک عدد دهدهی (همیشه بازگشتی) |
| coords.accuracy | دقت موقعیت (همیشه بازگشتی) |
| coords.altitude | ارتفاع در متر بالاتر از سطح دریا (در صورت وجود) |
| coords.altitudeAccuracy | صحت ارتفاع موقعیت (در صورت موجود بودن) |
| coords.heading | عنوان درجه در جهت عقربه های ساعت از شمال (اگر در دسترس است) |
| coords.speed | سرعت در متر در ثانیه (در صورت موجود بودن) |
| timestamp | تاریخ / زمان پاسخ (اگر در دسترس است) |
سایر متدهای جالب
جغرافیایی شی نیز روش های جالب دیگری دارد:
watchPosition () – موقعيت فعلي کاربر را برمي گرداند و همچنان به موقعيت به روز شده به عنوان حرکت کاربر (مانند GPS در يک خودرو) ادامه مي دهد.
clearWatch () – روش watchPosition () را متوقف می کند.
مثال زیر روش watchPosition () را نشان می دهد. برای آزمایش این (به عنوان مثال گوشی هوشمند) نیاز به دستگاه GPS دقیق دارید:
مثال : تست متد watchPosition
| <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> |
کلام آخر
یکی از قابلیت های جالب در html که به کمک کدهای جاوا اسکریپت قابل پیاده سازی می باشد، موقعیت جغرافیای در html5 است که این ویژگی به سادگی و با استفاده از کدهای html و js مباحث فوق در دسترس قرار می گیرد.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
