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

דף זה תורגם על ידי Cloud Translation API.

סקירה כללית

התכונות שמבוססות על WebGL בממשק API של JavaScript במפות Google מאפשרות לכם לשלוט בנטייה ובסיבוב, להוסיף אובייקטים תלת-ממדיים ישירות למפה ועוד. התכונות הבאות כלולות:

תצוגת שכבת-על מבוססת-WebGL מאפשרת לכם להוסיף למפות גרפיקה בהתאמה אישית דו-ממדית ותלת-ממדית ותוכן מונפש.
עכשיו אפשר לשנות את הנטייה והכיוון באופן פרוגרמטי, וגם באמצעות תנועות של העכבר והמקלדת.
map.moveCamera() מאפשר לשנות כמה מאפייני מצלמה בו-זמנית.
עכשיו אפשר להשתמש ב-Zoom בערכים עשרוניים.

שנתחיל?

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

מציינים את האפשרות `renderingType`

אפשר להשתמש באפשרות renderingType כדי לציין את סוג הרינדור של המפה (לא נדרש מזהה מפה):

מעמיסים את הספרייה RenderingType. אפשר לעשות זאת בזמן טעינת הספרייה של מפות Google:
```
const { Map, RenderingType } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
```

כשאתם מאתחלים את המפה, אתם צריכים להשתמש באפשרות renderingType כדי לציין את הערך RenderingType.VECTOR או RenderingType.RASTER:

map = new Map(
  document.getElementById('map') as HTMLElement,
  {
    zoom: 4,
    center: position,
    renderingType: RenderingType.VECTOR,
  }
);

האפשרות renderingType מבטלת את כל ההגדרות של סוג הרינדור שהוגדרו על ידי הגדרת מזהה המפה.

כדי להפעיל את ההטיה והסיבוב, מגדירים את אפשרות המפה tiltInteractionEnabled ל-true או קוראים לפונקציה map.setTiltInteractionEnabled.
כדי להפעיל את האפשרות להזזת המפה, מגדירים את אפשרות המפה headingInteractionEnabled לערך true או קוראים לפונקציה map.setHeadingInteractionEnabled.

שימוש במזהה מפה כדי להגדיר את סוג הרינדור

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

יצירת מזהה של מפה וקטורית

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

map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  mapId: 'MAP_ID'
});

שימוש ברכיב `<gmp-map>`

מפות וקטוריות, הטיה וכיוון מופעל כברירת מחדל כשמשתמשים ברכיב <gmp-map>, שמאפשר להוסיף מפה לדף באמצעות HTML. מידע נוסף

דוגמאות

הוספו דוגמאות להמחשת התכונות האלה: