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

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

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

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

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

השלבים הבאים

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