مکان یابی جغرافیایی در HTML5

مشخص نمودن مکان کاربر

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

نکته: مکان یابی برای دستگاه های مجهز به سامانه مکان یاب جغرافیایی (GPS) مانند گوشی های هوشمند، بسیار دقیق انجام می شود.

پشتیبانی مرورگرها:

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

API
Geolocation 5.0 – 49.0 (http)
50.0 (https)
9.0 3.5 5.0 16.0
نکته: درخصوص مرورگر کروم، از نسخه 50 به بعد، مکان یابی تنها از طریق اتصال رمز گذاری شده نظیر HTTPS امکان پذیر خواهد بود. در صورتی که وب سایت شما درمسیر غیر امنی (نظیر HTTP) میزبانی شود، درخواست ها برای دریافت مکان کاربر از مرورگر کروم از نسخه 50 به بعد معتبر نخواهد بود و اجرا نخواهد شد.

نحوه کاربرد مکان یابی در HTML

متد getCurrentPosition در جاوا اسکریپت مکان کاربر را بر می گرداند. نمونه کد زیر، طول و عرض جغرافیایی مکان حال حاضر کاربر را بر می گرداند:

<script>
var x = document.getElementById("demo");
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
        x.innerHTML = "قابلیت مکان یابی توسط مرورگر شما پشتیبانی نمی شود.";
    }
}
function showPosition(position) {
    x.innerHTML = "Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude; 
}
</script>

 


توضیحات در خصوص مثال بالا:

  • در ابتدا بررسی می شود که آیا مرورگر قابلیت پشتیبانی از مکان یابی را دارد یا خیر (navigator.geolocation)if
  • در صورتی که این قابلیت توسط مرورگر پشتیبانی می شود متد getCurrentPosition اجرا شده و در غیر این صورت پیغام عدم پشتیبانی برای کاربر نمایش داده می شود.
  • در صورتی که متد getCurrentPosition به صورت موفق اجرا شود، این متد مقادیر متناسب با تابعی که به عنوان پارامتر به آن معرفی شده (showPosition) بر می گرداند.
  • تابع showPosition نیز مقدار طول و عرض جغرافیایی را نشان می دهد.

بررسی خطا ها و عدم پاسخگویی توسط مرورگر

پارامتر دوم از متد getCurrentPosition برای بررسی خطا ها به کار می رود. این متد، تابعی را تعریف می کند که در صورت بروز خطا در فرآیند موقعیت یابی کاربر اجرا خواهد شد. به مثال زیر توجه کنید:

function showError(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            x.innerHTML = "امکان دسترسی به موقعیت توسط کاربر مسدود شده"
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML = "اطلاعات مکانی موجود نیست."
            break;
        case error.TIMEOUT:
            x.innerHTML = "بازه زمانی برای دریافت موقعیت به اتمام رسید."
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML = "یک خطای غیر منتظره رخ داده."
            break;
    }
}
 


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

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

در مثال زیر، مقادیر طول و عرض جغرافیایی در نقشه گوگل (نقشه ثابت) نشان داده می شود.

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


اطلاعات خاص در موقعیت یابی

قابلیت موقعیت یابی را می توان برای سرویس های خاص و سودمند دیگر به کار گرفت. نظیر این سرویس ها:

  • نمایش مکان های خاص نزدیک به کاربر
  • استفاده از اطلاعات مکانی به روز
  • راهنمای مسیر یابی لحظه به لحظه

اطلاعات برگشتی توسط متد getCurrentPosition

متد getCurrentPosition در صورت موفقیت در اجرا، یک شیء را باز می گرداند. طول جغرافیایی، عرض جغرافیایی و همچنین دقت موقعیت یابی از داده هایی است که همیشه توسط این متد برگردانده می شود. دیگر داده هایی که در صورت مهیا بودن، توسط این متد برگردانده می شود در جدول زیر نشان داده شده است:

Property Returns
coords.latitude طول جغرافیایی که یک عدد ده دهی است (همیشه برگردانده می شود)
coords.longitude عرض جغرافیایی که یک عدد ده دهی است (همیشه برگردانده می شود)
coords.accuracy دقت مکان یابی (همیشه برگردانده می شود)
coords.altitude ارتفاع از سطح دریا بر حسب متر (در صورت وجود برگردانده می شود)
coords.altitudeAccuracy دقت در سنجش ارتفاع از سطح دریا (در صورت وجود برگردانده می شود)
coords.heading جهت قرار گرفتن کاربر نسبت به شمال بر حسب درجه در جهت عقربه های ساعت (در صورت وجود برگردانده می شود)
coords.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 = "قابلیت موقعیت یابی توسط این مرورگر پشتیبانی نمی شود";
    }
}
function showPosition(position) {
    x.innerHTML = "Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude; 
}
</script>
 


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

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