סמנים

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

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

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

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

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

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

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

כדי להגדיר את הגובה של סמן, צריך להגדיר את הגובה ולשלוף את הסמן.

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

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

השלב הבא

• הוספת סמן