מבוא
Geolocation API מאפשר לך לגלות היכן המשתמש נמצא ולעקוב אחר הפעילות שלו בזמן שהוא עובר ממקום למקום, תמיד בהסכמת המשתמש. ניתן להשתמש בפונקציונליות הזו כחלק משאילתות של משתמשים, למשל כדי לכוון משתמש לנקודת יעד. אפשר להשתמש בו גם ל "תיוג גיאוגרפי" של תכנים מסוימים שהמשתמש יצר, למשל, כדי לסמן את המקום שבו התמונה צולמה. ה-API לא תלוי במכשירים. לא משנה איך הדפדפן קובע מיקום, כל עוד הלקוחות יכולים לבקש ולקבל נתוני מיקום בצורה סטנדרטית. המנגנון הבסיסי יכול להיות באמצעות GPS, Wi-Fi או פשוט בקשה מהמשתמש להזין את מיקומו באופן ידני. מאחר שכל החיפושים האלה צפויים להימשך זמן מה, ה-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. הצהרת ה-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 כדי לאכלס את כל האזורים הריקים האלה.
שלב 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(), ייקרא במקרה של שגיאה, כך שתוכלו להודיע למשתמש בתוך הקריאה החוזרת:
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 מותאם מסקריפט שסופק על ידי סוג ניתן להעברה,
במסגרת רישיון 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;
}