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

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

הערה: מומלץ לקרוא את המדריך בנושא השימוש ב-TypeScript ובמפות Google.

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

הערה: מומלץ לקרוא את המדריך בנושא השימוש ב-TypeScript ובמפות Google.

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

הערה: מומלץ לקרוא את המדריך בנושא השימוש ב-TypeScript ובמפות Google.

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

השלבים הבאים

הגדרת הסמנים כקליקביליים ונגישים