موقعیت جغرافیایی 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]