👋 رفیق برنامه‌نویس! دنبال ابزارهای خفن برای توسعه‌ای؟

قبل از اینکه بریم سراغ شیرجه زدن تو دنیای جذاب APIهای موقعیت مکانی مرورگر، یه سر به فروشگاه ابزارهای FA-Tools بزن. اونجا کلی چیزای باحال برای پروژه‌هات پیدا می‌کنی که کارتو راه میندازه و سرعتت رو چند برابر می‌کنه! 😉

همین الان کلیک کن و ابزارهاتو بردار: fa-tools.ir/shop/

سوالی داری؟ می‌تونی مستقیم باهامون تماس بگیری: 09202232789

🗺️ نقشه راهنمای سریع: موقعیت مکانی کاربر در یک نگاه! 🚀

با این راهنما، دیگه هیچ چالشی برای نمایش مکان کاربر نداری!

فهرست مطالب

• چرا موقعیت مکانی کاربر برایت مهم است؟
• API Geolocation چیست و چطور کار می‌کند؟
  • چطور رضایت کاربر را بگیریم؟
  • متدهای اصلی Geolocation API
• شروع کدنویسی: گام به گام نمایش موقعیت
  • متد `getCurrentPosition()`: یک بار و برای همیشه!
  • متد `watchPosition()`: ردیابی زنده!
  • مدیریت خطاها: هر اتفاقی ممکنه بیوفته!
  • استفاده از `clearWatch()`: تمیزکاری بعد از کار
• نمایش نقشه: گوگل مپ و OpenStreetMap
  • راه‌اندازی گوگل مپس
  • استفاده از OpenStreetMap
• بهینه‌سازی و نکات پیشرفته
  • دقت و سرعت: هر دو مهمند!
  • امنیت و حریم خصوصی: احترام به کاربر
  • Geocoding معکوس: از مختصات تا آدرس
• عیب‌یابی سریع: مشکلات رایج و راه حل‌ها
• سوالات متداول (FAQ)

چرا موقعیت مکانی کاربر برایت مهم است؟

رفیق، تا حالا به این فکر کردی که چقدر سرویس‌های امروزی به موقعیت مکانی تو وابسته‌اند؟ از اپلیکیشن‌های سفارش غذا و تاکسی گرفته تا شبکه‌های اجتماعی و حتی ابزارهای امنیتی، همه به نوعی با این موضوع درگیرند. وقتی می‌تونی موقعیت کاربر رو بدونی، قابلیت‌های فوق‌العاده‌ای به اپلیکیشن و وب‌سایتت اضافه می‌کنی:

• تجربه کاربری بهتر: کاربر نیاز نداره دستی آدرسشو وارد کنه، خودش پیدا میشه.
• خدمات محلی: رستوران‌ها، فروشگاه‌ها یا رویدادهای نزدیک رو نمایش بده.
• امنیت و شخصی‌سازی: مثلاً احراز هویت دومرحله‌ای بر اساس مکان.
• تحلیل داده: بفهمی کاربران از کجا به سرویست دسترسی دارند.

پس، اگه می‌خوای یه محصول واقعاً کاربردی و امروزی بسازی، بدون شک باید سراغ API‌های موقعیت مکانی مرورگر بری. و نگران نباش، کار خیلی هم سخت نیست!

API Geolocation چیست و چطور کار می‌کند؟

API Geolocation یک قابلیت داخلی در مرورگرهای مدرنه که بهت اجازه میده بدون نیاز به پلاگین یا ابزار اضافی، به مختصات جغرافیایی (عرض و طول جغرافیایی) کاربر دسترسی پیدا کنی. این مختصات از طریق منابع مختلفی مثل GPS، وای‌فای، دکل‌های مخابراتی یا حتی IP Address کاربر به دست میان. چیزی که مهمه اینه که مرورگر همه این پیچیدگی‌ها رو برات هندل می‌کنه و فقط یه آبجکت آماده بهت میده.

