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

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

איך מתחילים להשתמש בסמנים מתקדמים

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

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

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

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

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

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

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

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.
    // ...
  });
}

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

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

השלב הבא

• איך מתחילים להשתמש בסמנים מתקדמים