שליטה בהתנהגות במהלך התנגשות, בגובה ובמידת החשיפה

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

בדף הזה מוסבר איך לשלוט בהיבטים הבאים של סמנים מתקדמים:

  • הגדרת התנהגות במקרה של חפיפה עבור סמן
  • קביעת הגובה של הסמן
  • שליטה בנראות של סמנים לפי רמת הזום במפה

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

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

כדי להגדיר את אופן הטיפול בהתנגשות, מגדירים את AdvancedMarkerElement.collisionBehavior לאחת מהאפשרויות הבאות:

  • ‫REQUIRED: (ברירת מחדל) הסמן תמיד מוצג, ללא קשר להתנגשות.
  • OPTIONAL_AND_HIDES_LOWER_PRIORITY הצגת הסמן רק אם הוא לא חופף לסמנים אחרים. אם שני סמנים מהסוג הזה חופפים, מוצג הסמן עם הערך הגבוה יותר של zIndex. אם יש להם אותו zIndex, מוצג המבצע עם המיקום האנכי הנמוך יותר במסך.
  • REQUIRED_AND_HIDES_OPTIONAL הסמן תמיד יוצג, ללא קשר להתנגשות, וכל הסמנים או התוויות OPTIONAL_AND_HIDES_LOWER_PRIORITY שיחפפו לסמן יוסתרו.

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

TypeScript

const advancedMarker = new AdvancedMarkerElement({
    position: { lat, lng },
    collisionBehavior,
});
mapElement.appendChild(advancedMarker);

JavaScript

const advancedMarker = new AdvancedMarkerElement({
    position: { lat, lng },
    collisionBehavior,
});
mapElement.appendChild(advancedMarker);

קביעת הגובה של הסמן

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

TypeScript

const pin = new PinElement({
    background: '#4b2e83',
    borderColor: '#b7a57a',
    glyphColor: '#b7a57a',
    scale: 2.0,
});

const marker = new AdvancedMarkerElement({
    // Set altitude to 20 meters above the ground.
    position: {
        lat: 47.65170843460547,
        lng: -122.30754,
        altitude: 20,
    },
});
marker.append(pin);

mapElement.append(marker);

JavaScript

const pin = new PinElement({
    background: '#4b2e83',
    borderColor: '#b7a57a',
    glyphColor: '#b7a57a',
    scale: 2.0,
});

const marker = new AdvancedMarkerElement({
    // Set altitude to 20 meters above the ground.
    position: {
        lat: 47.65170843460547,
        lng: -122.30754,
        altitude: 20,
    },
});
marker.append(pin);

mapElement.append(marker);

שליטה בנראות של סמנים לפי רמת הזום במפה

כדי לראות את השינוי בחשיפה של הסמנים (מתחילים בהרחקה):

כדי לשלוט בנראות של סמן מתקדם, יוצרים listener‏ zoom_changed, ומוסיפים פונקציה מותנית כדי להגדיר את AdvancedMarkerElement.map ל-null אם הזום חורג מהרמה שצוינה, כמו בדוגמה הבאה:

TypeScript

mapElement.innerMap.addListener('zoom_changed', () => {
    const zoom = mapElement.innerMap.getZoom();
    for (let i = 0; i < markers.length; i++) {
        const { position, minZoom } = markerOptions[i];
        markers[i].position = zoom! > minZoom ? position : null;
    }
});

JavaScript

mapElement.innerMap.addListener('zoom_changed', () => {
    const zoom = mapElement.innerMap.getZoom();
    for (let i = 0; i < markers.length; i++) {
        const { position, minZoom } = markerOptions[i];
        markers[i].position = zoom > minZoom ? position : null;
    }
});

השלבים הבאים

הפיכת סמנים ללחיצים ונגישים