HTML5 Geolocation

13 באפריל 2011

אין תגובות


 

ישנם הרבה אפליקציות המתבססות על מיקום המשתמש, כמו אפליקציות המציגות מידע בהתבסס על מיקום המשתמש כגון תחנות דלק או מסעדות וכד'.

 

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

 

בעבר כדי לכתוב אפליקציות מהסוג הזה היו שני אופציות, או שהיו מתקינים אצל הלקוח תוכנה כלשהי שיודעת לתת את המיקום שלו בהתבסס על GPS או שהיו מנסים לחשב את המיקום שלו לפי IP בהתבסס על בסיסי נתונים המסתובבים ברשת.

 

אבל מעולם לא היה את האופציה לכתובת אפליקציות מבוססות מיקום בצד הלקוח – כלומר html  ו – javascript בלבד.

 

התקן החדש מגדיר API לעבודה עם geolocation מצד הלקוח, אמנם הלקוח יהיה חייב לאשר האם הוא מוכן לשתף את המידע אודות מיקומו, הוא יוכל לבחור לאשר באופן חד פעמי או לתמיד (לפי אתר), לאחר שהמשתמש יאשר לשתף את המידע על מיקומו, הדפדפן יפנה לשירות כלשהו (התקן לא מגדיר כיצד לממש את השירות הוא רק מגדיר את ה – API), לאחר שהפנייה לשירות המרוחק תסתיים בהצלחה, הדפדפן יקבל את הקורדינטות ועוד מספר פרמטרים (חלק מהפרמטרים הם תלוי device.

 

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

 

כדי להתחיל לעבוד עם geolocation נצטרך להכיר את ה – API שלו שהוא ממש פשוט, יש לנו את שלושת הפונקציות הבאות:

 

getCurrentPosition

 

watchId = watchPosition

 

clearWatch(watchId)

 

 

כש – getCurrentPosition מחזירה את המיקום ברגע נתון לעומת watchPosition שכל הזמן מעדכנת במידה ויש שינויים במיקום ו – clearWatch עוצרת את watchPosition

 

למעשה אחרי שמכירים איך המתודה getCurrentPosition עובדת כבר מבינים איך watchPosition עובדת, מכיוון שהם אותו דבר מלבד ההבדל היחיד ש – watchPosition מחזירה id עבור clearPosition.

 

שני המתודות הראושנות חייבות לקבל מתודה להפעלה במידה והקריאה הצליחה

ואפשר לשלוח כפרמטר שם למתודה עבור כישלון

ומספר פרמטרים נוספים (האם לאפשר רמת דיוק גבוהה, כמה זמן לשמור את הנתון האחרון שהתקבל ו – timeout).

 

 

דוגמא לקריאה פשוטה:

 



navigator.geolocation.getCurrentPosition(ongoeSuccess);


 


 

 

דוגמא לקריאה עם כל הפרמטרים:

 



navigator.geolocation.getCurrentPosition(ongoeSuccess,


                                    ongoeError,


                                    {


                                        enableHighAccuracy: true,


                                        maximumAge: 600000,


                                        timeout: 0


                                    });


 

 

 

שני הפרמטרים הראשונים כמו שאמרנו הם מתודה להפעלה במידה והקריאה הצליחה ומתודה להפעלה בזמן שהקריאה נכשלה, שאר הפרמטרים

הפרמטר הראשון מדבר על רמת דיוק גבוהה יותר בזמן המדידה,

הפרמטר maximumAge מדבר על כמה זמן לשמור ב – cache את תוצאות הקריאה האחרונה,

והפרמטר האחרון מדבר על timeout כשהערך 0 שולח את האחריות למי שמריץ בפועל את הקריאה.

 

 

נראה את המתודה ongoSuccess.

 



function ongoeSuccess(e) {


    var d = document.getElementById('d');


    d.innerHTML = 'lat: ' + e.coords.latitude + '<br/>' +


    'lon: ' + e.coords.longitude + '<br/>' +


    'acc: ' + e.coords.accuracy + '<br/>' +


    'time: ' + e.timestamp + '<br/>';


}


 

הפרמטר e מכיל שני מאפיינים חשובים, אחד timestamp המכיל את הזמן שבו המדידה התבצעה בפועל והשני cords המכיל מספר פרמטרים חשובים כמו המיקום ורמת הדיוק, בנוסף יש עוד מספר פרמטרים שתלויים במי שמריץ את הקריאה (כמו גובה ועוד כמה אחרים).

 

במידה והקוד שלכם ירוץ על מחשב רגיל סביר להניח שלא תקבלו דיוק גדול מידי (אני קבלתי דיוק של 4000 מטר – שזה אומר כישלון מוחלט, אלא אם כן אני רוצה לדעת את המדינה), אבל במידה והקוד ירוץ על גבי סלולר שיש לו GPS תקבלו רמת דיוק מאוד גבוהה כמובן.

 

 

דוגמא לשימוש עם google maps כדי לדעת היכן אתם נמצאים. (הדוגמא המלאה נמצאת כאן)

 




 


 


function initialize() {


    navigator.geolocation.getCurrentPosition(function (e) {


        var myLatlng = new google.maps.LatLng(e.coords.latitude, e.coords.longitude);


 


        var myOptions =


        {


            zoom: 10,


            center: myLatlng,


            mapTypeId: google.maps.MapTypeId.ROADMAP


        };


 


        var map = new google.maps.Map(document.getElementById("map"), myOptions);


 


        var marker = new google.maps.Marker({


            position: myLatlng,


            map: map,


            title: 'Your Location'


        });


 


    });


}


 

 

במידה והמתודה נכשלה תוכלו לקבל את המידע אודות השגיאה, לדוגמא: (העתקתי מה – MSDN)

 



function ongoeError(error) {


    var message = "";


    // Check for known errors


    switch (error.code) {


        case error.PERMISSION_DENIED:


            message = "This website does not have permission to use the Geolocation API";


            break;


        case error.POSITION_UNAVAILABLE:


            message = "The current position could not be determined.";


            break;


        case error.PERMISSION_DENIED_TIMEOUT:


            message = "The current position could not be determined " + "within the specified timeout period.";


            break;


    }


    // If it's an unknown error, build a message that


    // includes information that helps identify the situation so that


    // the error handler can be updated.


    if (message == "") {


        var strErrorCode = error.code.toString();


        message = "The position could not be determined due to " + "an unknown error (Code: " + strErrorCode + ").";


    }


    alert(message);


}


 

 

חשוב לזכור שכשמנסים להשתמש במתודות של geolocation לפני שזה יעבוד הדפדפן יוודא האם המשתמש מוכן לשתף את המידע אודות מיקומו.

הוסף תגובה
facebook linkedin twitter email

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *