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

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

השלבים הבאים

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