التحكّم في سلوك الاصطدام والارتفاع ومستوى الرؤية

اختيار النظام الأساسي: 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

الخطوات التالية

إتاحة النقر على العلامات وتسهيل الوصول إليها