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

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

جاوا اسکریپت 

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

جاوا اسکریپت 

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

جاوا اسکریپت 

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

مراحل بعدی

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