תכונות מבוססות-WebGL של Maps JavaScript API מאפשרות לכם לשלוט בהטיה ובסיבוב, להוסיף אובייקטים תלת ממדיים ישירות למפה ועוד. התכונות האלה כלולות:
- תצוגת שכבת-על של WebGL מאפשרת לכם להוסיף למפות שלכם גרפיקה דו-ממדית ותלת-ממדית ותוכן אנימציה מותאם אישית.
- עכשיו אפשר לשנות את הטיה וכותרת באופן פרוגרמטי באמצעות תנועות עכבר ומקלדת.
- map.moveCamera() מאפשרת לכם לשנות בו-זמנית כמה מאפיינים של מצלמה.
- ב-Zoom יש עכשיו תמיכה בערכים שברים.
שנתחיל?
כדי להשתמש בתכונות החדשות של WebGL, אתם צריכים מזהה מפה שמשתמש במפת הווקטור. בנוסף, תצטרכו לעדכן את בקשת ה-אתחול של ה-API. בקטע הזה נסביר איך עושים את זה.
יצירת מזהה מפה חדש
כדי ליצור מזהה מפה חדש, בצעו את השלבים המפורטים במאמר שימוש בעיצוב מפה מבוסס-ענן – קבלת מזהה מפה. הקפידו להגדיר את סוג המפה ל-JavaScript ולבחור באפשרות Vector. מסמנים את הטיה ו/או את Rotation כדי להפעיל הטיה וסיבוב במפה. כך תוכלו לשנות את הערכים באופן פרוגרמטי, וגם תאפשר למשתמשים לשנות את ההטיה והכיוון ישירות במפה. אם השימוש בהטיה או בכותרת ישפיע לרעה על האפליקציה, משאירים את האפשרויות הטיה ו-Rotation לא מסומנות, כדי שהמשתמשים לא יוכלו להתאים את ההטיה והסיבוב.
עדכון הקוד של אתחול המפה
כדי לעשות את זה צריך את מזהה המפה שיצרתם. תוכלו למצוא אותו בדף ניהול מפות Google. אתם צריכים לספק מזהה מפה כשיוצרים את המפה באמצעות המאפיין mapId, כפי שמוצג כאן:
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8,
mapId: 'MAP_ID'
});
דוגמאות
הוספנו דוגמאות כדי להמחיש את התכונות האלה: