שליטה בהתנהגות, בגובה ובחשיפה של תאונות

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

השלבים הבאים

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