סמנים

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

במפות תלת-ממדיות ב-Maps JavaScript יש שתי מחלקות שונות של סמנים, שכל אחת מהן מותאמת לשימושים ספציפיים. בטבלה הבאה מוצגים ההבדלים והפשרות בין שתי המחלקות הזמינות:

פונקציה	MarkerElement	Marker3DElement
התאמה אישית	גבוהה (תמיכה ברכיבי HTML בהתאמה אישית, ממשקי API של אנימציה בסיסית וכו')	נמוכה (פחות אפשרויות להתאמה אישית)
ביצועים	ביצועי אינטראקציה נמוכים יותר (ירידה ב-FPS עם מספר גדול של סמנים)	ביצועי אינטראקציה גבוהים יותר (אופטימיזציה לעיבוד של מערכי נתונים גדולים)
קיבולת מומלצת	ביצועי אינטראקציה אמינים עד כ-1,000 סמנים	מומלץ לטיפול ביותר מ-1,000 סמנים

התאמה אישית של הצבע, קנה המידה ותמונת הסמל

התאמה אישית של הרקע, הגליף, צבע הגבול והגודל של סמן ברירת המחדל.

החלפת סמל הסמן שמוגדר כברירת מחדל במשאב SVG בהתאמה אישית.

הגדרת גובה הסמן

כדי להגדיר את הגובה של הסמן, צריך להגדיר את הגובה וללחוץ על Extrude (הבלטה).

איך גורמים לסמנים להגיב לאירועים של קליקים ומקלדת

כדי שסמן יגיב לקליקים ולאירועי מקלדת, מוסיפים מאזין לאירועים (event listener) מסוג click.

const interactiveMarker = new Marker3DInteractiveElement({
    position,
    gmpPopoverTargetElement: popover,
});
index.js

הגדרת ההתנהגות במקרה של חפיפה בין סמנים

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

const marker = new Marker3DElement({
    position: { lat, lng },
    // Try setting a different collision behavior here.
    collisionBehavior: 'REQUIRED',
});
index.js

ביצועי הסמן

סמני HTML בהתאמה אישית (MarkerElement) מציעים ביצועים נמוכים יותר מסמנים תלת-ממדיים סטנדרטיים (Marker3DElement). באפליקציות עם יותר מ-1,000 סמנים, מומלץ מאוד להשתמש במחלקה Marker3dElement כדי להבטיח ביצועים אופטימליים.

השלב הבא

• הוספת סמן