در مقالات قبلی با قابلیت‌های مختلف HTML5 مانند Canvas و SVG آشنا شدیم و دیدیم که HTML5 فقط برای ساختاردهی متن و محتوای صفحه استفاده نمی‌شود، بلکه امکاناتی را در اختیار برنامه‌های وب قرار می‌دهد که می‌توانند با قابلیت‌های دستگاه کاربر تعامل داشته باشند. یکی از این قابلیت‌ها Geolocation یا موقعیت‌یابی جغرافیایی است. با استفاده از Geolocation، یک صفحه وب می‌تواند در صورت موافقت کاربر، موقعیت تقریبی یا دقیق دستگاه را دریافت کند؛ برای مثال می‌توان از آن در فروشگاه‌های اینترنتی برای پیدا کردن نزدیک‌ترین شعبه، در سامانه‌های حمل‌ونقل برای نمایش موقعیت، یا در برنامه‌های مبتنی بر نقشه استفاده کرد. در این مقاله ابتدا با مفهوم Geolocation آشنا می‌شویم و سپس یاد می‌گیریم چگونه با JavaScript موقعیت کاربر را دریافت کنیم، خطاها را مدیریت کنیم، دقت و زمان دریافت موقعیت را تنظیم کنیم و در نهایت تغییرات موقعیت را با watchPosition() دنبال کنیم.

این مقاله را بعد از یادگیری جاوا اسکریپت مطالعه کنید!

Geolocation چیست؟

کلمه:

Geolocation

به معنی موقعیت‌یابی جغرافیایی است.

در وب، Geolocation به قابلیتی گفته می‌شود که به صفحه اجازه می‌دهد، در صورت اجازه کاربر، اطلاعات مربوط به موقعیت دستگاه را دریافت کند.

برای مثال یک وب‌سایت می‌تواند بفهمد دستگاه کاربر تقریباً در چه مختصات جغرافیایی قرار دارد.

معمولاً این اطلاعات شامل مواردی مانند:

Latitude
Longitude
Accuracy

است.

البته روش به‌دست‌آوردن موقعیت به دستگاه و شرایط آن بستگی دارد و ممکن است از قابلیت‌هایی مانند GPS، Wi-Fi یا روش‌های دیگر موقعیت‌یابی استفاده شود.

چرا Geolocation در وب کاربرد دارد؟

فرض کنید یک فروشگاه اینترنتی چندین شعبه دارد.

کاربر وارد سایت می‌شود و روی دکمه:

نزدیک‌ترین شعبه به من

کلیک می‌کند.

سایت می‌تواند با استفاده از موقعیت کاربر، مختصات او را دریافت کند و سپس با استفاده از یک سرویس نقشه یا سیستم جست‌وجوی مکانی، شعبه‌های نزدیک را پیدا کند.

نمونه‌های دیگر:

• نمایش موقعیت فعلی کاربر روی نقشه

• پیدا کردن نزدیک‌ترین فروشگاه

• برنامه‌های حمل‌ونقل

• سامانه‌های تحویل کالا

• برنامه‌های ورزشی

• سرویس‌های مبتنی بر موقعیت مکانی

• نمایش اطلاعات مرتبط با منطقه کاربر

بنابراین Geolocation می‌تواند پایه بسیاری از امکانات مکانی در برنامه‌های وب باشد.

آیا مرورگر بدون اجازه کاربر موقعیت او را دریافت می‌کند؟

خیر.

موقعیت مکانی اطلاعات حساسی محسوب می‌شود و مرورگر برای دسترسی به آن معمولاً از کاربر اجازه می‌گیرد.

وقتی صفحه درخواست موقعیت مکانی می‌کند، مرورگر ممکن است پیامی مانند:

Allow this site to access your location?

نمایش دهد.

کاربر می‌تواند:

Allow

یا:

Block

را انتخاب کند.

بنابراین برنامه‌نویس نباید فرض کند که همیشه به موقعیت کاربر دسترسی خواهد داشت.

حتی اگر کاربر قبلاً اجازه داده باشد، وضعیت مجوز می‌تواند بسته به مرورگر و تنظیمات کاربر متفاوت باشد.

Geolocation در JavaScript چگونه در دسترس است؟

برای دسترسی به Geolocation از:

navigator.geolocation

