מד מרחק פשוט לנסיעות באמצעות Geolocation API

Michael Mahemoff

מבוא

Geolocation API מאפשר לכם לגלות איפה המשתמש נמצא ולעקוב אחריו כשהוא מסתובב, תמיד בהסכמת המשתמש. אפשר להשתמש בפונקציונליות הזו כחלק משאילתות של משתמשים, למשל כדי להנחות מישהו לנקודת יעד. אפשר להשתמש בו גם כדי להוסיף תיוג גיאוגרפי לתוכן שהמשתמש יצר, למשל כדי לסמן איפה צולמה תמונה. ה-API לא תלוי במכשיר. לא משנה איך הדפדפן קובע את המיקום, כל עוד הלקוחות יכולים לבקש ולקבל נתוני מיקום בדרך סטנדרטית. המנגנון הבסיסי יכול להיות GPS, ‏Wi-Fi או פשוט בקשה מהמשתמש להזין את המיקום שלו באופן ידני. כל אחד מהחיפושים האלה ייקח קצת זמן, ולכן ה-API הוא אסינכרוני. אתם מעבירים לו שיטת קריאה חוזרת בכל פעם שאתם מבקשים מיקום.

הדוגמה כאן היא מד מרחק שמציג את המיקום הראשוני וממשיך להציג את המרחק שהמשתמשים עברו מאז שהדף נטען.

שלב 1. בדיקת תאימות

Browser Support

• 5
• 12
• 3.5
• 5

Source

כדי לבדוק בקלות אם יש תאימות, אפשר לבדוק אם אובייקט המיקום הגיאוגרפי קיים:

// 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. הצהרה על ה-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>

בשלבים הבאים נשתמש ב-Geolocation API כדי לאכלס את כל תגי ה-span הריקים האלה.

שלב 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. הצגת המרחק שעברתם

השלב הזה לא קשור ישירות ל-Geolocation 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() מפעילה אלגוריתם גיאומטרי כדי לקבוע את המרחק בין שתי קואורדינטות. ההטמעה של JavaScript מותאמת מסקריפט שסופק על ידי 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;
}