סמנים

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

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

השלב הבא

• הוספת סמן