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

دسته بندی: آموزش
زمان مطالعه: 8 دقیقه
۲۸ خرداد ۱۳۹۶

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

  • Geolocation.getCurrentPosition()
  • Geolocation.watchPosition()
  • Geolocation.clearWatch()

متدهای 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

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

نظرات کاربران

ozviatha

منظورم اینه lat و long بازدید کننده را بشه در دیتابیس یا ایمیل دریافت کرد
سورس هم بصورت کامل باشه

محمد اسفندیاری

دوست عزیز بسته به اینکه در Front و Back از چه ابزارهایی استفاده کردید، میتونین lat و long رو به سمت سرور فرستاده و هر کار که بخواید با اونا انجام بدین

ozviatha

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

محمد اسفندیاری

منبع در آخر مطلب قرار داده شده:
https://tutorialzine.com/2016/06/quick-tip-detecting-your-location-with-javascript

منظورتون از اطلاعات چه اطلاعاتی هست؟

mohsen mandegar

ممنون خیلی خوب بود

محمد اسفندیاری

خواهش میکنم موفق باشید

ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :