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

موقعیت جغرافیایی HTML5  یا Geolocation  چیست؟

آموزش APIs درس اول

موقعیت جغرافیایی HTML5  برای اینکه  موقعیت کاربر تعیین شود استفاده می شود. در این آموزش توضیحات کاملی در مورد  API  به شما می دهیم.

نقشه گوگل  html  را از اینجا ببینید

موقعیت جغرافیایی HTML5 : موقعیت کاربر را تعیین کنید

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

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

موقعیت جغرافیایی HTML5 : پشتیبانی مرورگر

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

API کروم اینترنت اکسپلورر فایرفاکس سافاری آپرا
Geolocation۵.۰ – ۴۹.۰ (http)
۵۰.۰ (https)
۹.۰۳.۵۵.۰۱۶.۰

 

توجه: از کروم ۵۰، API Geolocation فقط در زمینه های امن مانند HTTPS کار خواهد کرد. اگر سایت شما بر مبنای غیر امن (مانند HTTP) میزبانی شود، درخواست ها برای دریافت موقعیت مکانی کاربر دیگر کار نخواهد کرد.

موقعیت جغرافیایی HTML5 : استفاده از  Geolocation HTML

روش 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 ()،    Longitude  و Latitude را در خروجی می دهد
مثال فوق یک اسکریپت بسیار ساده Geolocation است که بدون هیچگونه خطا می باشد.

حتما بخوانید:  کامنت ها در html

Handling Errors and Rejections

دومین پارامتر از روش 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 () یک شی را با  موفقیت برمی گرداند. ابعاد عرض، طول جغرافیایی و خواصی که نیاز به دقت دارند  همیشه برمی گردند. خواص دیگر اگر موجود باشند:

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

 

موقعیت جغرافیایی – سایر روش های جالب

شی های جغرافیایی نیز روش های جالب دیگری دارد:
• watchPosition () – وضعیت فعلی کاربر را برمی گرداند و همچنان موقعیت مکانی  را به عنوان حرکت کاربر (مانند GPS در یک ماشین).  به روز می کند.
• clearWatch () – روش watchPosition () را متوقف می کند.
مثال زیر روش watchPosition () را نشان می دهد  شما یک وسیله GPS دقیق برای تست این نیاز دارید : (عنوان مثال iPhone)

مثال :

  <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>  
امتیاز کاربران به این مطلب
۰ نفر - میانگین: ۰
تلگرام

دیدگاه‌تان را ثبت کنید:

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

16 − هشت =

PHN0eWxlPi5oX2lmcmFtZS1hcGFyYXRfZW1iZWRfZnJhbWV7cG9zaXRpb246cmVsYXRpdmU7fSAuaF9pZnJhbWUtYXBhcmF0X2VtYmVkX2ZyYW1lIC5yYXRpbyB7ZGlzcGxheTpibG9jazt3aWR0aDoxMDAlO2hlaWdodDphdXRvO30gLmhfaWZyYW1lLWFwYXJhdF9lbWJlZF9mcmFtZSBpZnJhbWUge3Bvc2l0aW9uOmFic29sdXRlO3RvcDowO2xlZnQ6MDt3aWR0aDoxMDAlOyBoZWlnaHQ6MTAwJTt9PC9zdHlsZT48ZGl2IGNsYXNzPSJoX2lmcmFtZS1hcGFyYXRfZW1iZWRfZnJhbWUiPiA8c3BhbiBzdHlsZT0iZGlzcGxheTogYmxvY2s7cGFkZGluZy10b3A6IDU3JSI+PC9zcGFuPjxpZnJhbWUgc3JjPSJodHRwczovL3d3dy5hcGFyYXQuY29tL3ZpZGVvL3ZpZGVvL2VtYmVkL3ZpZGVvaGFzaC85dHk0VS92dC9mcmFtZSIgYWxsb3dGdWxsU2NyZWVuPSJ0cnVlIiB3ZWJraXRhbGxvd2Z1bGxzY3JlZW49InRydWUiIG1vemFsbG93ZnVsbHNjcmVlbj0idHJ1ZSIgPjwvaWZyYW1lPjwvZGl2Pg==
با سپاس از ثبت دیدگاه شما دوست عزیز
از تماشای این ویدیو لذت ببرید ...
فقط چند ثانیه تا دانلود فاصله دارید!
* دانلود فایل سخنرانی استیو جابز ...
ایبوک هدف‌گذاری موثر
زودتر از آنچه فکرش را می‌کنید به خواسته‌هایتان دست پیدا کنید!
* لینک دانلود بلافاصله ایمیل می‌شود.
چهار عامل شگفت انگیز کسب درآمد چیست؟
فقط چند ثانیه تا دانلود فاصله دارید!
* سه ایده کسب و کار خانگی پولساز
فقط چند ثانیه تا دانلود فاصله دارید!
* ایبوک: ده مکان عالی برای پیدا کردن یک ایده جدید
فقط چند ثانیه تا دانلود فاصله دارید!
* دانلود ویدیوی جذاب و با کیفیت مصاحبه جک ما
از همین امروز شروع کنید
بدون تجربه و دانش فنی وارد دنیای درآمدهای اینترنتی شوید!
فایل‌های آموزشی برای شما ایمیل می‌شود.
فقط چند ثانیه تا دریافت این فایل آموزشی فاصله دارید!
فایل‌های آموزشی ویژه اعضای سایت
* اگر عضو نیستید با وارد کردن ایمیل‌تان به این فایل دسترسی پیدا می‌کنید
دسترسی مخصوص اعضای سایت
عضو سایت نیستید؟
فقط کافیه نام و ایمیل‌تان را وارد کنید و ...
* دسترسی سریع به تمام فایل‌های آموزشی
هدیه ما به شما
با سپاس از اینکه دیدگاه تان را در سایت ما ثبت کردید.


یک کوپن تخفیف 30%
  • مشاوره حضوری
  • دوره های آنلاین
  • بسته های آموزشی
  • محصولات دانلودی
  • وبینارهای آموزشی
  این کد فقط یکبار به شما نمایش داده می‌شود.
کد: qwert
ورود کاربران
* دسترسی رایگان به بخش آکادمی