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

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

توجه: راهنمای استفاده از TypeScript و Google Maps را بخوانید.

جاوا اسکریپت

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

توجه: راهنمای استفاده از TypeScript و Google Maps را بخوانید.

جاوا اسکریپت

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

توجه: راهنمای استفاده از TypeScript و Google Maps را بخوانید.

جاوا اسکریپت

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

مراحل بعدی

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