استفاده می‌کنیم.

مثلاً:

console.log(navigator.geolocation);

اما بهتر است ابتدا بررسی کنیم که مرورگر قابلیت Geolocation را در اختیار ما قرار داده است یا خیر.

if ("geolocation" in navigator) {
    console.log("Geolocation در دسترس است.");
} else {
    console.log("Geolocation در این مرورگر در دسترس نیست.");
}

شیء navigator.geolocation نقطه ورود ما به API موقعیت‌یابی است.

دریافت موقعیت فعلی با getCurrentPosition()

برای دریافت موقعیت فعلی دستگاه از:

getCurrentPosition()

استفاده می‌کنیم.

ساده‌ترین شکل آن:

navigator.geolocation.getCurrentPosition(
    function(position) {
        console.log(position);
    }
);

این متد یک درخواست موقعیت‌یابی ایجاد می‌کند.

اگر موقعیت با موفقیت دریافت شود، تابع موفقیت اجرا می‌شود.

به زبان ساده:

درخواست موقعیت
       ↓
بررسی دسترسی
       ↓
دریافت موقعیت
       ↓
اجرای تابع موفقیت

getCurrentPosition() به صورت asynchronous کار می‌کند؛ بنابراین نباید انتظار داشته باشیم نتیجه بلافاصله در همان خط بعدی در دسترس باشد.

تابع Success چیست؟

در مثال قبلی:

function(position) {
    console.log(position);
}

تابعی است که در صورت موفقیت اجرا می‌شود.

می‌توانیم آن را به شکل واضح‌تری بنویسیم:

function success(position) {
    console.log(position);
}

navigator.geolocation.getCurrentPosition(success);

مرورگر پس از دریافت موقعیت، اطلاعات آن را به عنوان آرگومان به تابع success ارسال می‌کند.

position.coords چیست؟

شیء position اطلاعات مربوط به موقعیت را در اختیار ما قرار می‌دهد.

یکی از مهم‌ترین بخش‌های آن:

position.coords

است.

مثلاً:

function success(position) {

    console.log(position.coords);

}

داخل coords اطلاعاتی درباره مختصات و دقت موقعیت وجود دارد.

Latitude چیست؟

یکی از مهم‌ترین اطلاعات موقعیت:

latitude

است.

Latitude یا عرض جغرافیایی موقعیت شمالی یا جنوبی یک نقطه نسبت به خط استوا را مشخص می‌کند.

مثلاً:

position.coords.latitude

ممکن است مقداری مانند:

35.6892

برگرداند.

Longitude چیست؟

اطلاعات مهم بعدی:

longitude

است.

Longitude یا طول جغرافیایی موقعیت شرقی یا غربی یک نقطه نسبت به نصف‌النهار مبدأ را مشخص می‌کند.

در JavaScript:

position.coords.longitude

را داریم.

بنابراین برای مشخص کردن موقعیت جغرافیایی یک نقطه معمولاً از این دو مقدار استفاده می‌کنیم:

Latitude
Longitude

Accuracy چیست؟

اطلاعات دیگری که می‌توانیم دریافت کنیم:

position.coords.accuracy

است.

این مقدار نشان‌دهنده میزان دقت تخمینی موقعیت است و معمولاً بر حسب متر بیان می‌شود.

مثلاً اگر مقدار:

accuracy = 25

باشد، می‌توان آن را به صورت تقریبی این‌گونه تفسیر کرد:

موقعیت اعلام‌شده با دقتی در حدود 25 متر ارائه شده است.

این عدد به معنی تضمین خطای دقیقاً 25 متر نیست، بلکه یک تخمین از دقت موقعیت است.

نمایش Latitude و Longitude

حالا یک مثال واقعی ایجاد کنیم.

ابتدا HTML:

<!DOCTYPE html>
<html lang="fa" dir="rtl">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>موقعیت من</title>

</head>

<body>

    <h1>موقعیت من</h1>

    <button onclick="getLocation()">
        دریافت موقعیت
    </button>

    <p id="result"></p>

    <script>

        function getLocation() {

            navigator.geolocation.getCurrentPosition(
                function(position) {

                    const latitude =
                        position.coords.latitude;

                    const longitude =
                        position.coords.longitude;

                    document.getElementById("result").textContent =
                        `Latitude: ${latitude} - Longitude: ${longitude}`;

                }
            );

        }

    </script>

