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

اختيار النظام الأساسي: 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: { lat, lng },
    collisionBehavior,
});
mapElement.appendChild(advancedMarker);

JavaScript

const advancedMarker = new AdvancedMarkerElement({
    position: { lat, lng },
    collisionBehavior,
});
mapElement.appendChild(advancedMarker);

تحديد ارتفاع العلامة

في الخرائط المتجهة، يمكنك ضبط الارتفاع الذي يظهر عنده العلامة. ويكون ذلك مفيدًا في عرض العلامات بشكل صحيح بالنسبة إلى محتوى الخريطة الثلاثية الأبعاد. لضبط الارتفاع الخاص بعلامة، حدِّد LatLngAltitude كقيمة للخيار MarkerView.position:

TypeScript

const pin = new PinElement({
    background: '#4b2e83',
    borderColor: '#b7a57a',
    glyphColor: '#b7a57a',
    scale: 2.0,
});

const marker = new AdvancedMarkerElement({
    // Set altitude to 20 meters above the ground.
    position: {
        lat: 47.65170843460547,
        lng: -122.30754,
        altitude: 20,
    },
});
marker.append(pin);

mapElement.append(marker);

JavaScript

const pin = new PinElement({
    background: '#4b2e83',
    borderColor: '#b7a57a',
    glyphColor: '#b7a57a',
    scale: 2.0,
});

const marker = new AdvancedMarkerElement({
    // Set altitude to 20 meters above the ground.
    position: {
        lat: 47.65170843460547,
        lng: -122.30754,
        altitude: 20,
    },
});
marker.append(pin);

mapElement.append(marker);

التحكّم في إمكانية ظهور العلامات حسب مستوى تكبير/تصغير الخريطة

يمكنك الاطّلاع على التغيير في مستوى ظهور العلامات (ابدأ بالتصغير):

للتحكّم في مستوى ظهور علامة متقدّمة، أنشئ zoom_changed عنصر معالجة، وأضِف دالة شرطية لضبط AdvancedMarkerElement.map على null إذا تجاوز مستوى التكبير المستوى المحدّد، كما هو موضّح في المثال التالي:

TypeScript

mapElement.innerMap.addListener('zoom_changed', () => {
    const zoom = mapElement.innerMap.getZoom();
    for (let i = 0; i < markers.length; i++) {
        const { position, minZoom } = markerOptions[i];
        markers[i].position = zoom! > minZoom ? position : null;
    }
});

JavaScript

mapElement.innerMap.addListener('zoom_changed', () => {
    const zoom = mapElement.innerMap.getZoom();
    for (let i = 0; i < markers.length; i++) {
        const { position, minZoom } = markerOptions[i];
        markers[i].position = zoom > minZoom ? position : null;
    }
});

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

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