آموزش پیدا کردن موقعیت یا Location کاربر با Javascript - قسمت 2

در جلسه قبل دیدیم که درون شئ navigator.geolocation متدهای زیر قرار گرفته و میتونین ازشون استفاده کنید:

  • [ltr]Geolocation.getCurrentPosition()[/ltr]
  • [ltr]Geolocation.watchPosition()[/ltr]
  • [ltr]Geolocation.clearWatch()[/ltr]

متدهای getCurrentPosition و watchPosition تقریبا به یک صورت مورد استفاده قرار میگیرن. هر دوی اونها بصورت Asynchronous و غیرهمزمان عمل میکنن و برای بدست آوردن اطلاعات موقعیتی کاربر درخواستی رو میفرستن و با توجه به Response یا پاسخی که میگیرن، Callback یا تابعی رو که مشخص کردیم رو اجرا میکنن. اگر نتیجه موفقیت آمیز باشه، تابع مربوط به حالت success اجرا میشه و اگر درخواست با خطا و ارور مواجع بشه، تابع مربوط به error اجرا خواهد شد.

کد زیر یک نمونه کلی از نحوه استفاده از متد getCurrentPosition است. استفاده از متد watchPosition نیز تقریبا به همین صورت هست.

navigator.geolocation.getCurrentPosition(
    // Success callback
    function(position) {
        /*
        position is an object containing various information about
        the acquired device location:
        position = {
            coords: {
                latitude - Geographical latitude in decimal degrees.
                longitude - Geographical longitude in decimal degrees. 
                altitude - Height in meters relative to sea level.
                accuracy - Possible error margin for the coordinates in meters. 
                altitudeAccuracy - Possible error margin for the altitude in meters. 
                heading - The direction of the device in degrees relative to north. 
                speed - The velocity of the device in meters per second.
            }
            timestamp - The time at which the location was retrieved.
        }
        */
    },
    // Optional error callback
    function(error){
        /* 
        In the error object is stored the reason for the failed attempt:
        error = {
            code - Error code representing the type of error 
                    1 - PERMISSION_DENIED
                    2 - POSITION_UNAVAILABLE
                    3 - TIMEOUT
            message - Details about the error in human-readable format.
        }
        */
    }
);

طرح کلی کد بالا بصورت زیر هست:

navigator.geolocation.getCurrentPosition(
    // Success callback
    function(position) {
    	// Code
    },
    // Optional error callback
    function(error){
    	// Code
    }
);

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

position = {
    coords: {
        latitude
        longitude
        altitude
        accuracy 
        altitudeAccuracy
        heading
        speed
    }
    timestamp
}

میبینید که اطلاعات زیادی به ما داده میشه. حالا یکی یکی این موارد رو با هم بررسی میکنیم. timestamp، زمانی که این اطلاعات دریافت شده اند رو به ما نشون میده و coords هم اطلاعاتی در مورد سیستم مختصات در اختیارمون میزاره. این اطلاعات عبارتند از:

  • latitude : عرض جغرافیایی با واحد درجه اعشاری
  • longitude : طول جغرافیایی با واحد درجه اعشاری
  • altitude : ارتفاع نسبی از سطح دریا با واحد متر
  • accuracy : میزان ممکن برای خطا در مورد طول و عرض جغرافیایی در واحد متر
  • altitudeAccuracy : میزان ممکن خطا برای altitude در واحد متر
  • heading : جهت دستگاه نسبت به شمال جغرافیایی در واحد درجه
  • speed : سرعت حرکت دستگاه در واحد متر بر ثانیه رو نشون میده

بعضی از موارد بالا فقط برای گوشی‌های موبایل و در حالت GPS قابل استفاده هستند و زمانی که از WiFi استفاده میکنیم، بعضی از موارد رو null دریافت میکنیم. در همه موارد به latitude و longitude دسترسی خواهیم داشت.یک نمونه از حالت success بصورت زیر هست:

اگر اروری هم داشته باشیم، تابع دوم صدا زده میشه و پارامتر error دارای موارد زیر خواهد بود:

error = {
    code
    message
}

درون code، کد مربوط به خطای رخ داده قرار میگیره که یکی از موارد زیر میتونه باشه:

  • 1 : زمانی که کاربر اجازه نده و درخواست رو block کنه، این حالت به وجود میاد
  • 2 : زمانی که موقعیت فعلی قابلیت دسترسی بهش وجود نداشته باشه
  • 3 : مواقعی که مقدار زمان زیادی میگذره و نتیجه ای دریافت نمیشه، این حالت به وجود میاد

