geolocation درhtml

آموزش مکان و مکان یابی در html

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

کاربرد اصلی این متد دریافت مکان جاری از مرورگر می باشد که با استفاده از دستور زیر به راحتی در جاوااسکریپت به راحتی به دست می آید .

navigator.geolocation.getCurrentPosition();

پارامترها :

showLocation (mandatory): تعریف متدی وقتی که مکان برگردان می شود.
ErrorHandler(optional): تعریف تابعی جهت اعمال خطا.
Options (optional): تعریف مجموعه ای تنطیمات جهت بازگردادن مکان.

نکته ای مهم و کاربردی در خصوص این تابع این است که این تابع فقط وقتی پروتکل امن وجود داشته باشد(SSL)اطلاعات مکان جاری را دریافت می کند البته بعد از تاییدیه کاربر در واقع ممکن است شما درون لوکال هاستتان geolocation کار کند ولی وقتی درون هاست قرار میگیرد کار نمی کند برای همین شما باید از sslدر این خصوص استفاده کنید تا مجوز دهد حتی جهت دریافت اطلاعات موقعیت جاری در html صادر شود.

در زیر کد دریافت اطلاعات موقعیت جاری می باشد.

<!DOCTYPE html>
<html>
<body>

<p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Try It</button>

<p id="demo"></p>

<script>
var x = document.getElementById("demo");

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else { 
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function showPosition(position) {
    x.innerHTML = "Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude;
}
</script>

</body>
</html>

مشاهده خروحی کذ دریافت اطلاعات مکان جاری

بارگزاری روی نقشه

کمپانی گوگل امکان استفاده از نقشه خود را به شما می دهدتتها کافی است کتابخانه گوگل که در زیر آمده است را با استفاده از کلید مخصوصتان بارگزاری نمایید و سپس نقشه را به یکی از اجزای صفحه اختصاص دهید .

<!DOCTYPE html>
<html>
<body>

<p id="demo">Click the button to get your position.</p>

<button onclick="getLocation()">Try It</button>

<div id="mapholder"></div>

<script>
var x = document.getElementById("demo");

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, showError);
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function showPosition(position) {
    var latlon = position.coords.latitude + "," + position.coords.longitude;
    var img_url = "https://maps.googleapis.com/maps/api/staticmap?center="
    +latlon+"&zoom=14&size=400x300&key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU";
    document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}
//To use this code on your website, get a free API key from Google.
//Read more at: https://www.w3schools.com/graphics/google_maps_basic.asp

function showError(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            x.innerHTML = "User denied the request for Geolocation."
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML = "Location information is unavailable."
            break;
        case error.TIMEOUT:
            x.innerHTML = "The request to get user location timed out."
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML = "An unknown error occurred."
            break;
    }
}
</script>

</body>
</html>

مشاهده خروحی کذ نمایش مکان جاری

پیشنهاد پیرو برای شما :   کد جاوا اسکریپت (نمایش تصویر بعد از بارگزاری)

بازگشتی های متذgetCurrentPosition

Property Returns
coords.latitude  latitude as a decimal number (always returned)
coords.longitude The longitude as a decimal number (always returned)
coords.accuracy The accuracy of position (always returned)
coords.altitude The altitude in meters above the mean sea level (returned if available)
coords.altitudeAccuracy The altitude accuracy of position (returned if available)
coords.heading The heading as degrees clockwise from North (returned if available)
coords.speed The speed in meters per second (returned if available)
timestamp The date/time of the response (returned if available)

در ادامه به بررسی لایبرری های jquery و react جهت کار با geolocation می پردازیم.