מיקום הטלפון במפה של גוגל - Geolocation
navigator.geolocation, מה המשמעות של הנתונים שמתקבלים, ואיך מציגים את המיקום על מפה של Google.getCurrentPosition מקבלת שתי פונקציות. הראשונה נקראת כשהמיקום התקבל, והשנייה כשיש כישלון. זו טכניקה שנקראת callback, כלומר פונקציה שנותנים לפונקציה אחרת, והיא קוראת לה בחזרה.position, ומציגה ממנו את הנתונים באלמנט עם ה-id lblLocation.UNKNOWN_ERROR (0), PERMISSION_DENIED (1), POSITION_UNAVAILABLE (2) או TIMEOUT (3).accuracy ו-altitudeAccuracy מציינים את הדיוק.new Date(...).watchPosition מחזירה מזהה, ובעזרתו עוצרים את המעקב עם clearWatch. כך חוסכים סוללה כשהמשתמש לא צריך את המעקב.div עם id. ה-div מוגדר בגובה 100% ובלי מרווחים, כדי שהמפה תתפוס את כל השטח.initialize מקבלים את המיקום, ומציגים את המפה במרכז המיקום, עם חלונית InfoWindow שכתוב בה You are here.פרקי ההרצאה: מיקום הטלפון במפה של גוגל - Geolocation
תמלול ההרצאה: מיקום הטלפון במפה של גוגל - Geolocation
הטקסט המלא של הדקות הראשונות בהרצאה «מיקום הטלפון במפה של גוגל - Geolocation» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אנחנו מגיעים לנושא שנקרא Geo-Location Geo-Location זה פשוט האפשרות שלנו לגלות את מיקום המשתמש בכדור הארץ אנחנו יכולים לקחת את המיקום שלו, אם הוא כמובן מאשר את זה ולעשות עם זה כל מיני דברים, אנחנו יכולים לשלוח את זה לשרת, אנחנו יכולים להציג לו מפה עם המיקום שלו אנחנו יכולים להציג לו איזה דברים יש מסביבו
אם אנחנו יודעים לפי מיקום בואו נראה איך אנחנו יכולים לעשות את זה אז ראשית יש לנו פה אפליקציה, נרשום פה Geo-Location וכל מה שאני רוצה לעשות זה לבנות איזשהו לחצן, שכשהמשתמש לוחץ עליו אנחנו פשוט מציגים לו נתונים לגבי המיקום.
יש לנו פה input, button, value, showLocation, click, showUserLocation, תכף אנחנו הולכים לבנות את הפונקציה הזאת, בואו נשים פה penid lblocation, אוקיי, אז יש לנו פה את ה-user interface,
אנחנו כעת עוברים ל-JavaScript, ואנחנו רוצים לבנות את הפונקציה. הפונקציה נקראת showUserLocation. דבר ראשון, מה שאנחנו רוצים לבדוק זה בעצם לקבל נתונים לגבי הלוקיישן שלו ואחר כך להציג אותם.
אנחנו עושים את זה בעזרת navigator.geolocation ואנחנו משתמשים בפונקציה שנקראת get current position. עכשיו, הפונקציה הזאת מקבלת משהו שהוא מאוד מאוד נפוץ בעולם ה-JavaScript ובעיקר ב-FoneGap וזה פשוט פונקציות אין-ליין.
זה אומר שאנחנו עכשיו שולחים לפונקציה הזאת get current פונקציות משלנו בניגוד למתודולוגיה תכנותית אחרת שאומרת לדוגמה באובג'קט אוריינטד או ב-C-Sharp או ב-Java אם אתם רוצים שהפונקציה תביא לכם מידע תקראו לפונקציה והפונקציה תחזיר לכם מידע ואז תקבלו את המידע לאיזשהו אובייקט הרבה פעמים
ב-JavaScript זה לא המצב הרבה פעמים אנחנו רוצים שהפונקציה תביא לנו מידע אז אנחנו עושים משהו הפוך אנחנו שולחים לפונקציה פונקציות והפונקציה get current position קוראת לפונקציות שאנחנו שולחים לה, פה אנחנו רואים פונקציה אחת,
ומביאה להם את המידע שהיא רוצה להחזיר לנו. לדוגמה את ה-position. זאת אומרת אנחנו יכולים עכשיו לשלוח פונקציה אחת ל-get current position במידה והיא מצליחה להשיג את המיקום של המשתמש אז היא קוראת לפונקציה הזאת שנתנו לה שזאת בעצם inline function אין לה שם אלא get coin position הולכת לקרוא לה והולכת להביא לה את ה-position
במידה והיה כישלון אז יש פה פונקציה של error callback שאנחנו לא חייבים לשלוח אבל אנחנו יכולים בואו נשלח function אנחנו מקבלים בחזרה את השגיאה כעת כל מה שנשאר לנו לעשות זה פשוט לכתוב את שתי הפונקציות האלה כל פעם שיש לנו סוגריים וסלסלות אנחנו נכנסים ויורדים שורה זה התכנות
הנכון עכשיו זה לא כבר שאנחנו המצאנו את שתי הפונקציות האלה שאנחנו צריכים להביא ל-get-core-in-position. כך-get-core-in-position עובדת.
get-core-in-position אומרת לכם, תביאו לי שתי פונקציות, אחת success callback, callback זה פשוט מאוד פונקציה שאני נותן למישהו והוא קורא לה בחזרה, בגלל זה זה נקרא callback, ותביאו לי, אנחנו רואים את זה כאן, error callback, בדיוק פה, אנחנו רואים את זה במושחר,
error callback. אם אני לא אצליח להביא לכם מאיזושהי סיבה, קוראת לפונקציה השנייה שאתם מביאים לי ונותנת לה את הסיבה לכישלון מה אנחנו רוצים לעשות בפונקציה הראשונה פונקציה הראשונה גט קורן פוזישן הולכת לקרוא לה במידה והכל היה בסדר אז כל מה שאנחנו רוצים לעשות זה לגשת למשתנה של הlbl לוקיישן בואו ניגש אליו עם jquery או שלפני זה בואו ניקח לעצמנו איזה מסג'
שאנחנו רוצים להציג ואנחנו רוצים להציג מספר נתונים אנחנו רוצים להציג את הלונגיטיוד, קו אורך של כדור הארץ, איפה המיקום בדיוק נמצא מבחינת קו אורך.
זה יהיה position.coords, צורך של קואורדינטות, נקודה, לונגיטיוד, ונרד פה שורה.
שים את זה פה, ונמשיך לכתוב את כל הפרמטרים שאנחנו יכולים להשיג מהמיקום. זה היה קו אורך, ואנחנו רוצים לכתוב קו רוחב לטיטיוד, position, coords, יש לנו פה את הלונגיטיוד, יש לנו פה את הלטיטיוד.
עכשיו, מה זה בדיוק לונגיטיוד ומה זה בדיוק לאטיטיוד? לונגיטיוד זה בעצם קו אורך. מה זה אומר? זהו איזשהו ערך שמציין עד כמה הנקודה הנוכחית על פני כדור הארץ נמצאת ממזרח או ממערב לקו גריניץ'.
קו גריניץ' זה איזשהו קו אנכי שעובר מהקוטב הצפוני לקוטב הדרומי דרך איזשהו כפר עתיק בדרום מזרח לונדון שנקרא גריניץ'.
Latitude זה פשוט מאוד קו רוחב, זה ערך שמציין עד כמה נקודה על פני כדור הארץ נמצאת מצפון או מדרום לקו המשווה. אז אתם יכולים להסתכל פשוט בגוגל, לחפש longitude וlatitude ולראות מה שני הדברים האלה מציינים.
אם אנחנו מתעסקים עם Geolocation אז לפעמים חשוב שנראה את הדברים האלה. ואנחנו יכולים לראות את זה כאן בתאונות לדוגמה, אפשר לראות את זה כאן.
יש לנו כאן את ה-longitude, בדיוק הנקודה הזאת, כמה אנחנו נמצאים ממזרח או ממערב לקו גריניץ'. קו גריניץ' זה נקרא פריים מרידיאן.
מרידיאן זה קו אנכי שעובר מהקוטב הצפוני לקוטב הדרומי, ואנחנו יכולים לראות כאן שהוא עובר דרך בריטניה בדיוק בעיירה גריניץ'.
לאטיטיוד זה קו שעובר מצפון או מדרום לקו המשווה. אז אם יש לנו את שתי הנקודות האלה, אנחנו יכולים לדעת בדיוק מיקום מסוים על פני כדור הארץ.
ורק שנהיה בעניינים מה בדיוק אנחנו מקבלים מהגיא לוקיישן. הדבר הבא שאנחנו רוצים זה Altitude. Altitude זה בעצם קו גובה, כמה אנחנו גבוהים יותר מפני הים או נמוכים יותר מפני הים, אם אנחנו לדוגמה בים המלח.
Position Chords Altitude. לאחר מכן יש לנו משתנה שנקרא Accuracy, כמה באמת הדיוק של המידע שקיבלנו. Position.chords.accuracy. לאחר מכן יש לנו דיוק של האלטיטיוד.
הדיוק הקודם הוא היה דיוק של קו אורך וקו רוחב. עבור אלטיטיוד יש דיוק משלו. זה נקרא position.coherts.altitude.accuracy.
לאחר מכן יש לנו אפשרות לקבל משהו שנקרא הדינג, כלומר כיוון ההליכה או הנסיעה של המשתמש. position.coherts.heading. לאחר מכן יש לנו אפשרות לקבל את הספיד שלו, מהמהירות שבה הוא נוסע או הולך, ולבסוף יש לנו אפשרות לקבל משהו שנקרא time stamp, חותמת זמן.
מתי בדיוק הביאו לנו את הנתון הזה? זה יהיה position.time stamp. אבל time stamp זה פשוט מאוד איזשהו מספר מאוד מאוד גדול שאין לנו כל כך מה לעשות איתו, לכן מה שנעשה זה לפני שאנחנו יוצרים את המחרוזת הזאת, בואו נהפוך את הtime stamp לתאריך הגיוני.
יש לנו var date, new date וניתן לו את ה-position נקודת timestamp כעת אנחנו יכולים במקום להציג את אותו מספר ארוך שמציין כמה שניות עברו מ-1970 משהו כזה בואו פשוט נציג date.wars משורשר get minutes משורשר get seconds וזה בעצם נותן לנו את המחרוזת שברציננו עכשיו להציג אז כעת אנחנו יכולים דרך jquery
לגשת לאותו ID של lbl-location ולהכניס בדרך html את ה-message. במידה ויש כישלון, בואו נציג error-message ובואו נבדוק.
אוקיי, נלחץ על get-location ואנחנו רואים את הסימן הזה שמתאר שהיוזר רוצה לקחת את המיקום של המשתמש ויש לנו כאן את הפרמטרים עצמם.
אז יש לנו longitude מינוס 122 שזה בהחלט לא ישראל, Latitude 47, גם לא ישראל, Altitude 120, Accuracy 10, Altitude Accuracy 8, Heading 180, אני הולך לכיוון 180 כנראה, Speed אני נע במהירות 5.8 ו-Time Stamp וזאת השעה הנוכחית.
עכשיו כבר אנחנו רואים שיש פה כמה נתונים שהם לא ממש מדויקים והסיבה היא בגלל שהאמולטור הזה חושב שהוא נמצא במיקום אחר כי האמולטור מוגדר לו שהוא נמצא באיזשהו מיקום מסוים בארצות הברית באזור רדמונד ואנחנו כמובן יכולים לשנות את זה.
איך אנחנו יכולים לשנות את זה? אנחנו יכולים ללכת פה לטולס והטולס זה בעצם כל מיני כלים שקיימים באמולטור ומאפשרים לנו להגדיר כל מיני דברים לדוגמה דברים שקשורים בלוקיישן.
בואו ניכנס ללוקיישן ונראה בדיוק איפה המערכת חושבת שאנחנו נמצאים אנחנו נמצאים ליד קירקלנד רדמונד כרגע עכשיו אנחנו יכולים גם לגשת לטלפון עצמו ולהשתמש בכל מיני דברים שנמצאים בטלפון באמולטור כמובן לדוגמה במפות בואו נחפש פה את המפות של הטלפון ונראה שאכן מבחינת האמולטור
הזה זה טלפון אמיתי שהוא חושב שהוא נמצא במיקום הזה ותכף נראה איך אנחנו משנים לו את המיקום אז הוא שואל אותנו אם אנחנו מסכימים בואו נגיד לו עליו ואנחנו רואים שבדיוק אנחנו במיקום הזה של רדמונד. עכשיו מה אנחנו יכולים לעשות עם זה, אנחנו יכולים פשוט ללכת לאמולטור לעשות אפילו זום אאוט ולשנות את המיקום בואו נשנה אותו למיקום הנוכחי שבו
אנחנו נמצאים ניתן לו איזשהו מיקום אחר לא כל כך משנה איפה אבל בואו נלך פה לאירופה נשים את עצמנו פה באמצע ונתחיל לעשות זומים נשים את עצמנו פה נבצע זומים הנה אנחנו כבר להיכנס לישראל עדיין לא נתנו הוראה כזאת ותל אביב יפו כל מה שאני עושה עכשיו זה עומד איפשהו לא גורר אלא פשוט נותן לחיצה ושימו לב מה קורה בצד שמאל למפות המפות זורקות אותנו ישירות לנקודה שנתנו בואו
נעשה פה עוד זומין הייתי לכיוון יותר פתח תקווה כאילו שאין לי מה לחפש שם בואו נשים פה נקודה ונראה את המפות קופצות שימו לב נשים פה נקודה אתם רואים שהאמולטור הזה בצורה יפה מאפשר לנו להגדיר איפה אנחנו נמצאים.
אבל ברגע שעשינו את זה, זה אומר אוטומטית שאנחנו עכשיו במיקום החדש הזה. אז אם אנחנו חוזרים לאפליקציה ומריצים אותה עוד פעם, ומבצעים showLocation, אז אנחנו רואים עכשיו את המיקום האמיתי שהמערכת חושבת שהיא נמצאת בה, ו-34, 32 זה כבר ישראל.
כל היתר אני רואה שהם אותו הדבר, חוץ מה-time stamp כמובן. אז בעצם הצלחנו כרגע להשיג את המיקום של המשתמש על ידי פונקציה getCurrentPosition ונחזור זאת הפונקציה.
עכשיו קיימת פונקציה נוספת והפונקציה הנוספת הזאת נקראת watchPosition. watchPosition זאת פונקציה שמתבצעת בכל פעם שיש שינוי במיקום וכך אנחנו יכולים לדוגמה להציג את השינוי כל פעם שהיוזר זז.
כמובן היא מבצעת איזושהי דגימה כל כמה שניות ואם יש שינוי אז היא פשוט מציגה את השינוי. בואו נריץ את זה, נלחץ על הלחצן, אז יש לנו פה את המיקום הזה ומה שנעשה זה פשוט נזוז ואתם רואים אם תסתכלו תראו שכל פעם שאני זז ומבצע תזוזה אתם רואים שישנה בעצם ישנו איזשהו שינוי בתצוגה שמוצגת אם תסתכלו על
זה תראו שינוי כאילו אני מצליח ללכת ואני מקבל שינויים כאלה. כל פעם שאני זז הוא אמור לדגום כל כמה שניות אבל הוא הרבה פעמים גם הוא ממש דוגם בצורה מהירה וברגע שאתם זזים הוא נותן לכם את השינוי וקורא לפונקציה שלכם.
ככה אתם יכולים לבצע דגימה של המשתמש בלי לבנות טיימר משלכם כלומר זה אוטומטית מבצע לכם את הדגימה אם אתם רוצים להפיק את הדגימה כי שימו לב שהוא פשוט דוגם לי כל פעם שאני מבצע שינוי מה שאנחנו צריכים לעשות זה לבנות איזשהו משתנה גלובלי.
בואו נבנה אותו פה. נקרא לו WatchID. ומה שאנחנו רוצים לעשות זה לקבל את WatchID מתוך הפונקציה WatchPosition. כלומר היא תחזיר לנו את ה-WatchID.
עכשיו מה שאנחנו רוצים לעשות זה לגשת בחזרה לממשק המשתמש שנמצא פה, ואנחנו רוצים לייצר עוד לחצה, נקרא ClearWatch. אנחנו רוצים לקרוא לפונקציה שנקראת ClearUserWatch, שמה שהיא עושה היא פשוט מפסיקה את הדגימה האוטומטית של המערכת שהתחלנו.
כל מה שאנחנו צריכים לעשות בשביל לנקות את הדגימה הזאת, זאת הפעולה של navigator.geolocation.clearWatch ולתת את ה-ID של אותו Watch.
עדיף לנו אבל לעשות את הדבר הבא, עדיף להכניס בתוכו נ"ל ולבצע פה איזושהי בדיקה, כדי שלא סתם נתחיל לבטל Watch כאשר אין Watch.
אם Watch ID, זאת אומרת הוא שונה מנ"ל, אנחנו רוצים, בואו נשים פה איזה דבר, אנחנו רוצים לכבות בעצם את הוואץ' שהדלקנו ולהכניס את ה"חונל" או אפילו נרשום פה שונה מנהל.
ובעצם זה מבטא לנו את הדגימה האוטומטית שהמערכת ביצעה. בואו נריץ "שואו לוקיישן", "לוקיישן" מתבצע ו"קליר וואץ'" מאפשר לנקות את הלוקיישן, את הוואץ' בעצם.
אנחנו רואים שכרגע אין יותר דגימה, אפילו שאני זז, הדגימה הפסיקה. ככה אתם יכולים לדוגמה כשהיוזר יוצא מהמערכת להפסיק את הדגימה אפילו שהאפליקציה שלו רצה וזה חוסך סוללה, חוסך פעילות של האפליקציה שלנו.
ביטלנו את הדגימה האוטומטית. עכשיו, מה בקשר למצב שבו ישנה שגיאה? האם באמת אנחנו רוצים להציג אלרט והאם כן המסאג' מספיק לנו? אולי אנחנו רוצים מסאג' אחר? אולי אנחנו רוצים לעשות פעולות אחרות?
אז פה כדאי שנבין מה בעצם האובייקט ארור שאנחנו מקבלים לפונקציה. ומה שאנחנו צריכים להבין זה כזה דבר. האובייקט ארור הזה מתאר אחד מסדרת בעיות שיכולות לקרות ומה שנהוג לעשות זה לבנות כאילו אינאם בג'אווה סקריפט והאינאם אמור לתאר בדיוק מה הבעיה
ואז אנחנו פשוט בודקים מה בדיוק הבעיה לפי הקוד של הארור על ידי סוויץ' עם האינאם הזה עכשיו, בג'אווה סקריפט אין אינאם אז איך אנחנו פותרים את הבעיה?
אנחנו יוצרים כביכול אינאם בואו ניצור ארור קוד ונכניס את הכל אובייקט ג'ייסון האובייקט ג'ייסון מכיל מספר ערכים, נהוג שהם יהיו באותיות גדולות.
הערך הראשון נקרא Unknown Error, ערכו הוא 0. הקבועים האלה חייבים להיות בדיוק המספרים