آموزش HTML – موقعیت جغرافیایی html5

در جلسه قبلی آموزش HTML با SSE در html5 آشنا شدیم. در این بخش به موقعیت جغرافیایی (geolocation) در html5 خواهیم پرداخت.

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

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

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

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

دریافت اطلاعات مکانِ بازدیدکننده ی سایت با استفاده از API موقعیت جغرافیایی HTML5 به سادگی قابل انجام است. این API از سه متد که در آبجکت navigator.geolocation بسته بندی شدن استفاده می کند
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>

<!DOCTYPE html>

<head>

<title>HTML5 Geolocation</title>

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>

<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>

<!DOCTYPE html>

<head>

<title>HTML5 Geolocation</title>

// 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>

<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>

<!DOCTYPE html>

<head>

<title>HTML5 Geolocation</title>

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>

</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>

<!DOCTYPE html>

<head>

<title>HTML5 Geolocation</title>

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>

</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>

<!DOCTYPE html>

<head>

<title>HTML5 Geolocation</title>

// 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>

</body>

</html>

امیدوارم در این بخش آموزش HTML , از موقعیت جغرافیایی html5 نهایت استفاده را برده باشید.

در بخش بعدی با کشیدن و رها کردن در HTML آشنا می شویم.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.

لغو پاسخ

رضا ۲۴ اسفند ۱۳۹۹

با سلام!
ببخشید یه سوال دارم مثلا من وقتی میخوام یک کاربر وارد سایتم میشه در صفحه ادمین “در یک محل دیگر قرار دارد” آمدن کاربر را اطلاع بده و همین طور این حرکت به صورت زنده باشد یعنی اگر کاربر حرکت کرد لوکیشن هم تغییر کند و در دیتابیس ذخیره بشه ممنون میشم کمک کنید!

پاسخ

حسن شفیعی ۲۵ اسفند ۱۳۹۹

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

پاسخ

رضا ۲۸ اسفند ۱۳۹۹

با سلام!
من اگه بخوام این کارو انجام بدم باید کد های جاوااسکریپت رو با php ترکیب کنم چجوری این کارو انجام بدم؟

پاسخ
حسن شفیعی ۲۸ اسفند ۱۳۹۹

سلام. باید از ajax استفاده کنید:
https://netparadis.com/?s=ajax

پاسخ

رسولی ۲۱ دی ۱۳۹۹

با سلام و احترام
نمایش موقعیت جغرافیایی در وب سایتی که روی لوکال قرار دارد چگونه امکان پذیر است؟

پاسخ

آموزش HTML – موقعیت جغرافیایی html5

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

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

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

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

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

دریافت موقعیت مکانی با IP در PHP

کتاب آموزش HTML به فارسی

کشیدن و رها کردن در html5

آموزش SSE در HTML5

لغو پاسخ

دوره آموزش ساخت دیجی کالا با php به همراه اپلیکیشن اندروید

آموزش ساخت ربات تلگرام با PHP (از پایه و پروژه محور)

دوره جامع آموزش طراحی سایت + پروژه قالب فروشگاه