סמנים

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

‫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 כדי להבטיח ביצועים אופטימליים.

השלב הבא

• הוספת סמן