שטיגליץ עיצובים

גוגל מפות – ריבוי מרקרים


ינואר 13, 2016 2:42 pm

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

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

הדבר הראשון שאנחנו צריכים זה את הapi של גוגל:

לאחר מכן הקוד המרכזי. אתן את כל הקוד ואז אסביר את הדברים המרכזיים:

אז מה קורה כאן?

ראשית, אנחנו מציינים את אלמנט הhtml שאליו נטען את המפה.

לאחר מכן מייצרים את האופציות של המפה. במקרה זה השתמשתי רק בשתי אופציות. הAPI של גוגל מלא אפשרויות אחרות. google API maps

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

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

שימו לב שקריאת האג'קס קוראת לקובץ get-locations.php. אז בואו נבדוק אותו:

התחברו לבסיס הנתונים איך שאתם רגילים ולאיזה סוג בסיס נתונים שתרצו. לאחר מכן, צרו שאילתא והחזירו המידע:

 

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

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

הhtml  עצמו הוא הכי פשוט שיש:

וזהו. בעקרון זה כל מה שצריך

 

כתיבת תגובה

ספק שם מלא

@

אנא ספק כתובת דוא"ל תקפה

אנא ספק כתובת אינטרנט תקפה. כגון: http://www.yoursite.com

Show Buttons
Hide Buttons