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

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

השלבים הבאים

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