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

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

مراحل بعدی

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