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

הפלטפורמה: 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: new google.maps.LatLng({ lat, lng }),
  map,
  collisionBehavior: collisionBehavior,
});
index.ts

JavaScript

const advancedMarker = new AdvancedMarkerElement({
    position: new google.maps.LatLng({ lat, lng }),
    map,
    collisionBehavior: collisionBehavior,
});
index.js

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

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

TypeScript

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

const markerView = new AdvancedMarkerElement({
    map,
    content: pin.element,
    // Set altitude to 20 meters above the ground.
    position: { lat: 47.65170843460547, lng: -122.30754, altitude: 20 } as google.maps.LatLngAltitudeLiteral,
});
index.ts

JavaScript

const pin = new PinElement({
    background: '#4b2e83',
    borderColor: '#b7a57a',
    glyphColor: '#b7a57a',
    scale: 2.0,
});
const markerView = new AdvancedMarkerElement({
    map,
    content: pin.element,
    // Set altitude to 20 meters above the ground.
    position: { lat: 47.65170843460547, lng: -122.30754, altitude: 20 },
});
index.js

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

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

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

TypeScript

map.addListener('zoom_changed', () => {
    const zoom = map.getZoom();
    if (zoom) {
        // Only show each marker above a certain zoom level.
        marker01.map = zoom > 14 ? map : null;
        marker02.map = zoom > 15 ? map : null;
        marker03.map = zoom > 16 ? map : null;
        marker04.map = zoom > 17 ? map : null;
    }
});
index.ts

JavaScript

map.addListener('zoom_changed', () => {
    const zoom = map.getZoom();
    if (zoom) {
        // Only show each marker above a certain zoom level.
        marker01.map = zoom > 14 ? map : null;
        marker02.map = zoom > 15 ? map : null;
        marker03.map = zoom > 16 ? map : null;
        marker04.map = zoom > 17 ? map : null;
    }
});
index.js

השלבים הבאים

הגדרת סמנים שניתן ללחוץ עליהם ונגישים