‫ Places UI Kit: ספרייה מוכנה לשימוש שמאפשרת למפתחים להתאים אישית ולשלוט. כדאי לנסות ולשתף את המשוב שלך על חוויית השימוש בערכת ממשק המשתמש.

‫Google משתמשת בטכנולוגיית AI כדי לתרגם תוכן לשפה המועדפת עליך. בתרגומים כאלו עשויות להיות שגיאות.

סקירה כללית

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

שכבת על מבוססת-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. מסמנים את התיבה הטיה או סיבוב כדי להפעיל את ההטיה והסיבוב במפה. כך תוכלו לשנות את הערכים האלה באופן פרוגרמטי, וגם לאפשר למשתמשים לשנות את ההטיה והכיוון ישירות במפה. אם השימוש בהטיה או בכיוון ישפיע לרעה על האפליקציה, אל תסמנו את האפשרויות הטיה וסיבוב כדי שהמשתמשים לא יוכלו לשנות את ההטיה והסיבוב.

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

בשלב הבא, מעדכנים את קוד האתחול של המפה באמצעות מזהה המפה שיצרתם. אפשר למצוא את מזהי המפות בדף Maps Management. מציינים מזהה מפה כשיוצרים מופע של המפה באמצעות המאפיין 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. מידע נוסף

דוגמאות

הדוגמאות הבאות ממחישות את התכונות האלה: