Geolocation

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

רוצים לראות דוגמא? משתמשים בדפדפן שתומך בתכונה הזו? הקליקו על הכפתור!

הקליקו על מנת לבצע בדיקת מיקום

על מנת לקבל את המיקום, עלינו לבקש את המיקום מהגולש. הבקשה נעשית אוטומטית ברגע שאני שולח את הבקשה. הבקשה והתקשורת בכל הנושא של Geolocation נעשית באמצעות אובייקט JavaScript מסוג: navigator.geolocation. המתודה שבה אנו משתמשים על מנת לקבל את המידע היא getCurrentPosition. המתודה מקבלת פרמטר אחד (לפחות) של שם פונקציה שרצה לאחר ההצלחה. הפונקציה שרצה לאחר ההצלחה מכילה פרמטר של המיקום הגיאוגרפי.

מסובך? ממש לא! בקשה בסיסית תראה כך:

navigator.geolocation.getCurrentPosition(showUserPosition);
    
    function showUserPosition(position) {
        alert(
            position.coords.latitude 
            + " " +
            position.coords.longitude
        );
        }

מעבר למה שכתוב בקוד אין כל כך מה להסביר, מתודת getCurrentPosition יכולה לקבל עוד שני ארגומנטים. ארגומנט אחד הוא שם הפונקציה שרצה במקרה של הצלחה. הארגומנט השני הוא שם פונקציה שרצה במקרה של כשלון. הארגומנט השלישי הוא אפשרויות כאשר האפשרות הזמינה ביותר היא אפשרות ה-timeout – כמה זמן יש לגולש לאשר את הבקשה.

פונקצית הכשלון מקבלת אובייקט עם קוד שגיאה:

ככה זה נראה:

function showLocation(position) {
  var latitude = position.coords.latitude;
  var longitude = position.coords.longitude;
  alert("Latitude : " + latitude + " Longitude: " + longitude);
}
function errorHandler(err) {
  if(err.code == 1) {
    alert("Error: Access is denied!");
  }else if( err.code == 2) {
    alert("Error: Position is unavailable!");
  }
}
function getLocation(){
   if(navigator.geolocation){
      // timeout at 60000 milliseconds (60 seconds)
      var options = {timeout:60000};
      navigator.geolocation.getCurrentPosition(showLocation, 
                                               errorHandler,
                                               options);
   }else{
      alert("Sorry, browser does not support geolocation!");
   }
}

ה-API של Geolocation ממש פשוט וקל מאד לעשות איתו דברים מאד יפים. ללא ספק מדובר באחת ההמצאות הטובות ביותר של HTML 5. בטח חלק מכם יתהו איך הוודו הזה עובד. הסיפור מאחורי זה הוא פשוט ביותר – שורה של שימוש בהתקנים שונים בהתאם לפלטפורמה ולדפדפן.