یک متر سفر ساده با استفاده از API مکان جغرافیایی

Michael Mahemoff

معرفی

Geolocation API به شما این امکان را می‌دهد که بدانید کاربر کجاست و همیشه با رضایت کاربر، در حین جابجایی او، او را بررسی کنید. این قابلیت می تواند به عنوان بخشی از درخواست های کاربر استفاده شود، به عنوان مثال برای راهنمایی شخصی به نقطه مقصد. همچنین می‌توان از آن برای «برچسب‌گذاری جغرافیایی» برخی از محتوایی که کاربر ایجاد کرده است استفاده کرد، به عنوان مثال برای علامت‌گذاری جایی که یک عکس گرفته شده است. API دستگاه آگنوستیک است. اهمیتی نمی‌دهد که مرورگر چگونه مکان را تعیین می‌کند، تا زمانی که مشتریان بتوانند اطلاعات مکان را به روشی استاندارد درخواست و دریافت کنند. مکانیسم اساسی ممکن است از طریق GPS، وای فای یا به سادگی از کاربر بخواهد مکان خود را به صورت دستی وارد کند. از آنجایی که هر یک از این جستجوها مدتی طول می کشد، API ناهمزمان است. هر زمان که مکانی را درخواست می کنید، آن را به عنوان یک روش پاسخ به تماس ارسال می کنید.

مثال در اینجا یک متری سفر است که مکان اولیه را نشان می دهد و نمایش مسافتی را که از زمان بارگذاری صفحه طی کرده اند را حفظ می کند.

مرحله 1. سازگاری را بررسی کنید

با آزمایش وجود شی موقعیت جغرافیایی می توانید به راحتی سازگاری را بررسی کنید:

// check for Geolocation support
if (navigator.geolocation) {
  console.log('Geolocation is supported!');
}
else {
  console.log('Geolocation is not supported for this Browser/OS version yet.');
}

مرحله 2. Trip Meter HTML را اعلام کنید

در این مثال، شما در حال ساخت یک متر سفر هستید، بنابراین HTML زیر را اعلام کنید:

<div id="tripmeter">
<p>
Starting Location (lat, lon):<br/>
<span id="startLat">???</span>°, <span id="startLon">???</span>°
</p>
<p>
Current Location (lat, lon):<br/>
<span id="currentLat">???</span>°, <span id="currentLon">???</span>°
</p>
<p>
Distance from starting location:<br/>
<span id="distance">0</span> km
</p>
</div>

چند مرحله بعدی از API مکان جغرافیایی برای پر کردن همه آن دهانه های خالی استفاده می کند.

مرحله 3. مکان فعلی کاربر را تعیین کنید

getCurrentPosition() به طور ناهمزمان مکان فعلی کاربر را گزارش می کند. به محض لود شدن صفحه، آن را فراخوانی کنید تا به درستی در موقعیت شروع پر شود - و برای بعد ذخیره شود:

window.onload = function() {
var startPos;
navigator.geolocation.getCurrentPosition(function(position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
});
};

اگر این اولین بار است که یک برنامه در این دامنه مجوز درخواست می کند، مرورگر معمولاً رضایت کاربر را بررسی می کند. بسته به مرورگر، همچنین ممکن است ترجیحاتی وجود داشته باشد که همیشه جستجوی مجوز مجاز باشد - یا غیرمجاز باشد، در این صورت فرآیند تأیید دور می‌زند.

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

مرحله 4. خطاها را مدیریت کنید

متأسفانه، همه جستجوهای مکان موفقیت آمیز نیستند. شاید GPS نمی تواند پیدا شود یا کاربر به طور ناگهانی جستجوی مکان را غیرفعال کرده است. آرگومان دوم اختیاری به getCurrentPosition() در صورت بروز خطا فراخوانی می‌شود، بنابراین می‌توانید کاربر را در داخل callback مطلع کنید:

window.onload = function() {
var startPos;
navigator.geolocation.getCurrentPosition(function(position) {
// same as above
}, function(error) {
alert('Error occurred. Error code: ' + error.code);
// error.code can be:
//   0: unknown error
//   1: permission denied
//   2: position unavailable (error response from locaton provider)
//   3: timed out
});
};

مرحله 5. مکان کاربر را نظارت کنید

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

navigator.geolocation.watchPosition(function(position) {
document.getElementById('currentLat').innerHTML = position.coords.latitude;
document.getElementById('currentLon').innerHTML = position.coords.longitude;
});

مرحله 6. نشان دادن مسافت طی شده

این مرحله مستقیماً به API جغرافیایی مربوط نمی شود، اما نسخه آزمایشی را کامل می کند و نمونه ای از نحوه استفاده از داده های مکان را ارائه می دهد. برای پر کردن مسافت طی شده، یک خط اضافی به handler watchPosition() اضافه کنید:

navigator.geolocation.watchPosition(function(position) {
// same as above
document.getElementById('distance').innerHTML =
    calculateDistance(startPos.coords.latitude, startPos.coords.longitude,
                    position.coords.latitude, position.coords.longitude);
});

تابع calculateDistance() یک الگوریتم هندسی را برای تعیین فاصله بین دو مختصات انجام می دهد. پیاده سازی جاوا اسکریپت از یک اسکریپت ارائه شده توسط Moveable Type تحت مجوز Creative Commons اقتباس شده است:

function calculateDistance(lat1, lon1, lat2, lon2) {
var R = 6371; // km
var dLat = (lat2 - lat1).toRad();
var dLon = (lon2 - lon1).toRad();
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
        Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) *
        Math.sin(dLon / 2) * Math.sin(dLon / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = R * c;
return d;
}
Number.prototype.toRad = function() {
return this * Math.PI / 180;
}