</body>

</html>

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

در صورت موافقت کاربر، مختصات نمایش داده می‌شود.

چرا بهتر است درخواست موقعیت با یک دکمه انجام شود؟

از نظر تجربه کاربری بهتر است کاربر بداند چرا سایت به موقعیت او نیاز دارد.

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

صفحه باز شد
↓
بلافاصله درخواست Location

می‌توانیم ابتدا توضیح دهیم:

برای پیدا کردن نزدیک‌ترین شعبه،
به موقعیت مکانی شما نیاز داریم.

و سپس دکمه‌ای مانند:

نمایش نزدیک‌ترین شعبه

قرار دهیم.

این روش برای کاربر شفاف‌تر است.

مدیریت خطا با Callback دوم

ممکن است دریافت موقعیت با موفقیت انجام نشود.

برای مدیریت خطا می‌توانیم یک تابع دوم به getCurrentPosition() بدهیم.

ساختار کلی:

navigator.geolocation.getCurrentPosition(
    success,
    error
);

مثلاً:

function success(position) {

    console.log("موقعیت دریافت شد.");

}

function error(error) {

    console.log("دریافت موقعیت ناموفق بود.");

}

navigator.geolocation.getCurrentPosition(
    success,
    error
);

به این ترتیب دو حالت داریم:

موفقیت
   ↓
success()

خطا
   ↓
error()

خطای Permission Denied

یکی از رایج‌ترین خطاها زمانی اتفاق می‌افتد که کاربر اجازه دسترسی به موقعیت را ندهد.

در این حالت کد خطا:

error.code

می‌تواند مقدار مربوط به رد شدن مجوز را نشان دهد.

می‌توانیم آن را بررسی کنیم:

function error(error) {

    if (error.code === 1) {

        console.log("دسترسی به موقعیت رد شد.");

    }

}

این وضعیت معمولاً با:

PERMISSION_DENIED

شناخته می‌شود.

خطای Position Unavailable

گاهی مرورگر یا دستگاه نمی‌تواند موقعیت را دریافت کند.

در این شرایط می‌توانیم با وضعیت:

POSITION_UNAVAILABLE

مواجه شویم.

مثلاً:

function error(error) {

    if (error.code === 2) {

        console.log("موقعیت در دسترس نیست.");

    }

}

دلایل مختلفی می‌توانند باعث این وضعیت شوند؛ بنابراین بهتر است پیام مناسبی به کاربر نمایش دهیم.

خطای Timeout

گاهی دریافت موقعیت بیشتر از زمانی که برنامه منتظر می‌ماند طول می‌کشد.

در این حالت ممکن است خطای:

TIMEOUT

رخ دهد.

مثال:

function error(error) {

    if (error.code === 3) {

        console.log("زمان دریافت موقعیت به پایان رسید.");

    }

}

یک Error Handler کامل

می‌توانیم سه خطای اصلی را مدیریت کنیم:

function error(error) {

    switch (error.code) {

        case 1:
            console.log("دسترسی به موقعیت رد شد.");
            break;

        case 2:
            console.log("موقعیت در دسترس نیست.");
            break;

        case 3:
            console.log("زمان دریافت موقعیت به پایان رسید.");
            break;

        default:
            console.log("خطای ناشناخته.");
    }

}

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

استفاده از options

متد getCurrentPosition() می‌تواند یک شیء تنظیمات نیز دریافت کند.

ساختار کلی:

navigator.geolocation.getCurrentPosition(
    success,
    error,
    options
);

برای مثال:

const options = {

    enableHighAccuracy: true,

    timeout: 5000,

    maximumAge: 0

};

navigator.geolocation.getCurrentPosition(
    success,
    error,
    options
);

سه گزینه مهم در این شیء وجود دارد:

enableHighAccuracy
timeout
maximumAge

enableHighAccuracy

این گزینه مشخص می‌کند که برنامه درخواست دقت بیشتر موقعیت را دارد یا خیر.

مثلاً:

const options = {
    enableHighAccuracy: true
};

وقتی مقدار آن:

true

باشد، مرورگر تلاش می‌کند در صورت امکان موقعیت دقیق‌تری ارائه دهد.

