מד נסיעות פשוט באמצעות ממשק ה-API של מיקום גיאוגרפי

Michael Mahemoff

מבוא

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

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

שלב 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 כדי לאכלס את כל ה-spans הריקים.

שלב 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, אבל הוא מסכם את הדגמה ומספק דוגמה לאופן שבו אפשר להשתמש בנתוני המיקום. מוסיפים שורה נוספת למטפל 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;
}