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

בחירת פלטפורמה: Android iOS JavaScript

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

טיפ: אם במפה שלכם נעשה שימוש בסמנים מדור קודם, כדאי לעבור לסמנים מתקדמים.

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

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

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

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

יצירת סמני HTML מותאמים אישית

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

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

לגרום לסמן להגיב לקליקים ולאירועי מקלדת על ידי הוספת האזנה לאירוע של 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.addListener('click', ({domEvent, latLng}) => {
    const {target} = domEvent;
    // Handle the click event.
    // ...
  });
}

הגדרת גובה הסמן והתנהגות ההתנגשות

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

השלב הבא

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