این API بخشی از آبجکت navigator در جاوااسکریپته و تقریباً تو همه مرورگرهای جدید (کروم، فایرفاکس، سافاری، اج و…) پشتیبانی میشه. برای اینکه مطمئن بشی مرورگر کاربر این قابلیت رو داره، می‌تونی یه چک ساده انجام بدی:

if ("geolocation" in navigator) {
    console.log("مرورگر از Geolocation API پشتیبانی می‌کند.");
} else {
    console.log("متاسفانه مرورگر شما این قابلیت را ندارد.");
}
    

چطور رضایت کاربر را بگیریم؟

یکی از مهم‌ترین نکات موقع کار با Geolocation API، مسئله حریم خصوصی کاربره. مرورگرها کاملاً به این موضوع حساسند و هرگز بدون اجازه صریح کاربر، موقعیتشو به شما نمیدن. وقتی اولین بار درخواست موقعیت مکانی رو میدی، یه پاپ‌آپ از طرف مرورگر ظاهر میشه که از کاربر می‌پرسه آیا اجازه میده مواقعیتش رو به وب‌سایت تو بده یا نه. اگر کاربر اجازه نده (یا بلاک کنه)، تو دیگه به موقعیتش دسترسی نداری. پس همیشه باید حواست به این نکته باشه و کدتو طوری بنویسی که این سناریو رو هم مدیریت کنه.

متدهای اصلی Geolocation API

Geolocation API دو تا متد اصلی برای گرفتن موقعیت مکانی داره که بسته به نیازت ازشون استفاده می‌کنی:

• navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options)
  این متد فقط یک بار موقعیت مکانی فعلی کاربر رو می‌گیره و بعدش کارش تموم میشه. بهترین گزینه برای زمانی که فقط یه بار نیاز به مکان کاربر داری (مثلاً برای نمایش نزدیک‌ترین فروشگاه‌ها در لحظه لود صفحه).
• navigator.geolocation.watchPosition(successCallback, errorCallback, options)
  این متد موقعیت مکانی کاربر رو به صورت پیوسته ردیابی می‌کنه و هر وقت موقعیت کاربر تغییر کنه (یا دقت بهتری پیدا بشه)، successCallback رو صدا میزنه. عالی برای اپلیکیشن‌های مسیریابی یا ردیابی.

هر دو متد سه تا آرگومان می‌گیرن:

1. `successCallback` (Required): یه فانکشن که وقتی موقعیت مکانی با موفقیت دریافت شد، فراخوانی میشه. یه آبجکت Position (که شامل مختصات جغرافیاییه) بهش پاس داده میشه.
2. `errorCallback` (Optional): یه فانکشن که اگه خطایی در دریافت موقعیت پیش اومد (مثلاً کاربر اجازه نداد یا GPS در دسترس نبود)، فراخوانی میشه. یه آبجکت PositionError بهش پاس داده میشه.
3. `options` (Optional): یه آبجکت با تنظیمات اختیاری برای دقت، زمان انتظار و…

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

بریم سراغ کدنویسی واقعی! فرض می‌کنیم یه div با id="location-info" داریم که می‌خوایم اطلاعات رو توش نمایش بدیم.

متد `getCurrentPosition()`: یک بار و برای همیشه!

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

const locationInfo = document.getElementById('location-info');

function showPosition(position) {
    const latitude = position.coords.latitude;
    const longitude = position.coords.longitude;
    locationInfo.innerHTML = `
        <p><strong>عرض جغرافیایی:</strong> ${latitude}</p>
        <p><strong>طول جغرافیایی:</strong> ${longitude}</p>
        <p><strong>دقت (متر):</strong> ${position.coords.accuracy}</p>
    `;
    console.log("موقعیت فعلی:", latitude, longitude);
}