اما دقت بیشتر می‌تواند باعث افزایش زمان دریافت موقعیت یا مصرف بیشتر انرژی دستگاه شود.

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

timeout

گزینه:

timeout

حداکثر زمانی را مشخص می‌کند که برنامه برای دریافت موقعیت منتظر می‌ماند.

مثلاً:

const options = {
    timeout: 5000
};

یعنی برنامه حدوداً تا:

5000 میلی‌ثانیه

برای دریافت موقعیت منتظر می‌ماند.

یعنی:

5000 ms = 5 seconds

maximumAge

گزینه:

maximumAge

مشخص می‌کند که آیا استفاده از موقعیت ذخیره‌شده یا Cache شده مجاز است یا خیر.

مثلاً:

const options = {
    maximumAge: 30000
};

یعنی موقعیتی که تا حدود 30 ثانیه از عمر آن گذشته است می‌تواند قابل قبول باشد.

اگر:

maximumAge: 0

باشد، برنامه موقعیت Cache شده را نمی‌پذیرد و تلاش می‌کند موقعیت تازه‌تری دریافت کند.

مثال کامل با Options

<!DOCTYPE html>
<html lang="fa" dir="rtl">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>Geolocation</title>

</head>

<body>

    <button id="locationButton">
        دریافت موقعیت
    </button>

    <p id="result"></p>

    <script>

        const button =
            document.getElementById("locationButton");

        const result =
            document.getElementById("result");

        button.addEventListener("click", function() {

            const options = {

                enableHighAccuracy: true,

                timeout: 5000,

                maximumAge: 0

            };

            navigator.geolocation.getCurrentPosition(

                function(position) {

                    const latitude =
                        position.coords.latitude;

                    const longitude =
                        position.coords.longitude;

                    const accuracy =
                        position.coords.accuracy;

                    result.textContent =
                        `Latitude: ${latitude} | ` +
                        `Longitude: ${longitude} | ` +
                        `Accuracy: ${accuracy} متر`;

                },

                function(error) {

                    result.textContent =
                        "دریافت موقعیت با خطا مواجه شد.";

                },

                options

            );

        });

    </script>

</body>

</html>

در این مثال کاربر با کلیک روی دکمه، درخواست موقعیت را شروع می‌کند.

watchPosition چیست؟

تا اینجا از:

getCurrentPosition()

استفاده کردیم.

این متد برای زمانی مناسب است که فقط موقعیت فعلی را می‌خواهیم.

اما اگر بخواهیم تغییرات موقعیت کاربر را دنبال کنیم، می‌توانیم از:

watchPosition()

استفاده کنیم.

مثلاً:

const watchId =
    navigator.geolocation.watchPosition(
        success,
        error
    );

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

مثال ساده watchPosition()

function success(position) {

    console.log(
        position.coords.latitude
    );

    console.log(
        position.coords.longitude
    );

}

function error(error) {

    console.log(
        "خطا در دریافت موقعیت"
    );

}

const watchId =
    navigator.geolocation.watchPosition(
        success,
        error
    );

در اینجا:

watchId

شناسه مربوط به نظارت بر موقعیت است.

توقف watchPosition() با clearWatch()

اگر دیگر به دنبال کردن موقعیت نیاز نداشته باشیم، باید آن را متوقف کنیم.

برای این کار از:

clearWatch()

استفاده می‌کنیم.

مثال:

navigator.geolocation.clearWatch(
    watchId
);

بنابراین:

watchPosition()
       ↓
شروع دنبال کردن موقعیت

clearWatch()
       ↓
توقف دنبال کردن موقعیت

استفاده از clearWatch() زمانی مهم است که دیگر به به‌روزرسانی موقعیت نیاز نداریم.

مثال کامل Watch Position

<!DOCTYPE html>
<html lang="fa" dir="rtl">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>دنبال کردن موقعیت</title>

</head>

