بخش های اصلی

آموزش HTML 5

آموزش HTML 5 - موقعیت جغرافیایی (Geolocation)

ویژگی موقعیت جغرافیایی HTML5 برای پیدا کردن موقعیت بازدید کننده ی سایت به کار میره.

موقعیت جغرافیایی چیه؟

ویژگی موقعیت جغرافیایی در HTML5 به شما کمک می کنه تا مختصات جغرافیاییِ (اعداد طول و عرض جغرافیایی) موقعیت جاریِ بازدید کننده ی وب سایت تان را بیابید. این ویژگی برای فراهم کردن تجربه ی بهتری از دیدن سایت برای کاربر مفیده. مثلاً، می توانید به نتایج جستجویی که در مکان کاربر بصورت فیزیکی بسته شده، برگردین.

یافتن مختصات بازدیدکننده

گرفتن اطلاعات مکانِ بازدیدکننده ی سایت با استفاده از API موقعیت جغرافیایی در HTML5 خیلی راحته. این API از سه متد که در navigator.geolocation object بسته بندی شدن استفاده می کنه- getCurrentPosition(), watchPosition() و clearWatch().

مثال زیر، نمونه ای ساده از موقعیت جغرافیاییه که مکان جاری شما را نشان میده. ولی اول باید به مرورگر اجازه دادن بدین که به سرور درمورد مکانتان بگه.

مثال

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 Geolocation</title>
<script type="text/javascript">
    function showPosition(){
        if(navigator.geolocation){
            navigator.geolocation.getCurrentPosition(function(position){
                var positionInfo = "Your current position is (" + "Latitude: " + position.coords.latitude + ", " + "Longitude: " + position.coords.longitude + ")";
                document.getElementById("result").innerHTML = positionInfo;
            });
        } else{
            alert("Sorry, your browser does not support HTML5 geolocation.");
        }
    }
</script>
</head>
<body>
    <div id="result">
        <!--Position information will be inserted here-->
    </div>
    <button type="button" onclick="showPosition();">Show Position</button>
</body>
</html>

نکته: مرورگر بدون گرفتن اجازه از بازدید کننده، اطلاعات مکانیش را به اشتراک نخواهد گذاشت. استانداردِ موقعیت جغرافیایی، گرفتن اجازه از کاربر را برای هر وب سایتی که داده های مربوط به مکان کاربر را درخواست کند، بصورت یک قانون رسمی درآورده.

مواجهه با خطاها و عدم پذیرش ها

ممکنه وضعیتی باشه که کاربرنخواد اطلاعات مکانیش را با شما به اشتراک بذاره. برای مواجهه با چنین موقعیت هایی، می توانید زمانی که getCurrentLocation() را فراخوانی می کنین از دو تابع بهره ببرین. تابع اول اگه تلاش برای گرفتن موقعیت جغرافیایی موفقیت آمیز باشه، اجرا میشه، در حالی که دومی اگه تلاش برای گرفتن موقعیت جغرافیایی موفقیت آمیز نباشه، اجرا میشه.

مثال

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 Geolocation</title>
<script type="text/javascript">
    // Set up global variable
    var result;
    
    function showPosition(){
        // Store the element where the page displays the result
        result = document.getElementById("result");
        
        // If geolocation is available, try to get the visitor's position
        if(navigator.geolocation){
            navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
            result.innerHTML = "Getting the position information...";
        } else{
            alert("Sorry, your browser does not support HTML5 geolocation.");
        }
    };
    
    // Define callback function for successful attempt
    function successCallback(position){
        result.innerHTML = "Your current position is (" + "Latitude: " + position.coords.latitude + ", " + "Longitude: " + position.coords.longitude + ")";
    }
    
    // Define callback function for failed attempt
    function errorCallback(error){
        if(error.code == 1){
            result.innerHTML = "You've decided not to share your position, but it's OK. We won't ask you again.";
        } else if(error.code == 2){
            result.innerHTML = "The network is down or the positioning service can't be reached.";
        } else if(error.code == 3){
            result.innerHTML = "The attempt timed out before it could get the location data.";
        } else{
            result.innerHTML = "Geolocation failed due to unknown error.";
        }
    }
</script>
</head>
<body>
    <div id="result">
        <!--Position information will be inserted here-->
    </div>
    <button type="button" onclick="showPosition();">Show Position</button>
</body>
</html>

نشان دادن مکان در نقشه ی Google

می توانید با اطلاعات موقعیت جغرافیایی کارهای جذابی انجام بدین، مثل نشان دادن مکان کاربر در نقشه ی Google. مثال زیر مکان جاری شما را در نقشه ی Google بر اساس داده های طول و عرض جغرافیایی شما که از طریق ویژگیِ موقعیت جغرافیاییِ HTML5 بدست آمده نشان می ده.