function showError(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            locationInfo.innerHTML = "<p>کاربر اجازه دسترسی به موقعیت مکانی را نداد.</p>";
            break;
        case error.POSITION_UNAVAILABLE:
            locationInfo.innerHTML = "<p>اطلاعات موقعیت مکانی در دسترس نیست.</p>";
            break;
        case error.TIMEOUT:
            locationInfo.innerHTML = "<p>درخواست موقعیت مکانی منقضی شد.</p>";
            break;
        case error.UNKNOWN_ERROR:
            locationInfo.innerHTML = "<p>خطای ناشناس.</p>";
            break;
    }
    console.error("خطا در دریافت موقعیت:", error);
}

const options = {
    enableHighAccuracy: true, // دقت بلایی
    timeout: 5000,           // 5 ثانیه صبر کن
    maximumAge: 0            // کش موقعیت قبلی رو استفاده نکن
};

if ("geolocation" in navigator) {
    navigator.geolocation.getCurrentPosition(showPosition, showError, options);
} else {
    locationInfo.innerHTML = "<p>مرورگر شما از Geolocation API پشتیبانی نمی‌کند.</p>";
}
    

همونطور که می‌بینی، تنظیمات options خیلی مهمن. enableHighAccuracy: true سعی می‌کنه با استفاده از GPS موقعیت دقیق‌تری بده (که ممکنه زمان‌برتر و پرمصرف‌تر باشه). timeout یعنی اگه تو این مدت نتونست مکان رو پیدا کنه، خطا بده. و maximumAge: 0 یعنی هر بار موقعیت جدید بگیره و از اطلاعات کش شده استفاده نکنه.

متد `watchPosition()`: ردیابی زنده!

اگه نیاز داری موقعیت کاربر رو لحظه به لحظه ردیابی کنی، مثلاً برای یه نقشه زنده یا اپلیکیشن تناسب اندام، watchPosition() بهترین دوستته. این متد یه watchId برمی‌گردونه که بعداً می‌تونی باهاش ردیابی رو متوقف کنی.

const locationInfo = document.getElementById('location-info');
let watchID; // برای ذخیره شناسه ردیابی

function showLivePosition(position) {
    const latitude = position.coords.latitude;
    const longitude = position.coords.longitude;
    locationInfo.innerHTML = `
        <p><strong>موقعیت زنده شما:</strong></p>
        <p><strong>عرض جغرافیایی:</strong> ${latitude}</p>
        <p><strong>طول جغرافیایی:</strong> ${longitude}</p>
        <p><strong>دقت (متر):</strong> ${position.coords.accuracy}</p>
        <button onclick="stopTracking()" style="background-color: #dc3545; color: white; padding: 10px 15px; border: none; border-radius: 5px; cursor: pointer; margin-top: 15px;">توقف ردیابی</button>
    `;
    console.log("موقعیت زنده:", latitude, longitude);
}

function stopTracking() {
    if (watchID) {
        navigator.geolocation.clearWatch(watchID);
        locationInfo.innerHTML += "<p>ردیابی موقعیت متوقف شد.</p>";
        watchID = null; // برای جلوگیری از توقف دوباره
        console.log("ردیابی متوقف شد.");
    }
}

// استفاده از همان تابع showError و options از مثال قبلی
// ... (error handling and options from getCurrentPosition example) ...

if ("geolocation" in navigator) {
    watchID = navigator.geolocation.watchPosition(showLivePosition, showError, options);
    locationInfo.innerHTML = "<p>در حال دریافت موقعیت زنده...</p>";
} else {
    locationInfo.innerHTML = "<p>مرورگر شما از Geolocation API پشتیبانی نمی‌کند.</p>";
}
    

اینجا ما یه دکمه “توقف ردیابی” هم اضافه کردیم که به کاربر اجازه میده خودش ردیابی رو قطع کنه. همیشه این امکان رو به کاربر بده که ردیابی رو کنترل کنه.

مدیریت خطاها: هر اتفاقی ممکنه بیوفته!

همونطور که دیدی، تو کدها ما یه تابع showError تعریف کردیم که انواع خطاها رو مدیریت می‌کنه. این خیلی مهمه، چون همیشه کاربر ممکنه اجازه نده یا تو محیطی باشه که GPS درست کار نکنه. چهار نوع خطای اصلی داریم:

• PERMISSION_DENIED (1): کاربر اجازه دسترسی رو رد کرده.
• POSITION_UNAVAILABLE (2): دستگاه نتونسته موقعیت مکانی رو پیدا کنه.
• TIMEOUT (3): مدت زمان تعیین شده برای یافتن موقعیت تموم شده.
• UNKNOWN_ERROR (0): یه خطای ناشناخته پیش اومده.

با برسی کد خطا، می‌تونی پیام‌های معنی‌دارتری به کاربر نشون بدی و تجربه‌شو بهتر کنی. مثلاً به جای “خطا” بگی “شما اجازه دسترسی به موقعیت مکانی را رد کرده‌اید.”

استفاده از `clearWatch()`: تمیزکاری بعد از کار

وقتی دیگه نیازی به ردیابی مداوم موقعیت مکانی کاربر نداری (مثلاً کاربر از صفحه‌ای که ردیابی در آن فعال بود، خارج شده یا خودش دکمه توقف رو زده)، حتماً باید ردیابی رو با navigator.geolocation.clearWatch(watchID) متوقف کنی. این کار هم مصرف باتری کاربر رو کم می‌کنه و هم از ارسال بی‌مورد درخواست‌های شبکه جلوگیری می‌کنه. یادت نره که watchID رو که از watchPosition گرفتی، بهش پاس بدی.

نمایش نقشه: گوگل مپ و OpenStreetMap

گرفتن مختصات عالیه، ولی برای کاربر چیزی که واقعاً جذابه، دیدن این نقطه روی نقشه است. برای نمایش نقشه، معمولاً از کتابخانه‌های نقشه مثل Google Maps API یا Leaflet.js (برای OpenStreetMap) استفاده می‌کنیم. اینجا یه بررسی کلی از هر دو روش داریم:

راه‌اندازی گوگل مپس

گوگل مپس قدرتمندترین و پرکاربردترین راه حل برای نمایش نقشه است. نیاز به API Key داری که باید از کنسول توسعه‌دهندگان گوگل بگیری. بعدش می‌تونی نقشه‌تو با جاوااسکریپت به صفحه اضافه کنی:

<!-- HTML -->
<div id="map" style="height: 400px; width: 100%;"></div>

<!-- JavaScript -->
<script>
    let map;
    let marker;

    function initMap(latitude, longitude) {
        const myLatLng = { lat: latitude, lng: longitude };

        map = new google.maps.Map(document.getElementById("map"), {
            zoom: 15,
            center: myLatLng,
        });

        marker = new google.maps.Marker({
            position: myLatLng,
            map,
            title: "موقعیت شما",
        });
    }

    function updateMapPosition(latitude, longitude) {
        const newLatLng = { lat: latitude, lng: longitude };
        map.setCenter(newLatLng);
        marker.setPosition(newLatLng);
    }

    // این تابع رو با مختصاتی که از Geolocation API میگیری فراخوانی کن
    // مثال:
    // navigator.geolocation.getCurrentPosition(
    //     (position) => {
    //         initMap(position.coords.latitude, position.coords.longitude);
    //     },
    //     showError,
    //     options
    // );
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&callback=initMap"></script>
    

یادت نره YOUR_API_KEY_HERE رو با کلید واقعی API خودت جایگزین کنی و تابع initMap رو بعد از دریافت اولین موقعیت مکانی فراخوانی کنی. برای به‌روزرسانی زنده هم می‌تونی از updateMapPosition استفاده کنی.

استفاده از OpenStreetMap

اگه دنبال یه راه حل رایگان و متن‌باز هستی، OpenStreetMap و کتابخانه Leaflet.js یه ترکیب فوق‌العاده‌اند. این ترکیب هم برای صفحه اصلی و هم برای پروژه‌های شخصی یا تجاری که نمی‌خوان هزینه API Key دن عالیه. برای شروع، Leaflet رو به پروژه‌ت اضافه می‌کنی:

<!-- HTML -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<div id="leaflet-map" style="height: 400px; width: 100%;"></div>

