סמנים

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

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

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

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

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

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

קביעת הגובה של הסמן

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

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

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

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 סמנים, מומלץ מאוד להשתמש בMarker3dElementclass כדי להבטיח ביצועים אופטימליים.

השלב הבא

• הוספת סמן