סמנים

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

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

השלב הבא

• הוספת סמן