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

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

השלבים הבאים

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