סקירה כללית על סמנים

אפשר להשתמש בסמנים כדי להציג מיקומים בודדים במפה. במדריך הזה מוסבר איך להשתמש בסמנים מתקדמים. בעזרת סמנים מתקדמים אפשר ליצור ולהתאים אישית סמנים עם ביצועים גבוהים, וליצור סמנים נגישים שמגיבים לאירועי gmp-click ולקלט מהמקלדת. כדי להתאים אישית את הסמנים המתקדמים עוד יותר, אפשר להשתמש ב-HTML וב-CSS בהתאמה אישית, כולל היכולת ליצור סמנים בהתאמה אישית מלאה. באפליקציות תלת-ממדיות, אתם יכולים לקבוע את הגובה שבו יופיע סמן. יש תמיכה בסמנים מתקדמים גם במפות מבוססות-פיקסלים וגם במפות וקטוריות (אם כי חלק מהתכונות לא זמינות במפות מבוססות-פיקסלים). כדי להשתמש בסמנים מתקדמים, נדרש מזהה מפה (אפשר להשתמש ב-DEMO_MAP_ID).

תחילת העבודה עם סמנים מתקדמים

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

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

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

יצירת סמני HTML בהתאמה אישית

אפשר להשתמש ב-HTML וב-CSS מותאמים אישית כדי ליצור סמנים אינטראקטיביים בעלי מראה ייחודי, וליצור אנימציות.

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

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

function initMap() {
  const map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 37.4239163, lng: -122.0947209},
    zoom: 17,
    mapId: 'DEMO_MAP_ID',
  });

  const marker = new google.maps.marker.AdvancedMarkerElement({
    map,
    position: {lat: 37.4239163, lng: -122.0947209},
  });

  marker.addEventListener('gmp-click', (event) => {
    // Handle the click event.
    // ...
  });
}

הגדרת הגובה של הסמן וההתנהגות במקרה של חפיפה

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

השלב הבא

• תחילת העבודה עם סמנים מתקדמים