<body>

    <h1>موقعیت فعلی</h1>

    <button id="start">
        شروع
    </button>

    <button id="stop">
        توقف
    </button>

    <p id="result">
        موقعیت هنوز دریافت نشده است.
    </p>

    <script>

        let watchId = null;

        const result =
            document.getElementById("result");

        document
            .getElementById("start")
            .addEventListener("click", function() {

                if (!("geolocation" in navigator)) {

                    result.textContent =
                        "Geolocation در دسترس نیست.";

                    return;
                }

                watchId =
                    navigator.geolocation.watchPosition(

                        function(position) {

                            const latitude =
                                position.coords.latitude;

                            const longitude =
                                position.coords.longitude;

                            result.textContent =
                                `Latitude: ${latitude} | ` +
                                `Longitude: ${longitude}`;

                        },

                        function(error) {

                            result.textContent =
                                "دریافت موقعیت با خطا مواجه شد.";

                        }

                    );

            });


        document
            .getElementById("stop")
            .addEventListener("click", function() {

                if (watchId !== null) {

                    navigator.geolocation.clearWatch(
                        watchId
                    );

                    watchId = null;

                    result.textContent =
                        "دنبال کردن موقعیت متوقف شد.";

                }

            });

    </script>

</body>

</html>

این مثال یک ساختار ساده اما واقعی از استفاده watchPosition() و clearWatch() است.

آیا Geolocation آدرس کاربر را برمی‌گرداند؟

خیر.

Geolocation معمولاً اطلاعات موقعیت جغرافیایی مانند:

Latitude
Longitude
Accuracy

را در اختیار ما قرار می‌دهد.

برای مثال:

Latitude:
35.6892

Longitude:
51.3890

اما این اطلاعات به صورت مستقیم به چیزی مانند:

تهران، خیابان ...

تبدیل نمی‌شوند.

اگر بخواهیم مختصات را به آدرس یا نام شهر تبدیل کنیم، معمولاً به یک سرویس جداگانه به نام Reverse Geocoding نیاز داریم.

Geolocation و نقشه چه ارتباطی دارند؟

Geolocation خودش یک سیستم نقشه نیست.

وظیفه Geolocation این است که اطلاعات موقعیت را در اختیار برنامه قرار دهد.

سپس می‌توانیم این اطلاعات را به یک سرویس نقشه یا سیستم مکانی دیگری بدهیم.

ساختار کلی می‌تواند این‌گونه باشد:

Geolocation
     ↓
Latitude + Longitude
     ↓
Mapping Service
     ↓
نمایش موقعیت روی نقشه

بنابراین:

Geolocation ≠ Map

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

HTTPS و Geolocation

یکی از نکات مهم در استفاده از Geolocation این است که این قابلیت در مرورگرهای مدرن در Secure Context ارائه می‌شود؛ به طور معمول یعنی صفحه باید از طریق:

HTTPS

ارائه شده باشد.

در محیط توسعه، localhost معمولاً به عنوان محیط امن توسعه در نظر گرفته می‌شود و برای آزمایش این قابلیت بسیار کاربردی است.

بنابراین اگر پروژه شما روی یک دامنه واقعی اجرا می‌شود، بهتر است سایت را با HTTPS راه‌اندازی کنید.

چرا HTTPS مهم است؟

موقعیت مکانی اطلاعات حساسی است.

فرض کنید یک سایت بدون هیچ محدودیتی بتواند موقعیت دقیق کاربران را دریافت کند.

این موضوع می‌تواند خطرات جدی برای حریم خصوصی ایجاد کند.

به همین دلیل مرورگرها برای قابلیت‌هایی مانند Geolocation محدودیت‌های امنیتی و مجوز کاربر را در نظر می‌گیرند.

در نتیجه:

Geolocation
      ↓
HTTPS
      +
Permission
      ↓
Location Access

از مفاهیم مهمی هستند که باید در ذهن داشته باشید.

اگر کاربر اجازه ندهد چه اتفاقی می‌افتد؟

برنامه نباید خراب شود.

اگر کاربر روی:

Block

کلیک کند، باید پیام مناسبی نمایش دهیم.

مثلاً:

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

بهتر است هرگز کاربر را مجبور به دادن موقعیت مکانی نکنیم، مگر اینکه آن قابلیت واقعاً بدون موقعیت کاربر قابل استفاده نباشد.

نکات مهم حریم خصوصی

هنگام استفاده از Geolocation چند نکته مهم را رعایت کنید:

فقط زمانی موقعیت را درخواست کنید که لازم است

اگر صفحه شما هیچ استفاده‌ای از موقعیت ندارد، نباید صرفاً برای جمع‌آوری اطلاعات آن را درخواست کنید.

