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

בחירת פלטפורמה: 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);

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

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

כדי לשלוט בחשיפה של סמן מתקדם, יוצרים מאזין 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;
    }
});

השלבים הבאים

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