طراحی وب

موقعیت جغرافیایی HTML5

موقعیت جغرافیایی HTML5  یا Geolocation  چیست؟

آموزش APIs درس اول

موقعیت جغرافیایی HTML5  برای اینکه  موقعیت کاربر تعیین شود استفاده می شود. در این آموزش توضیحات کاملی در مورد  API  به شما می دهیم.

نقشه گوگل  html  را از اینجا ببینید

موقعیت جغرافیایی HTML5 : موقعیت کاربر را تعیین کنید

API جغرافیایی HTML برای بدست آوردن موقعیت جغرافیایی یک کاربر استفاده می شود.
از آنجا که این میتواند حریم خصوصی را به خطر بیندازد، موقعیت در دسترس نیست مگر اینکه کاربر آن را تایید کند.
توجه: مکان جغرافیایی دقیق تر برای دستگاه های دارای GPS، مانند آی فون است.

موقعیت جغرافیایی HTML5
موقعیت جغرافیایی HTML5

موقعیت جغرافیایی HTML5 : پشتیبانی مرورگر

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

API کروم اینترنت اکسپلورر فایرفاکس سافاری آپرا
Geolocation۵.۰ – ۴۹.۰ (http)
۵۰.۰ (https)
۹.۰۳.۵۵.۰۱۶.۰

 

توجه: از کروم ۵۰، API Geolocation فقط در زمینه های امن مانند HTTPS کار خواهد کرد. اگر سایت شما بر مبنای غیر امن (مانند HTTP) میزبانی شود، درخواست ها برای دریافت موقعیت مکانی کاربر دیگر کار نخواهد کرد.

موقعیت جغرافیایی HTML5 : استفاده از  Geolocation HTML

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

مثال :

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

توضیح مثال:
• بررسی کنید که آیا موقعیت جغرافیایی پشتیبانی می شود
• اگر پشتیبانی، روش getCurrentPosition () را اجرا کنید. اگر نه، یک پیام به کاربر نمایش می دهد
• اگر روش getCurrentPosition () موفق باشد، یک شی مختصات را به تابع مشخص شده در پارامتر (showPosition) برمی گرداند.
• خروجی تابع  showPosition ()،    Longitude  و Latitude را در خروجی می دهد
مثال فوق یک اسکریپت بسیار ساده Geolocation است که بدون هیچگونه خطا می باشد.

Handling Errors and Rejections

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

مثال :

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

نمایش نتیجه در یک نقشه

برای نمایش نتیجه در یک نقشه، شما نیاز به دسترسی به یک سرویس نقشه، مانند Google Maps دارید.
در مثال زیر، طول و عرض جغرافیایی بازگشتی برای نشان دادن موقعیت مکانی در نقشه Google (با استفاده از یک تصویر استاتیک) استفاده می شود:

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&sensor=false&key=YOUR_:KEY";

    document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}

اطلاعات خاص مکان

این صفحه نشان داده است که چگونه موقعیت کاربر بر روی یک نقشه نشان  داده می شود.
موقعیت جغرافیایی نیز برای اطلاعات خاص مکان مفید است، مانند:
• اطلاعات محلی به روز
• نمایش امتیازات مورد علاقه در نزدیکی کاربر
• ناوبری گام به گام (GPS)

روش getCurrentPosition () – بازگشت داده ها

روش getCurrentPosition () یک شی را با  موفقیت برمی گرداند. ابعاد عرض، طول جغرافیایی و خواصی که نیاز به دقت دارند  همیشه برمی گردند. خواص دیگر اگر موجود باشند:

PropertyReturns
coords.latitude عرض جغرافیایی را به عنوان یک عدد دسیمال برمی گرداند (همیشه برمی گرداند )
coords.longitudeطول جغرافیایی را به عنوان یک عدد دسیمال برمی گرداند (همیشه برمی گرداند)
coords.accuracyدقت در موقعیت (همیشه برمی گرداند)
coords.altitudeارتفاع از سطح دریا با با متر برمی گرداند (اگر موجود باشد برمی گرداند)
coords.altitudeAccuracyدقت در ارتفاع موقعیت (اگر موجود باشد برمی گرداند)
coords.headingدر جهت عقربه های ساعت عنوان مورد خطاب قرار می گیرد(اگر موجود باشد برمی گرداند )
coords.speedسرعت را در متر بر ثانیه نشان می دهد ( اگر موجود باشد برمی گرداند)
timestampتاریخ و زمان پاسخ را نشان می دهد ( اگر موجود باشد برمی گرداند)

 

موقعیت جغرافیایی – سایر روش های جالب

شی های جغرافیایی نیز روش های جالب دیگری دارد:
• watchPosition () – وضعیت فعلی کاربر را برمی گرداند و همچنان موقعیت مکانی  را به عنوان حرکت کاربر (مانند GPS در یک ماشین).  به روز می کند.
• clearWatch () – روش watchPosition () را متوقف می کند.
مثال زیر روش watchPosition () را نشان می دهد  شما یک وسیله GPS دقیق برای تست این نیاز دارید : (عنوان مثال iPhone)

مثال :

  <script>
var x = document.getElementById("demo");
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.watchPosition(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>  

 

برچسب ها

دیدگاه یا سوال خود را با ما درمیان بگذارید

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

دوره رایگان کسب و کار اینترنتی

10 جلسه به همراه فایل صوتی و ویدیویی
همین حالا شروع کنید
تا امروز بیش از 4000 نفر در این دوره شرکت کرده‌اند
بستن پیام
هفته‌نامه بهترین ایده

به جمع 30,000 مشترک ما بپیوندید!

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