<!-- JavaScript -->
<script>
    let leafletMap;
    let leafletMarker;

    function initLeafletMap(latitude, longitude) {
        leafletMap = L.map('leaflet-map').setView([latitude, longitude], 13);

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(leafletMap);

        leafletMarker = L.marker([latitude, longitude]).addTo(leafletMap)
            .bindPopup("موقعیت شما").openPopup();
    }

    function updateLeafletMapPosition(latitude, longitude) {
        const newLatLng = L.latLng(latitude, longitude);
        leafletMap.setView(newLatLng, leafletMap.getZoom());
        leafletMarker.setLatLng(newLatLng).bindPopup("موقعیت جدید شما").openPopup();
    }

    // این تابع رو با مختصاتی که از Geolocation API میگیری فراخوانی کن
    // مثال:
    // navigator.geolocation.getCurrentPosition(
    //     (position) => {
    //         initLeafletMap(position.coords.latitude, position.coords.longitude);
    //     },
    //     showError,
    //     options
    // );
</script>
    

مزیت Leaflet و OpenStreetMap در سادگی و عدم نیاز به API Key برای استفاده‌های استاندارد است. برای پروژه‌هایی که تماس با تیم فنی و هزینه‌های اضافی براتون مهم نیست، می‌تونه گزینه مناسبی باشه.

بهینه‌سازی و نکات پیشرفته

حالا که پایه کار رو یاد گرفتی، بریم سراغ چند تا نکته حرفه‌ای‌تر که بهت کمک می‌کنه کدی بهینه‌تر و مطمئن‌تر بنویسی.

دقت و سرعت: هر دو مهمند!

یادت باشه که همیشه یه تعادل بین دقت موقعیت مکانی و سرعت دریافتش وجود داره. گزینه‌های enableHighAccuracy، timeout و maximumAge تو آبجکت options رو دیدی؟

باید بر اساس نیاز اپلیکیشنت تصمیم بگیری. برای یه اپلیکیشن تاکسی، enableHighAccuracy: true ضروریه، ولی برای یه سایت خبری که فقط میخواد شهر کاربر رو بدونه، میشه از false استفاده کرد.

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

بارها و بارها تأکید کردم، حریم خصوصی کاربر خط قرمز ماست! همیشه به این نکات دقت کن:

• فقط HTTPS: بدون HTTPS، Geolocation API کار نمی‌کنه.
• اجازه کاربر: بدون اجازه، هیچ وقت نمی‌تونی موقعیت کاربر رو بگیری.
• شفافیت: به کاربر توضیح بده چرا به موقعیتش نیاز داری.
• داده‌های کمتر: فقط اطلاعاتی که واقعاً نیاز داری رو ذخیره کن.
• `clearWatch` فراموش نشه: بعد از اتمام کار، ردیابی رو متوقف کن.

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

Geocoding معکوس: از مختصات تا آدرس

گاهی اوقات فقط مختصات عرض و طول جغرافیایی کافی نیست و می‌خوای آدرس واقعی کاربر رو بدونی (مثلاً برای پر کردن خودکار فرم آدرس). اینجاست که “Geocoding معکوس” یا Reverse Geocoding به کار میاد. Reverse Geocoding به معنی تبدیل مختصات جغرافیایی به یک آدرس قابل خواندن برای انسانه (مثل خیابان، شهر، کد پستی).

برای این کار، معمولاً از API‌های سرویس‌های نقشه مثل Google Geocoding API یا OpenStreetMap Nominatim استفاده میشه. اینها درخواست HTTP می‌گیرن و یه پاسخ JSON با جزئیات آدرس برمی‌گردونن. این قابلیت‌ها به تنهایی جزئی از Geolocation API مرورگر نیستند و باید جداگانه ازشون استفاده کنی. نمونه‌ای از درخواست به OpenStreetMap Nominatim:

async function reverseGeocode(latitude, longitude) {
    const url = `https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${latitude}&lon=${longitude}`;
    try {
        const response = await fetch(url);
        const data = await response.json();
        console.log("آدرس:", data.display_name);
        return data.display_name;
    } catch (error) {
        console.error("خطا در Reverse Geocoding:", error);
        return "آدرس پیدا نشد.";
    }
}

// مثال استفاده:
// navigator.geolocation.getCurrentPosition(
//     async (position) => {
//         const address = await reverseGeocode(position.coords.latitude, position.coords.longitude);
//         console.log("آدرس کامل کاربر:", address);
//         document.getElementById('location-info').innerHTML += `<p><strong>آدرس احتمالی:</strong> ${address}</p>`;
//     },
//     showError,
//     options
// );
    

اینجا از fetch API استفاده کردیم تا یک درخواست به سرویس Nominatim بفرستیم و آدرس رو دریافت کنیم. این نمونه هم می‌تونه جزو کدهای آماده و اسنیپت ارزشمندت باشه.

عیب‌یابی سریع: مشکلات رایج و راه حل‌ها

ممکنه تو مسیر کار با Geolocation API به مشکلاتی بخوری. نگران نباش، اینا رایج‌ترین‌هاشونن و راه حل دارن:

• مشکل: درخواست موقعیت مکانی کار نمی‌کنه و هیچ پاپ‌اپی ظاهر نمیشه.راه حل: اول از همه، مطمئن شو سایتت روی HTTPS داره کار می‌کنه، نه HTTP. روی localhost مشکلی نیست، ولی روی هاستینگ باید SSL فعال باشه. همچنین، ممکنه مرورگر کاربر قبلاً دسترسی رو بلاک کرده باشه؛ از کاربر بخواه تنظیمات سایت در مرورگرش رو چک کنه.
• مشکل: خطای PERMISSION_DENIED دریافت می‌کنم.راه حل: این یعنی کاربر اجازه دسترسی رو نداده یا بلاک کرده. به کاربر یه پیام دوستانه نشون بده و ازش بخواه که اگه می‌خواد از قابلیت‌های مبتنی بر موقعیت استفاده کنه، اجازه دسترسی رو بده. می‌تونی لینکی به راهنمای مرورگرش برای فعال‌سازی دسترسی موقعیت مکانی هم بدی.
• مشکل: خطای TIMEOUT دریافت می‌کنم.راه حل: این یعنی مرورگر تو مدت زمان timeout نتونسته موقعیت دقیق رو پیدا کنه. شاید اینترنت کاربر ضعیفه، یا تو محیطی بسته با سیگنال GPS ضعیفه. می‌تونی timeout رو بیشتر کنی، یا enableHighAccuracy رو false کنی تا با دقت کمتر ولی سریع‌تر، موقعیت رو پیدا کنه.
• مشکل: دقت موقعیت مکانی خیلی پایینه.راه حل: مطمئن شو enableHighAccuracy رو true قرار دادی. همچنین، از کاربر بخواه که به فضای باز بره یا وای‌فای و GPS دستگاهش رو روشن کنه تا دقت تغیرات کنه. گاهی اوقات این مشکل به دلیل محدودیت‌های سخت‌افزاری یا محیطی دستگاه کاربره و کاری از دست کد جاوااسکریپت بر نمیاد.
• مشکل: watchPosition دائم فایر میشه و مصرف باتری زیاده.راه حل: حتماً از clearWatch() استفاده کن تا ردیابی رو در زمان مناسب متوقف کنی. مثلاً وقتی کاربر از صفحه خارج میشه (با استفاده از Event Listener برای beforeunload) یا وقتی نیازی به ردیابی مداوم نداری.

سوالات متداول (FAQ)

آیا Geolocation API دقیق است؟

دقت Geolocation API به عوامل زیادی بستگی دارد، از جمله دستگاه کاربر (داشتن GPS داخلی)، محیط (فضای باز یا بسته)، وجود شبکه‌های Wi-Fi نزدیک و حتی مرورگر مورد استفاده. با فعال کردن enableHighAccuracy: true می‌توانید دقت بالاتری را درخواست کنید، اما این همیشه تضمین‌کننده دقت مطلق نیست و ممکن است زمان‌برتر باشد.

