چگونه موقعیت جغرافیایی کاربر را با jQuery بدست آوریم ؟

تبلیغات
کانال تلگرام فتولیا

GeoLocation API یا همان موقعیت جغرافیایی یکی از قابلیت های مهم مرورگرهای پشتیبانی کننده از HTML5 است که به ما اجازه می دهد موقعیت جغرافیایی کاربر را با استفاده از JavaScript درخواست کنیم. موقعیت کاربر به وسیله طول و عرض جغرافیایی مشخص می شوند. به دلایل امنیتی بعد از تایید و اجازه کاربر می توان به موقعیت او دسترسی یافت.

 

جاوااسکریپت و موقعیت جغرافیایی

در JavaScript ما به وسیله متد getCurrentPosition() می توانیم موقعیت جغرافیایی کاربر را بگیریم. ولی قبل از آن باید ببینیم مرورگر کاربر از این قابلیت پشتیبانی می کند یا خیر .

if ("geolocation" in navigator){ //check Geolocation available 
    //things to do
}else{
    console.log("Geolocation not available!");
}

حالا می توانیم با متدی که در بالا گفته شد موقعیت را به شکل زیر بگیریم

if ("geolocation" in navigator){ //check geolocation available 
    //try to get user current location using getCurrentPosition() method
    navigator.geolocation.getCurrentPosition(function(position){ 
            console.log("Found your location \nLat : "+position.coords.latitude+" \nLang :"+ position.coords.longitude);
        });
}else{
    console.log("Browser doesn't support geolocation!");
}

 

jQuery

حالا می خواهیم رویداد click در جی کوئری را هم به کد اضافه کنیم :

$("#find_btn").click(function () { //user clicks button
    if ("geolocation" in navigator){ //check geolocation available 
        //try to get user current location using getCurrentPosition() method
        navigator.geolocation.getCurrentPosition(function(position){ 
                $("#result").html("Found your location <br />Lat : "+position.coords.latitude+" </br>Lang :"+ position.coords.longitude);
            });
    }else{
        console.log("Browser doesn't support geolocation!");
    }
});

 

کد HTML نیز به این شکل خواهد بود:

<button id="find_btn">مرا پیدا کن</button>
<div id="result"></div>

 

نمایش موقعیت روی نقشه

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

<script type="text/javascript">
var map;
function initMap() {
var mapCenter = new google.maps.LatLng(47.6145, -122.3418); //Google map Coordinates
map = new google.maps.Map($("#map")[0], {
        center: mapCenter,
        zoom: 8
      });
}

$("#find_btn").click(function (){
    if ("geolocation" in navigator){
            navigator.geolocation.getCurrentPosition(function(position){ 
                    infoWindow = new google.maps.InfoWindow({map: map});
                    var pos = {lat: position.coords.latitude, lng: position.coords.longitude};
                    infoWindow.setPosition(pos);
                    infoWindow.setContent("Found your location <br />Lat : "+position.coords.latitude+" </br>Lang :"+ position.coords.longitude);
                    map.panTo(pos);
                });
        }else{
            console.log("Browser doesn't support geolocation!");
    }
});
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>

و کد HTML مورد نیاز به این شکل است :

<button id="find_btn">مرا پیدا کن</button>
<div id="map"></div>

 

در همین رابطه :   فهرست رويدادهاي جديد HTML 5 همراه توضيحات

در پایان

قابلیت یافتن موقعیت جغرافیایی کاربران می تواند کاربرد های مختلفی داشته باشد مثل یافتن مکان ها نزدیک به کاربر , رستوران های اطراف و … . البته موقع استفاده از این امکان در نظر داشته باشید که پوشش آن ممکن است دقیق و صد درصد نباشد و در بعضی از مرورگرها کار کند و در بعضی کار نکند . در واقع کارکرد برنامه تان را روی آن بنا نکنید.

به علت حساسیت این اطلاعات در حریم خصوصی کاربران سعی کنید در حفظ آن کوشا باشید . در صورت امکان از ارتباط امن بین کاربر و سرور (HTTPS) هم استفاده کنید. موفق باشید

منبع

5 Comments

  1. سلام مهندس
    من دنبال یه کدی هستم که مکان دقیق بازدید کنندگان سایت من رو بهم بده.از این اسکریپت های آماده که بلافاصله بعد از وارد شدن به سایت ،آی پی و مکان بازدید کننده رو اعلام میکنه (مثل اسکریپت سایت ipinfo.io )استفاده کردم ولی فقط برای کاربرای pc درست جواب میداد ولی برای کاربرایی که از طریق موبایل آمده بودند درست جواب نمیداد(مثلا من از اصفهان وارد سایت شده بودم ولی آی پی منو تهران نشون میداد).کاربرای موبایل خیلی برام مهم هستش.

    1. سلام
      فکر می کنم مشکل از ISP موبایل تون بوده که دقیق نشون نداده . البته تا جایی که من می دونم هیچ راه دقیقی که بفهمیم کاربر دقیقا کجاست وجود نداره . معمولا حدودی نشون میدن اون هم نه همه isp ها ! تازه کسانی که از فیل شکن استفاده می کنن که کلا همین حدودی شونم نمیشه فهمید !

  2. سلام خسته نباشید

    من این کد را در انواع مرورگر تست کردم ولی پاسخ نگرفتم

    احتمال میدم که در چیدمان کد اشتباهی دارم مشیه همه کد ها را به صورتی که کاملا کار میکنه اخر سر در پایان کنار هم قرار دهید یعنی کدی که با اجرای آن به درستی این عمل را انجام بده

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

More in HTML 5
دانلود رایگان ۱۰ قالب واکنش گرای Bootstrap

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

Close