رفتار برخورد، ارتفاع و دید را کنترل کنید

پلتفرم مورد نظر را انتخاب کنید: اندروید، iOS، جاوا اسکریپت

این صفحه به شما نشان می‌دهد که چگونه جنبه‌های زیر از نشانگرهای پیشرفته را کنترل کنید:

  • تنظیم رفتار برخورد برای یک نشانگر
  • تنظیم ارتفاع نشانگر
  • کنترل میزان دید نشانگرها با سطح بزرگنمایی نقشه

تنظیم رفتار برخورد برای یک نشانگر

رفتار برخورد، نحوه نمایش یک نشانگر را در صورت برخورد (همپوشانی) با نشانگر دیگر کنترل می‌کند. رفتار برخورد فقط در نقشه‌های برداری پشتیبانی می‌شود.

برای تنظیم رفتار برخورد، AdvancedMarkerElement.collisionBehavior روی یکی از موارد زیر تنظیم کنید:

  • REQUIRED : (پیش‌فرض) صرف نظر از برخورد، همیشه نشانگر را نمایش دهید.
  • OPTIONAL_AND_HIDES_LOWER_PRIORITY نشانگر را فقط در صورتی نمایش دهید که با نشانگرهای دیگر همپوشانی نداشته باشد. اگر دو نشانگر از این نوع همپوشانی داشته باشند، نشانگری که zIndex بالاتری دارد نمایش داده می‌شود. اگر zIndex آنها یکسان باشد، نشانگری که موقعیت عمودی پایین‌تری در صفحه دارد نمایش داده می‌شود.
  • REQUIRED_AND_HIDES_OPTIONAL همیشه نشانگر را صرف نظر از تداخل نمایش دهید و هرگونه نشانگر یا برچسب OPTIONAL_AND_HIDES_LOWER_PRIORITY را که ممکن است با نشانگر همپوشانی داشته باشد، مخفی کنید.

مثال زیر تنظیم رفتار برخورد برای یک نشانگر را نشان می‌دهد:

تایپ اسکریپت 

const advancedMarker = new AdvancedMarkerElement({
  position: new google.maps.LatLng({ lat, lng }),
  map,
  collisionBehavior: collisionBehavior,
});
index.ts

جاوا اسکریپت 

const advancedMarker = new AdvancedMarkerElement({
    position: new google.maps.LatLng({ lat, lng }),
    map,
    collisionBehavior: collisionBehavior,
});
index.js

تنظیم ارتفاع نشانگر

در نقشه‌های برداری، می‌توانید ارتفاعی را که یک نشانگر در آن ظاهر می‌شود، تنظیم کنید. این کار برای نمایش صحیح نشانگرها نسبت به محتوای نقشه سه‌بعدی مفید است. برای تنظیم ارتفاع برای یک نشانگر، مقدار LatLngAltitude به عنوان مقدار گزینه MarkerView.position تعیین کنید:

تایپ اسکریپت 

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

جاوا اسکریپت 

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 تنظیم کند، همانطور که در مثال زیر نشان داده شده است:

تایپ اسکریپت 

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

جاوا اسکریپت 

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

مراحل بعدی

نشانگرها را قابل کلیک و در دسترس قرار دهید