دسته بندی ها
07:09 1404/01/24

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

من یه پروژه 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

ویرایش شده در جمعه 26 اردیبهشت 1404 ساعت 18:43:06
مشخصات سوال کننده :
کاربر : mojtabahakimian     امتیاز کاربر : 155     رتبه کاربر : 10
دسته بندی : Blazor Asp.net Core
به این سوال امتیاز بدهید    0
تعداد بازدید این سوال : 453
5 نظر
hamid_b : یه سوال داشتم از شما. برای دریافت موقعیت مگه نباید gps داشته باشیم ؟ مثلا تو گوشی موبایل باید gps رو روشن کنیم تا موقعیت رو به ما بده. تو لپ تاپ میشه بدون داشتن gps موقعیت رو پیدا کرد ؟
امتیاز کاربر : 518   رتبه کاربر : 4   تاریخ ثبت : 09:15 1404/01/24
حذف
fateme : ای کاش کدها رو در یک پروژه سمپل قرار می دادید تا بتونیم تست کنیم. موضوع خیلی خوبیه
امتیاز کاربر : 1635   رتبه کاربر : 2   تاریخ ثبت : 03:36 1404/01/24
حذف
mojtabahakimian : یه سمپل کوچیک گذاشتم , ظاهرا برای دسکتاپ گر GPS نداشته باشه میره سراغ لوکیشن IP
امتیاز کاربر : 155   رتبه کاربر : 10   تاریخ ثبت : 06:44 1404/01/24
حذف
saedbfd : فایلی که قرار دادید دانلود نمیشه جهت تست و رفع اشکال
امتیاز کاربر : 1664   رتبه کاربر : 1   تاریخ ثبت : 03:05 1404/01/26
حذف
fateme : متاسفانه لینک سورسی که قرار دادید مشکل داره و نمیشه دانلود کرد
امتیاز کاربر : 1635   رتبه کاربر : 2   تاریخ ثبت : 12:06 1404/01/27
حذف
ادامه نظرات ...
هوش مصنوعی

پاسخ هوش مصنوعی

برای دریافت موقعیت مکانی کاربر در Blazor WebAssembly، شما به کد جاوا اسکریپت و همچنین کد C# در بخش Razor نیاز دارید. در اینجا مراحل کامل را دنبال می کنید:

ابتدا فایل جاوا اسکریپت را در مسیر wwwroot/js/geolocation.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:
                            errorMessage = "اطلاعات موقعیت مکانی در حال حاضر در دسترس نیست. لطفاً از فعال بودن GPS یا سرویس موقعیت یابی دستگاه اطمینان حاصل کنید و دوباره تلاش کنید.";
                            break;
                        case error.TIMEOUT:
                            errorMessage = "زمان درخواست برای دریافت موقعیت به پایان رسید. ممکن است سیگنال ضعیف باشد یا سرویس موقعیت یابی پاسخ ندهد.";
                            break;
                    }
                    reject(errorMessage); // فقط پیام خطا را برگردان
                },
                {
                    enableHighAccuracy: true, // درخواست دقت بالا (برای استفاده از GPS در صورت امکان)
                    timeout: 20000,          // افزایش زمان انتظار به 20 ثانیه
                    maximumAge: 0            // دریافت موقعیت جدید
                }
            );
        });
    }
};

سپس، در فایل wwwroot/index.html، این کد را برای وارد کردن فایل جاوا اسکریپت به <body> اضافه کنید:

<script src="js/geolocation.js"></script>

حالا کد C# زیر را در صفحه مورد نظر خود قرار دهید تا موقعیت جغرافیایی کاربر را بگیرید:

@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
         {
             customerModel.Latitude = null;
             customerModel.Longitude = null;
         }
     }
     catch (JSException jsEx)
     {
         customerModel.Latitude = null;
         customerModel.Longitude = null;
     }
     catch (Exception ex)
     {
         customerModel.Latitude = null;
         customerModel.Longitude = null;
     }
     finally
     {
         isFetchingLocation = false;
     }
}

لطفاً برای دریافت موقعیت مکانی، این کد را در قسمت دکمه های خود در Razor component قرار دهید و عملکرد آن را تست کنید. توجه داشته باشید که ممکن است با VPN روشن یا خاموش، نتایج مختلفی دریافت کنید.

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

به این پاسخ امتیاز بدهید    0
امتیاز: - رتبه: -
آخرین سوالات ثبت ‌شده
سوالات مرتبط
آموزش های پرطرفدار
آموزش ساخت اتوماسیون اداری تحت وب
مدیر سایت 449٬000 تومان
آموزش ساخت سیستم فروش و انبارداری وب
مدیر سایت 419٬000 تومان
آموزش ساخت سیستم حقوق و دستمزد وب با سینکفیوژن
مدیر سایت 599٬000 تومان
آموزش ساخت سیستم آزمونگیر آنلاین
مدیر سایت 399٬000 تومان
برای ارسال پاسخ لطفا وارد حساب کاربری خود شوید.   ورود