Geolocation API הוא אחד מבין מגוון רחב של סיפריות ש-HTML5 כוללת, הוא חינמי ודי פשוט לתפעול.
פיצ׳ר זה הינו חשוב מכיוון שהוא מאפשר לנו לפתח מוצר או אתר אשר משתמש במיקום הגולש ולפיו מציע לו מידע מסויים כמו מקומות בסביבתו, מרחק שלו מנ.צ. מסויים וכד׳.
שימו לב, שימוש ב-Geolocation API יעבוד בצורה הטובה והמדוייקת ביותר במכשירים אשר כוללים GPS.
שימוש ב-Geolocation API
בשנים האחרונות נוספה הגבלה ע״י יצרני הדפדפנים כי שימוש ב-API זה יהיה אפשרי אך ורק על גבי חיבורי HTTPS, לכן אם האתר שלכם לא משתמש בתעודת SSL, לא תוכלו להשתמש ב-API זה.
בדיקת תמיכת דפדפן גולש
למרבה הצער, לא כולם משתמשים בגרסאות עדכניות של הדפדפנים, ולכן לא בטוח שפיצ׳ר זה נתמך (לצפייה בתמיכה דפדפנים).
על מנת להתגבר על בעיה זו, נדאג תמיד לעטוף את הקוד שלנו בבדיקה האם הפיצ׳ר נתמך.
if( navigator.geolocation ) {
console.log( 'Geolocation is supported.' );
} else {
console.error( 'Geolocation is not supported.' );
}אנו מנסים לגשת לאובייקט geolocation של הדפדפן, במידה והוא לא מוגדר, אנו זורקים שגיאה בקונסולה.
בקשת גישה למיקום גולש
בהנחה שדפדפן הגולש אכן תומך ב-Geolocation API, נוכל לבצע בקשה למיקום הגולש.
על מנת לבצע זאת נשתמש בפונקציה getCurrentPosition תחת אובייקט geolocation.
navigator.geolocation.getCurrentPosition( function( location ) {
console.log( location );
} );כאשר נכנס לעמוד תוצג לגולש בקשה לאישור גישה למיקום הגולש, במידה והוא אישר בעבר גישה לא תוצג לו הודעה בשנית.
פונקציה זו מקבלת 3 פרמרטים, כאשר הראשון הוא פונקציה אשר תרוץ בעת קבלת אישור והיא חובה.
הפונקציה תקבל אובייקט אשר יכיל את נתוני מיקום הגולש (בדוגמא שלנו location).
navigator.geolocation.getCurrentPosition( function( location ) {
console.log( `User location - Latitude: ${location.coords.latitude} | Longitude: ${location.coords.longitude}` );
} );בדוגמא הנ״ל אנו מדפיסים בקונסולה את נקודות הציון של הגולש שהתקבל מה-Geolocation API.
באובייקט שמועבר לפונקציה ישנם מספר נתונים שימושי כמו רמת דיוק (accuracy) ומהירות (speed).
טיפול בשגיאות וסירוב גישה
הפרמטר השני שהפונקציה getCurrentPosition מקבלת היא פונקציה אשר תרוץ כאשר התרחשה שגיאה כלשהי.
אי מתן אישור לגישה למיקום הגולש נחשב כשגיאה, לכן מומלץ מאוד לטפל בשגיאות.
navigator.geolocation.getCurrentPosition( function( location ) {
console.log( location );
}, function( error ) {
if( error.PERMISSION_DENIED === error.code ) {
console.error( 'Access to user location was denied.' );
} else {
console.error( error.message );
}
} );בקוד הנ״ל אנו בודקים האם קוד השגיאה שהועבר הוא מסוג ״גישה נדחתה״, במידה וכן אנו מדפיסים הודעה בקונסולה על כך.
במידה והשגיאה היא שגיאה אחרת, אנו מדפיסים את השגיאה שהתקבלה מהדפדפן.
הגדרות גישה מתקדמות
הפרמטר השלישי והאחרון של פונקצייה getCurrentPosition הוא פרמטר של הגדרות.
ישנן 3 הגדרות אפשריות (נכון לתאריך פרסום הפוסט) אשר ניתן להגדיר באובייקט ולהעביר לפונקציה.
maximumAge– מספר המייצג במילישניות את תוקף זיכרון המטמון של מיקום הגולש.timeout– מספר המייצג במילישניות את כמות הזמן לפני זריקת שגיאת Timeout.enableHighAccuracy– ערך בוליאני (אמת/שקר) אשר מייצג האם להפעיל איתור מיקום מדוייק יותר.
navigator.geolocation.getCurrentPosition( function( location ) {
console.log( location );
}, function( error ) {
console.error( error.message );
}, {
maximumAge: 3000,
timeout: 10000,
enableHighAccuracy: true
} );ניטור מיקום גולש עם Geolocation API
הפונקציה getCurrentLocation מאפשר לנו לקבל את המיקום כאשר העמוד נטען.
במידה ואנו נרצה לנטר באופן שוטף את מיקום הגולש, נוכל להשתמש בפונקציה watchPosition.
פונקציה זו מקבלת גם 3 פרטמרים, בדומה ל-getCurrentPostion ואף עובדת בצורה דומה לפונקציה זו, אך ההבדל הוא ש-watchPosition תרוץ כל פעם שמיקום הגולש משתנה.
navigator.geolocation.watchPosition( function( location ) {
console.log( location );
}, function( error ) {
console.error( error.message );
}, {
maximumAge: 3000,
timeout: 10000,
enableHighAccuracy: true
} );פונקציה זו שימושית מאוד כאשר אנו רוצים לפתח אפליקציה שמעדכנת את הגולש אחר המרחק שלו ממיקום מסויים או להציג לו בצורה דינאמית מקומות שנמצאים סביבו.
עצירת ניטור מיקום הגולש
פונקצייה זו מחזירה מזהה אשר איתו ניתן להפסיק את הניטור השוטף ע״י שימוש בפונקציה clearWatch אשר מקבלת מזהה.
var loc_id;
loc_id = navigator.geolocation.watchPosition( function( location ) {
console.log( location );
} );
setTimeout( function() {
navigator.geolocation.clearWatch( loc_id );
}, 10000 );בדוגמא הנ״ל אנו מפסיקים את ניטור המשתמש לאחר 10 שניות ע״י שימוש בפונקציה setTimeout.
הצגת מיקום הגולש על המפה
ניתן לעשות המון דברים מגניבים ושימושיים עם Geolocation API, אחד מהם הוא להציג לגולש את המיקום שלו על המפה.
לצורך הדוגמא אנו נשתמש ב-Google Maps על מנת להציג את המיקום שלו.
<script>
if( navigator.geolocation ) {
navigator.geolocation.getCurrentPosition( function( location ) {
var _iframe = document.getElementById( 'user_loc' );
var _api_key = '';
_iframe.src = `https://www.google.com/maps/embed/v1/view?key=${_api_key}¢er=${location.coords.latitude},${location.coords.longitude}&zoom=18`;
}, function( error ) {
console.error( error.message );
}, {
maximumAge: 3000,
timeout: 10000,
enableHighAccuracy: true
} );
} else {
console.error( 'Geolocation is not supported.' );
}
</script>
<iframe id="user_loc" src="" width="500" height="500"></iframe>בדוגמא הנ״ל אנו משתמשים ב-Geolocation API על מנת להציג את מיקום הגולש העדכני על גבי שירות Google Maps.
שימו לב, על מנת שהקוד יעבוד יש לייצר מפתח API ל-Google Maps Embed API.
סיכום
שימוש ב-Geolocation API הוא חיוני עבור פיתוח של אתרים או שירותים אשר צריכים את מיקום הגולש עבור הצגת דברים שנמצאים בסביבתו, או כאשר רוצים להציג לו את המרחק שלו ממיקום מסויים וכד׳.
האם יצא לכם להשתמש ב-Geolocation API? ספרו לנו בתגובות על רעיונות מגניבים לשימוש בפיצ׳ר זה.