درون ویژگی message هم یک متن که کاربر با خوندن اون متوجه ارور میشه، قرار میگیره. یک نمونه ارور در Console بصورت زیر هست:

میبینید که استفاده از Geolocation API خیلی راحت و سرراست هست.

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

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

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

میتونین در مورد این موضوع نیز این لینک رو مطالعه کنید.

همونطور که دیدید تا اینجا به راحتی تونستیم اطلاعات موقعیتی نظیر latitude و longitude رو بدست بیاریم. حالا میتونیم به راحتی با استفاده از ابزار GMap اون رو بر روی نقشه گوگل یا Google Maps نمایش بدیم. دموی زیر رو ببینید:

تب Result رو باز کنید تا نتیجه نهایی رو ببینید. یک دکمه بنام Find My Location وجود داره و زمانی که بر روی اون کلیک میکنید، یک اجازه از شما گرفته میشه و اگر اون رو Accept کنید، موقعیت فعلی شما بر روی نقشه گوگل نمایش داده میشه. برای دیدن کدهای این دمو، میتونین به تبهای HTML و CSS و Javascript برید. کد اصلی نمونه بالا بصورت زیر هست:

findMeButton.on('click', function(){
    navigator.geolocation.getCurrentPosition(function(position) {
        // Get the coordinates of the current position.
        var lat = position.coords.latitude;
        var lng = position.coords.longitude;
        // Create a new map and place a marker at the device location.
        var map = new GMaps({
            el: '#map',
            lat: lat,
            lng: lng
        });
        map.addMarker({
            lat: lat,
            lng: lng
        });
    });
});

میبینید زمانی که بر روی دکمه مورد نظر کلیک میشه، درخواست فرستاده میشه و اطلاعات مربوط به طول و عرض جغرافیایی رو دریافت میکنیم و اونا رو به ابزار GMap میدیم و اون هم نقشه رو به ما نشون میده و در اون نقطه یک نشانگر یا Marker رو اضافه میکنه.

به همین راحتی.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق و پیروز باشید.

یا علی

Source

 
ارسال دیدگاه
ما همه سوالات و دیدگاه ها رو می خونیم و پاسخ میدیم
۸ دیدگاه
Niloufar ۰۲ شهریور ۱۴۰۰، ۱۸:۲۵
سلام
مرسی از آموزشتون
من سوالم اینه که وقتی از Geolocation API استفاده میکنم lat و lng دقیق بهم نمیده
من حدسم اینه به دلیل تحریمها اینطوری باشه
خواستم ببینم باید چیکار کنم ؟ آیا راهی هست واسه فهمیدن دقیق lat و lng
یا اینکه اگه نیست از چه روشی باید برای جایگزینی استفاده کنم که مشابه اینها باشه
نازنین کریمی مقدم ۱۳ شهریور ۱۴۰۰، ۲۳:۱۷
درود بر شما. بابت تاخیر در پاسخگویی عذرخواهی میکنم.
یه راهش استفاده از قندشکن برای تست هست. راه دیگر استفاده از توابع گوگل مپ هست برای اینکه مقدار رو مستقیم رو نقشه ببینید و مطمئن بشید.
راحتترین راه هم استفاده از تابع ()watchPosition هست که میتونه کمک کنه تا مختصات رو بگیرید و بعد به صورت دستی خودتون در گوگل مپ وارد کنید و مطمئن بشید.
ozviatha ۰۲ آبان ۱۳۹۷، ۱۳:۲۲
منظورم اینه lat و long بازدید کننده را بشه در دیتابیس یا ایمیل دریافت کرد
سورس هم بصورت کامل باشه
محمد اسفندیاری ۰۵ آبان ۱۳۹۷، ۰۷:۱۷
دوست عزیز بسته به اینکه در Front و Back از چه ابزارهایی استفاده کردید، میتونین lat و long رو به سمت سرور فرستاده و هر کار که بخواید با اونا انجام بدین
ozviatha ۰۱ آبان ۱۳۹۷، ۱۶:۵۶
سلام میشه سورس را کامل بزارید
و اینکه این اطلاعات را میشه در ایمیل دریافت کرد
محمد اسفندیاری ۰۲ آبان ۱۳۹۷، ۰۷:۱۸
منبع در آخر مطلب قرار داده شده:
https://tutorialzine.com/2016/06/quick-tip-detecting-your-location-with-javascript

منظورتون از اطلاعات چه اطلاعاتی هست؟
mohsen mandegar ۳۱ خرداد ۱۳۹۶، ۱۴:۰۷
ممنون خیلی خوب بود
محمد اسفندیاری ۰۱ تیر ۱۳۹۶، ۰۸:۳۵
خواهش میکنم موفق باشید