مثال

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 Geolocation</title>
<script type="text/javascript">
    function showPosition(){
        navigator.geolocation.getCurrentPosition(showMap);
    }
    
    function showMap(position){
        // Get location data
        var latlong = position.coords.latitude + "," + position.coords.longitude;
        
        // Set Google map source url
        var mapLink = "http://maps.googleapis.com/maps/api/staticmap?center="+latlong+"&zoom=16&size=400x300&output=embed";
        
        // Create and insert Google map
        document.getElementById("embedMap").innerHTML = "<img alt='Map Holder' src='"+ mapLink +"'>";
    }
</script>
</head>
<body>
    <button type="button" onclick="showPosition();">Show My Position on Google Map</button>
    <div id="embedMap">
        <!--Google map will be embedded here-->
    </div>
</body>
</html>

مثال بالا به سادگی با استفاده از عکس های ایستا (static)، مکان را روی نقشه Google نشان میده. با این حال می توانید نقشه های تعاملی Google را نیز همراه با ویژگی های درگ کردن، زوم کردن و ویژگی های دیگری که در زندگی واقعی دارین، ایجاد کنین.

مثال

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 Geolocation</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function showPosition(){
    if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition(showMap, showError);
    } else{
        alert("Sorry, your browser does not support HTML5 geolocation.");
    }
}
 
// Define callback function for successful attempt
function showMap(position){
    // Get location data
    lat = position.coords.latitude;
    long = position.coords.longitude;
    var latlong = new google.maps.LatLng(lat, long);
    
    var myOptions = {
        center: latlong,
        zoom: 16,
        mapTypeControl: true,
        navigationControlOptions: {style:google.maps.NavigationControlStyle.SMALL}
    }
    
    var map = new google.maps.Map(document.getElementById("embedMap"), myOptions);
    var marker = new google.maps.Marker({position:latlong, map:map, title:"You are here!"});
}
 
// Define callback function for failed attempt
function showError(error){
    if(error.code == 1){
        result.innerHTML = "You've decided not to share your position, but it's OK. We won't ask you again.";
    } else if(error.code == 2){
        result.innerHTML = "The network is down or the positioning service can't be reached.";
    } else if(error.code == 3){
        result.innerHTML = "The attempt timed out before it could get the location data.";
    } else{
        result.innerHTML = "Geolocation failed due to unknown error.";
    }
}
</script>
</head>
<body>
    <button type="button" onclick="showPosition();">Show My Position on Google Map</button>
    <div id="embedMap" style="width: 400px; height: 300px;">
        <!--Google map will be embedded here-->
    </div>
</body>
</html>

برای یادگیری بیش تر درمورد نقشه های Google و API جاوا اسکریپت، آدرس زیر را ببینین:

https://developers.google.com/maps/documentation/javascript/reference

نظارت بر جابه جاییِ بازدیدکننده

همه ی مثال هایی که تا این جا دیدین براساس متدِ getCurrentPosition() بود. به هر حال، شیء موقعیت جغرافیایی (geolocation)، متد دیگری به نام watchPosition() داره که با برگرداندن آپدیت های مکانی به هنگام تغییرات مکانی، به شما امکان دنبال کردن حرکات بازدیدکننده را میده.

مثال

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 Geolocation</title>
<script type="text/javascript">
    // Set global variable
    var watchID;
    function showPosition(){
        if(navigator.geolocation){
            watchID = navigator.geolocation.watchPosition(successCallback);
        } else{
            alert("Sorry, your browser does not support HTML5 geolocation.");
        }
    }
    function successCallback(position){
        toggleWatchBtn.innerHTML = "Stop Watching";
        
        // Check position has been changed or not before doing anything
        if(prevLat != position.coords.latitude || prevLong != position.coords.longitude){
            
            // Set previous location
            var prevLat = position.coords.latitude;
            var prevLong = position.coords.longitude;
            
            // Get current position
            var positionInfo = "Your current position is (" + "Latitude: " + position.coords.latitude + ", " + "Longitude: " + position.coords.longitude + ")";
            document.getElementById("result").innerHTML = positionInfo;
            
        }
        
    }
    function startWatch(){
        var result = document.getElementById("result");
        
        var toggleWatchBtn = document.getElementById("toggleWatchBtn");
        
        toggleWatchBtn.onclick = function(){
            if(watchID){
                toggleWatchBtn.innerHTML = "Start Watching";
                navigator.geolocation.clearWatch(watchID);
                watchID = false;
            }
            else{
                toggleWatchBtn.innerHTML = "Aquiring Geo Location...";
                showPosition();
            }
        }
    }
    
    // Initialise the whole system (above)
    window.onload = startWatch;
</script>
</head>
<body>
    <button type="button" id="toggleWatchBtn">Start Watching</button>
    <div id="result">
        <!--Position information will be inserted here-->
    </div>   
</body>
</html>
در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش HTML 5

Learn HTML 5

سرفصل ها

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

تبلیغات

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد