دریافت موقعیت مکانی (Current Location) کاربر در Blazor

07:09:00 AM - 1404/01/24

من یه پروژه Blazor Webassembly دارم , میخوام توی صفحه ای از پروژه , لوکیشن کاربر رو بگیرم , کد هایی که توی اینترنت ارایه شده به دلیل تغییرات گوگل درست کار نمیکنند.

حالا مسیری که من رفتم :

اول سمت Client Side پروژه تون (یا Blazor App) یه فایل جاوا اسکریپت توی wwwroot پوشه js بسازید با این کد ها :

// File: wwwroot/js/geolocation.js
window.blazorGeolocation = {
    getCurrentPosition: function () {
        return new Promise((resolve, reject) => {
            if (!navigator.geolocation) {
                reject("مرورگر شما از دریافت موقعیت مکانی پشتیبانی نمی کند.");
                return;
            }

            navigator.geolocation.getCurrentPosition(
                position => {
                    // در صورت موفقیت، موقعیت و یک پیام شامل دقت (اگر موجود باشد) را برگردان
                    resolve({
                        success: true,
                        latitude: position.coords.latitude,
                        longitude: position.coords.longitude,
                        message: `موقعیت دریافت شد.${position.coords.accuracy ? ' دقت تخمینی: ' + position.coords.accuracy.toFixed(0) + ' متر' : ''}`
                    });
                },
                error => {
                    let errorMessage = "خطای نامشخص در دریافت موقعیت.";
                    switch (error.code) {
                        case error.PERMISSION_DENIED:
                            errorMessage = "دسترسی به موقعیت مکانی توسط کاربر رد شد.";
                            break;
                        case error.POSITION_UNAVAILABLE:
                            // پیام عمومی تر: مشکل می تواند از GPS، شبکه یا سرویس های پشتیبان باشد
                            errorMessage = "اطلاعات موقعیت مکانی در حال حاضر در دسترس نیست. لطفاً از فعال بودن GPS یا سرویس موقعیت یابی دستگاه اطمینان حاصل کنید و دوباره تلاش کنید.";
                            break;
                        case error.TIMEOUT:
                            errorMessage = "زمان درخواست برای دریافت موقعیت به پایان رسید. ممکن است سیگنال ضعیف باشد یا سرویس موقعیت یابی پاسخ ندهد.";
                            break;
                    }
                    reject(errorMessage); // فقط پیام خطا را برگردان
                },
                {
                    enableHighAccuracy: true, // درخواست دقت بالا (برای استفاده از GPS در صورت امکان)
                    timeout: 20000,          // افزایش زمان انتظار به 20 ثانیه
                    maximumAge: 0            // دریافت موقعیت جدید
                }
            );
        });
    }
};

بعد توی صفحه index تون هم مسیر این جاوا اسکریپت رو اضافه کنید:

wwwroot > index.html :
<!DOCTYPE html>
<html lang="fa" dir="rtl">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Safir</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="Safir.Client.styles.css" rel="stylesheet" />
    <link href="manifest.json" rel="manifest" />
    <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
    <link rel="apple-touch-icon" sizes="192x192" href="icon-192.png" />
</head>

<body>
	//بقیه کد ها. ...
    <script src="https://static.neshan.org/sdk/neshan-sdk-latest.min.js"></script>
    <script src="_framework/blazor.webassembly.js"></script>
    <script src="_content/MudBlazor/MudBlazor.min.js"></script>

    <script src="js/geolocation.js"></script> //اینجا......
    <script>navigator.serviceWorker.register('service-worker.js');</script>
</body>
</html>

بعد برای اون صفحه ای که میخواید داخل لوکیشن رو بگیرید این کد رو قرار بدید:

//اول یه فایل جاوا اسکریپت توی wwwroot پوشه js بسازید با این کد ها :

// File: wwwroot/js/geolocation.js
window.blazorGeolocation = {
    getCurrentPosition: function () {
        return new Promise((resolve, reject) => {
            if (!navigator.geolocation) {
                reject("مرورگر شما از دریافت موقعیت مکانی پشتیبانی نمی کند.");
                return;
            }

            navigator.geolocation.getCurrentPosition(
                position => {
                    // در صورت موفقیت، موقعیت و یک پیام شامل دقت (اگر موجود باشد) را برگردان
                    resolve({
                        success: true,
                        latitude: position.coords.latitude,
                        longitude: position.coords.longitude,
                        message: `موقعیت دریافت شد.${position.coords.accuracy ? ' دقت تخمینی: ' + position.coords.accuracy.toFixed(0) + ' متر' : ''}`
                    });
                },
                error => {
                    let errorMessage = "خطای نامشخص در دریافت موقعیت.";
                    switch (error.code) {
                        case error.PERMISSION_DENIED:
                            errorMessage = "دسترسی به موقعیت مکانی توسط کاربر رد شد.";
                            break;
                        case error.POSITION_UNAVAILABLE:
                            // پیام عمومی تر: مشکل می تواند از GPS، شبکه یا سرویس های پشتیبان باشد
                            errorMessage = "اطلاعات موقعیت مکانی در حال حاضر در دسترس نیست. لطفاً از فعال بودن GPS یا سرویس موقعیت یابی دستگاه اطمینان حاصل کنید و دوباره تلاش کنید.";
                            break;
                        case error.TIMEOUT:
                            errorMessage = "زمان درخواست برای دریافت موقعیت به پایان رسید. ممکن است سیگنال ضعیف باشد یا سرویس موقعیت یابی پاسخ ندهد.";
                            break;
                    }
                    reject(errorMessage); // فقط پیام خطا را برگردان
                },
                {
                    enableHighAccuracy: true, // درخواست دقت بالا (برای استفاده از GPS در صورت امکان)
                    timeout: 20000,          // افزایش زمان انتظار به 20 ثانیه
                    maximumAge: 0            // دریافت موقعیت جدید
                }
            );
        });
    }
};

بعد توی صفحه index تون هم مسیر این جاوا اسکریپت رو اضافه کنید

wwwroot > index.html :
<!DOCTYPE html>
<html lang="fa" dir="rtl">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Safir</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="Safir.Client.styles.css" rel="stylesheet" />
    <link href="manifest.json" rel="manifest" />
    <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
    <link rel="apple-touch-icon" sizes="192x192" href="icon-192.png" />
</head>

<body>
	//بقیه کد ها. ...
    <script src="https://static.neshan.org/sdk/neshan-sdk-latest.min.js"></script>
    <script src="_framework/blazor.webassembly.js"></script>
    <script src="_content/MudBlazor/MudBlazor.min.js"></script>

    <script src="js/geolocation.js"></script> //اینجا......
    <script>navigator.serviceWorker.register('service-worker.js');</script>
</body>
</html>

بعد برای اون صفحه ای که میخواید داخل لوکیشن رو بگیرید این کد رو قرار بدید:
@code {
 private async Task FetchAndSetCurrentLocation()
        {
            isFetchingLocation = true;
            try
            {
                var result = await JSRuntime.InvokeAsync<GeolocationResult>("blazorGeolocation.getCurrentPosition");

                if (result.Success && result.Latitude.HasValue && result.Longitude.HasValue)
                {
                    customerModel.Latitude = result.Latitude.Value;
                    customerModel.Longitude = result.Longitude.Value;
                    // نمایش پیام موفقیت (که ممکن است شامل دقت باشد)
                    //"موقعیت مکانی فعلی دریافت شد."
                }
                else
                {
                    // اگر success false باشد (که بعید است با JS فعلی رخ دهد)
                    customerModel.Latitude = null;
                    customerModel.Longitude = null;
                    //خطا در دریافت موقعیت (نتیجه ناموفق).
                }
            }
            catch (JSException jsEx) // گرفتن خطاهای reject شده از JS
            {
                customerModel.Latitude = null;
                customerModel.Longitude = null;
                //$"خطا در دریافت موقعیت: {jsEx.Message}", Severity.Error // نمایش پیام خطای JS
            }
            catch (Exception ex) // گرفتن خطاهای دیگر C#
            {
                customerModel.Latitude = null;
                customerModel.Longitude = null;
                //$"خطای غیرمنتظره: {ex.Message}", Severity.Error
            }
            finally
            {
                isFetchingLocation = false;
            }
        }
}

حالا نکته جالبش اینجاست که با VPN روشن لوکشین وی پی ان تون رو میده , با VPN خاموش , خطای زیر رو میده :

اگر هم این تنظیم رو انجام بدید کلا لوکیشن رو غلط میزنه : enableHighAccuracy: false

توی بررسی هایی که انجام دادم , نوشته بودند برای دقت در لوکیشن باید Google Cloud Console → Geolocation API رو بگیرید که 300 دلار قیمت اون هست !

سرویس های دیگه هم مثل MapBox کلا تحریمه , بقیه شون هم میان لوکیشنه شرکت مخابراتی رو میزنن مثل `https://api.ipgeolocation.io/ipgeo?apiKey=${apiKey}` آیا راه حل دیگه ای مد نظرتون هست ؟

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

اصلاحیه :

لینک سمپل : Download

توی صفحه Counter روی دکمه Get Current Location بزنید , حتما با VPN روشن و خاموش تست کنید ,

سرویس نشان هم هست که خطا داشت برای من : https://platform.neshan.org/panel/panel

ویرایش شده در یکشنبه ۲۴ فروردین ۱۴۰۴ ساعت ۱۸:۲۲:۴۴

به این سوال امتیاز بدهید 0 تعداد بازدید این سوال : 42

3 نظر

hamid_b : یه سوال داشتم از شما. برای دریافت موقعیت مگه نباید gps داشته باشیم ؟ مثلا تو گوشی موبایل باید gps رو روشن کنیم تا موقعیت رو به ما بده. تو لپ تاپ میشه بدون داشتن gps موقعیت رو پیدا کرد ؟

حذف امتیاز کاربر : 499 رتبه کاربر : 4 تاریخ ثبت : ۰۹:۱۵ ۱۴۰۴/۰۱/۲۴

fateme : ای کاش کدها رو در یک پروژه سمپل قرار می دادید تا بتونیم تست کنیم. موضوع خیلی خوبیه

حذف امتیاز کاربر : 1589 رتبه کاربر : 2 تاریخ ثبت : ۰۳:۳۶ ۱۴۰۴/۰۱/۲۴

mojtabahakimian : یه سمپل کوچیک گذاشتم , ظاهرا برای دسکتاپ گر GPS نداشته باشه میره سراغ لوکیشن IP

حذف امتیاز کاربر : 155 رتبه کاربر : 9 تاریخ ثبت : ۱۴۰۴/۰۱/۲۴

ادامه نظرات ...

آموزشهای پرطرفدار