آیا برای استفاده از Geolocation API به اینترنت نیاز است؟

بله، در بیشتر موارد برای شناسایی دقیق موقعیت (مخصوصاً با استفاده از وای‌فای یا IP) و همچنین برای نمایش نقشه (مثل Google Maps یا OpenStreetMap) به اتصال اینترنت نیاز است. اگرچه GPS در دستگاه‌هایی که این قابلیت را دارند می‌تواند بدون اینترنت هم کار کند، اما مرورگر معمولاً برای تجمیع داده‌ها و ارائه بهترین نتیجه، به اینترنت متکی است.

چگونه می‌توانم موقعیت مکانی کاربر را در پس‌زمینه ردیابی کنم؟

Geolocation API مرورگر به طور مستقیم برای ردیابی در پس‌زمینه (زمانی که کاربر از وب‌سایت شما خارج شده یا مرورگرش بسته است) طراحی نشده است. برای این منظور، نیاز به استفاده از Service Workers یا APIهای مخصوص پلتفرم (مثل APIهای بومی اندروید یا iOS) دارید که فراتر از حوزه مستقیم Geolocation API مرورگر است. Geolocation API فقط زمانی کار می‌کند که صفحه وب شما در مرورگر فعال باشد.

آیا استفاده از Geolocation API رایگان است؟

بله، استفاده از خود Geolocation API مرورگر کاملاً رایگان است. اما اگر قصد دارید از سرویس‌های نقشه جانبی (مثل Google Maps API) برای نمایش موقعیت روی نقشه استفاده کنید، ممکن است نیاز به API Key و پرداخت هزینه (بر اساس میزان مصرف) داشته باشید. گزینه‌های متن‌باز مانند OpenStreetMap (با کتابخانه Leaflet.js) معمولاً رایگان هستند.

چگونه می‌توانم از Geolocation API در موبایل استفاده کنم؟

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

📌 خلاصه راهنمای سریع (اینفوگرافیک متنی)

فهرست مطالب

• مقدمه و اهمیت موقعیت مکانی
• Geolocation API چیست و چگونه کار می‌کند؟
• آموزش گام‌به‌گام پیاده‌سازی دریافت موقعیت
• نمایش موقعیت مکانی روی نقشه
• مقایسه روش‌های موقعیت‌یابی
• عیب‌یابی سریع و رفع خطاها
• سوالات متداول (FAQ)

به دلیل حفظ حریم خصوصی، Geolocation API تنها در بستر کدهای امن HTTPS فعال می‌شود. روی پروتکل HTTP معمولی (به جز محیط localhost برای تست پروژه‌ها)، مرورگر اجازه دسترسی به لوکیشن را صادر نخواهد کرد.

❌ خطا: User denied Geolocation (رد دسترسی از طرف کاربر)

علت: کاربر هنگام باز شدن پاپ‌آپ مرورگر، گزینه Block یا عدم اجازه را انتخاب کرده است.

راه‌حل: با بررسی کدهای خطا (Error Code 1)، یک پیام محترمانه در صفحه وب نشان دهید و از او بخواهید از تنظیمات مرورگر خود مجدداً دسترسی لوکیشن را فعال کند.

⚠️ خطا: Origin does not have permission (عدم دسترسی به دلیل HTTPS)

علت: وب‌سایت شما روی پروتکل ناامن HTTP اجرا می‌شود.

راه‌حل: باید گواهینامه SSL فعال کرده و آدرس سایت را به HTTPS تغییر دهید.

✔️ رفع خطای دیرکرد لود (Timeout Error)

علت: دستگاه کاربر به دلیل سرعت پایین اینترنت یا عدم اتصال به GPS، پاسخی به مرورگر باز نمی‌گرداند.

راه‌حل: تنظیمات آپشن‌های Geolocation را فعال کنید و مقدار timeout تعریف کنید:

navigator.geolocation.getCurrentPosition(success, error, {timeout: 10000});