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

אפשר להשתמש בסמנים כדי להציג מיקומים בודדים במפה. במדריך הזה מוסבר איך להשתמש בסמנים מתקדמים. בעזרת סמנים מתקדמים אפשר ליצור ולהתאים אישית סמנים עם ביצועים גבוהים, וליצור סמנים נגישים שמגיבים לאירועי 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.
    // ...
  });
}

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

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

השלב הבא

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