کنترل رفتار تصادم، ارتفاع، و رؤیت‌پذیری

انتخاب پلاتفرم: 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;
    }
});

مراحل بعدی

نشانگرها را کلیک‌کردنی و دسترس‌پذیر کنید