مکان یابی جغرافیایی (Geolocation)
«مکان یابی جغرافیایی (Geolocation)» یعنی گرفتن مکان کاربر با اجازه او. «API» یعنی رابط برنامه نویسی با توابع آماده. با این API، طول و عرض جغرافیایی را می گیریم. سپس در صفحه نمایش می دهیم. اما همیشه اجازه شفاف لازم است.
شروع سریع با getCurrentPosition()
تابع getCurrentPosition() مکان فعلی را می دهد. مرورگر اول اجازه می خواهد. سپس بهترین روش دستگاه را پیدا می کند. مثلاً GPS.
<script>
const x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function success(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
function error() {
alert("Sorry, no position available.");
}
<\/script>
نکته: این API فقط روی بستر امن کار می کند. یعنی HTTPS.
نکته: دقت در موبایل ها معمولاً بیشتر است. چون GPS دارند.
مدیریت خطا و رد کردن اجازه
پارامتر دوم getCurrentPosition() تابع خطا است. با آن، پیام مناسب نشان بده.
<script>
function error(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>
به روزرسانی زنده با watchPosition()
با watchPosition() حرکت کاربر را دنبال کن. هر تغییر مکان، مقدار تازه می دهد. برای توقف، clearWatch() را صدا بزن.
<script>
const x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(success, error);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function success(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
function error(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>
کاربردهای مهم مکان یابی جغرافیایی
با مکان یابی، اطلاعات محلی تازه بده. مکان های مهم نزدیک را نشان بده. حتی ناوبری گام به گام بساز.
پیش نیازها و پیوندها
برای مفهوم کلی API، این صفحه را ببین: رابط های وب (Web APIs). برای اجرای پس زمینه و سبک تر شدن UI، صفحه Web Workers را نیز بررسی کن.
جمع بندی سریع
- مکان یابی جغرافیایی نیازمند اجازه کاربر است.
- getCurrentPosition مکان فعلی را برمی گرداند.
- watchPosition مکان را زنده به روزرسانی می کند.
- HTTPS لازم است و دقت موبایل بیشتر است.
- خطاها را روشن و کوتاه مدیریت کن.