دلیل درخواست را توضیح دهید

به کاربر بگویید چرا به موقعیت نیاز دارید.

مثلاً:

برای نمایش نزدیک‌ترین شعبه،
به موقعیت مکانی شما نیاز داریم.

موقعیت را بی‌دلیل ذخیره نکنید

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

اطلاعات موقعیت را مانند اطلاعات حساس مدیریت کنید

مختصات جغرافیایی می‌تواند اطلاعات زیادی درباره محل حضور فرد نشان دهد.

پس در طراحی سیستم، امنیت و حریم خصوصی را جدی بگیرید.

یک صفحه کامل «موقعیت من»

حالا یک نمونه نسبتاً کامل ایجاد کنیم.

<!DOCTYPE html>
<html lang="fa" dir="rtl">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>موقعیت من</title>

</head>

<body>

    <h1>موقعیت من</h1>

    <p>
        برای نمایش موقعیت فعلی خود روی دکمه زیر کلیک کنید.
    </p>

    <button id="locationButton">
        نمایش موقعیت
    </button>

    <div id="result"></div>

    <script>

        const button =
            document.getElementById("locationButton");

        const result =
            document.getElementById("result");


        button.addEventListener(
            "click",
            function() {

                if (!("geolocation" in navigator)) {

                    result.textContent =
                        "مرورگر شما از Geolocation پشتیبانی نمی‌کند.";

                    return;
                }


                result.textContent =
                    "در حال دریافت موقعیت...";


                const options = {

                    enableHighAccuracy: true,

                    timeout: 10000,

                    maximumAge: 0

                };


                navigator.geolocation.getCurrentPosition(

                    function(position) {

                        const latitude =
                            position.coords.latitude;

                        const longitude =
                            position.coords.longitude;

                        const accuracy =
                            position.coords.accuracy;


                        result.innerHTML = `

                            <p>
                                عرض جغرافیایی:
                                ${latitude}
                            </p>

                            <p>
                                طول جغرافیایی:
                                ${longitude}
                            </p>

                            <p>
                                دقت:
                                ${accuracy} متر
                            </p>

                        `;

                    },


                    function(error) {

                        switch (error.code) {

                            case 1:

                                result.textContent =
                                    "دسترسی به موقعیت رد شد.";

                                break;


                            case 2:

                                result.textContent =
                                    "موقعیت در دسترس نیست.";

                                break;


                            case 3:

                                result.textContent =
                                    "زمان دریافت موقعیت به پایان رسید.";

                                break;


                            default:

                                result.textContent =
                                    "خطایی در دریافت موقعیت رخ داد.";

                        }

                    },


                    options

                );

            }
        );

    </script>

</body>

</html>

این مثال بسیاری از مفاهیمی را که در این مقاله یاد گرفتیم در کنار یکدیگر قرار می‌دهد.

اشتباهات رایج در Geolocation

اشتباه اول: فرض کردن اینکه موقعیت همیشه در دسترس است

این کار اشتباه است.

ممکن است:

• مرورگر پشتیبانی نکند.

• کاربر اجازه ندهد.

• دستگاه نتواند موقعیت را پیدا کند.

• دریافت موقعیت Timeout شود.

بنابراین همیشه باید شرایط خطا را در نظر بگیریم.

اشتباه دوم: درخواست موقعیت بدون توضیح

این کار می‌تواند تجربه کاربری بدی ایجاد کند.

بهتر است قبل از درخواست، دلیل آن را توضیح دهیم.

اشتباه سوم: استفاده از watchPosition() بدون توقف

اگر دیگر به دنبال کردن موقعیت نیاز نداریم، بهتر است آن را با:

clearWatch()

متوقف کنیم.

اشتباه چهارم: تصور اینکه Latitude و Longitude آدرس هستند

مختصات:

Latitude
Longitude

خودشان آدرس متنی نیستند.

برای تبدیل مختصات به آدرس به یک سرویس Reverse Geocoding نیاز داریم.

اشتباه پنجم: فعال کردن همیشه enableHighAccuracy

دقت بیشتر همیشه به معنی تجربه بهتر نیست.

در برخی شرایط ممکن است دقت بالاتر باعث مصرف بیشتر باتری یا تأخیر بیشتر شود.

