موقعیت جغرافیایی HTML5
موقعیت جغرافیایی HTML5 یا Geolocation چیست؟
آموزش APIs درس اول
موقعیت جغرافیایی HTML5 برای اینکه موقعیت کاربر تعیین شود استفاده می شود. در این آموزش توضیحات کاملی در مورد API به شما می دهیم.
نقشه گوگل html را از اینجا ببینید
موقعیت جغرافیایی HTML5 : موقعیت کاربر را تعیین کنید
API جغرافیایی HTML برای بدست آوردن موقعیت جغرافیایی یک کاربر استفاده می شود.
از آنجا که این میتواند حریم خصوصی را به خطر بیندازد، موقعیت در دسترس نیست مگر اینکه کاربر آن را تایید کند.
توجه: مکان جغرافیایی دقیق تر برای دستگاه های دارای GPS، مانند آی فون است.
موقعیت جغرافیایی HTML5 : پشتیبانی مرورگر
اعداد در جدول مشخص می شوند اول نسخه مرورگر است که به طور کامل از موقعیت جغرافیایی پشتیبانی می کند.
API | کروم | اینترنت اکسپلورر | فایرفاکس | سافاری | آپرا |
Geolocation | 5.0 – 49.0 (http) 50.0 (https) |
9.0 | 3.5 | 5.0 | 16.0 |
توجه: از کروم 50، API Geolocation فقط در زمینه های امن مانند HTTPS کار خواهد کرد. اگر سایت شما بر مبنای غیر امن (مانند HTTP) میزبانی شود، درخواست ها برای دریافت موقعیت مکانی کاربر دیگر کار نخواهد کرد.
موقعیت جغرافیایی HTML5 : استفاده از Geolocation HTML
روش getCurrentPosition () برای بازگشت موقعیت کاربر استفاده می شود.
مثال زیر، طول و عرض جغرافیایی موقعیت کاربر را نشان می دهد:
مثال :
[php]
<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>
[/php]
توضیح مثال:
• بررسی کنید که آیا موقعیت جغرافیایی پشتیبانی می شود
• اگر پشتیبانی، روش getCurrentPosition () را اجرا کنید. اگر نه، یک پیام به کاربر نمایش می دهد
• اگر روش getCurrentPosition () موفق باشد، یک شی مختصات را به تابع مشخص شده در پارامتر (showPosition) برمی گرداند.
• خروجی تابع showPosition ()، Longitude و Latitude را در خروجی می دهد
مثال فوق یک اسکریپت بسیار ساده Geolocation است که بدون هیچگونه خطا می باشد.
Handling Errors and Rejections
دومین پارامتر از روش getCurrentPosition () برای رسیدگی به خطاها استفاده می شود. این یک تابع را برای اجرا در صورت عدم دسترسی به مکان کاربر مشخص می کند:
مثال :
[php]
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;
}
}
[/php]
نمایش نتیجه در یک نقشه
برای نمایش نتیجه در یک نقشه، شما نیاز به دسترسی به یک سرویس نقشه، مانند Google Maps دارید.
در مثال زیر، طول و عرض جغرافیایی بازگشتی برای نشان دادن موقعیت مکانی در نقشه Google (با استفاده از یک تصویر استاتیک) استفاده می شود:
[php]
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=400×300&sensor=false&key=YOUR_:KEY";
document.getElementById("mapholder").innerHTML = "<img src=’"+img_url+"’>";
}
[/php]
اطلاعات خاص مکان
این صفحه نشان داده است که چگونه موقعیت کاربر بر روی یک نقشه نشان داده می شود.
موقعیت جغرافیایی نیز برای اطلاعات خاص مکان مفید است، مانند:
• اطلاعات محلی به روز
• نمایش امتیازات مورد علاقه در نزدیکی کاربر
• ناوبری گام به گام (GPS)
روش getCurrentPosition () – بازگشت داده ها
روش getCurrentPosition () یک شی را با موفقیت برمی گرداند. ابعاد عرض، طول جغرافیایی و خواصی که نیاز به دقت دارند همیشه برمی گردند. خواص دیگر اگر موجود باشند:
Property | Returns |
coords.latitude | عرض جغرافیایی را به عنوان یک عدد دسیمال برمی گرداند (همیشه برمی گرداند ) |
coords.longitude | طول جغرافیایی را به عنوان یک عدد دسیمال برمی گرداند (همیشه برمی گرداند) |
coords.accuracy | دقت در موقعیت (همیشه برمی گرداند) |
coords.altitude | ارتفاع از سطح دریا با با متر برمی گرداند (اگر موجود باشد برمی گرداند) |
coords.altitudeAccuracy | دقت در ارتفاع موقعیت (اگر موجود باشد برمی گرداند) |
coords.heading | در جهت عقربه های ساعت عنوان مورد خطاب قرار می گیرد(اگر موجود باشد برمی گرداند ) |
coords.speed | سرعت را در متر بر ثانیه نشان می دهد ( اگر موجود باشد برمی گرداند) |
timestamp | تاریخ و زمان پاسخ را نشان می دهد ( اگر موجود باشد برمی گرداند) |
موقعیت جغرافیایی – سایر روش های جالب
شی های جغرافیایی نیز روش های جالب دیگری دارد:
• watchPosition () – وضعیت فعلی کاربر را برمی گرداند و همچنان موقعیت مکانی را به عنوان حرکت کاربر (مانند GPS در یک ماشین). به روز می کند.
• clearWatch () – روش watchPosition () را متوقف می کند.
مثال زیر روش watchPosition () را نشان می دهد شما یک وسیله GPS دقیق برای تست این نیاز دارید : (عنوان مثال iPhone)
مثال :
[php]
<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>
[/php]
دیدگاهتان را بنویسید