بنابراین باید بر اساس نیاز پروژه تصمیم بگیریم.

تمرین عملی اول

یک صفحه HTML بسازید که یک دکمه داشته باشد:

دریافت موقعیت من

با کلیک روی دکمه:

• Latitude را نمایش دهید.

• Longitude را نمایش دهید.

تمرین عملی دوم

تمرین قبلی را تغییر دهید تا مقدار:

accuracy

نیز نمایش داده شود.

مثلاً:

عرض جغرافیایی: ...
طول جغرافیایی: ...
دقت: ... متر

تمرین عملی سوم

برای برنامه خود Error Handler ایجاد کنید.

برای هرکدام از این حالت‌ها پیام متفاوت نمایش دهید:

Permission Denied
Position Unavailable
Timeout

تمرین عملی چهارم

با استفاده از:

watchPosition()

برنامه‌ای بنویسید که موقعیت را دنبال کند.

سپس یک دکمه:

توقف

قرار دهید و با:

clearWatch()

دنبال کردن موقعیت را متوقف کنید.

چالش

یک صفحه با عنوان:

موقعیت من

ایجاد کنید.

صفحه باید شامل موارد زیر باشد:

• یک توضیح کوتاه درباره استفاده از موقعیت

• یک دکمه برای دریافت موقعیت

• نمایش Latitude

• نمایش Longitude

• نمایش Accuracy

• نمایش پیام در هنگام دریافت موقعیت

• مدیریت خطا

• دکمه توقف برای زمانی که از watchPosition() استفاده می‌کنید

ساختار کلی پروژه می‌تواند این‌گونه باشد:

موقعیت من
   │
   ├── دریافت موقعیت
   │
   ├── Latitude
   │
   ├── Longitude
   │
   ├── Accuracy
   │
   ├── پیام خطا
   │
   └── توقف دنبال کردن

نکات مهم این مقاله

در این مقاله یاد گرفتیم:

• Geolocation برای دریافت موقعیت مکانی دستگاه استفاده می‌شود.

• دسترسی به موقعیت نیازمند اجازه کاربر است.

• در مرورگرهای مدرن، Geolocation معمولاً به Secure Context مانند HTTPS نیاز دارد.

• نقطه ورود به API از طریق navigator.geolocation است.

• getCurrentPosition() موقعیت فعلی را دریافت می‌کند.

• watchPosition() تغییرات موقعیت را دنبال می‌کند.

• clearWatch() دنبال کردن موقعیت را متوقف می‌کند.

• latitude عرض جغرافیایی را مشخص می‌کند.

• longitude طول جغرافیایی را مشخص می‌کند.

• accuracy دقت تخمینی موقعیت را مشخص می‌کند.

• enableHighAccuracy برای درخواست دقت بالاتر استفاده می‌شود.

• timeout زمان انتظار برای دریافت موقعیت را کنترل می‌کند.

• maximumAge مشخص می‌کند چه میزان موقعیت Cache شده قابل قبول است.

• دریافت مختصات به معنی دریافت آدرس متنی نیست.

• برای تبدیل مختصات به آدرس معمولاً به Reverse Geocoding نیاز داریم.

• هنگام استفاده از موقعیت مکانی باید حریم خصوصی کاربر را جدی بگیریم.

جمع‌بندی

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

در این مقاله ابتدا با navigator.geolocation آشنا شدیم و سپس getCurrentPosition() را برای دریافت موقعیت فعلی بررسی کردیم. یاد گرفتیم چگونه latitude، longitude و accuracy را استخراج کنیم و با Callback خطا، مشکلاتی مانند رد شدن مجوز، در دسترس نبودن موقعیت و Timeout را مدیریت کنیم.

سپس با گزینه‌های enableHighAccuracy، timeout و maximumAge آشنا شدیم و در ادامه watchPosition() و clearWatch() را برای دنبال کردن و توقف دنبال کردن موقعیت بررسی کردیم.

نکته بسیار مهم این است که Geolocation فقط یک قابلیت فنی نیست؛ بلکه با حریم خصوصی و اطلاعات حساس کاربر ارتباط دارد. بنابراین باید تنها در مواقع ضروری، با اطلاع‌رسانی مناسب و رعایت محدودیت‌های امنیتی مرورگر از آن استفاده کنیم.