محدود کردن نمای دوربین و محدودیت‌ها

Select platform: Android iOS JavaScript

ممکن است برای شما مطلوب باشد که حرکت دوربین، حداکثر ارتفاع یا ایجاد مرزهای طول و عرض جغرافیایی را که حرکت کاربر را در یک نقشه مشخص محدود می‌کند، کنترل کنید. می‌توانید این کار را با استفاده از محدودیت‌های دوربین انجام دهید.

مثال زیر نقشه‌ای را نشان می‌دهد که مرزهای مکانی آن برای محدود کردن حرکت دوربین تنظیم شده است:

محدود کردن مرزهای نقشه

You can restrict the geographical boundaries of the camera by setting the bounds option.

The following code sample demonstrates restricting the map bounds:

async function init() {
  const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: { lat: 37.7704, lng: -122.3985, altitude: 500 },
    tilt: 67.5,
    mode: MapMode.HYBRID,
    bounds: {south: 37, west: -123, north: 38, east: -121}
  });

init();
}

محدود کردن دوربین

شما می‌توانید با تنظیم هر یک از گزینه‌های زیر، حرکت دوربین را محدود کنید:

• maxAltitude
• minAltitude
• maxHeading
• minHeading
• maxTilt
• minTilt

نمونه کد زیر محدود کردن دوربین را نشان می‌دهد:

async function init() {
  const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: { lat: 37.7704, lng: -122.3985, altitude: 500 },
    tilt: 67.5,
    mode: MapMode.HYBRID,
    minAltitude: 1,
    maxAltitude: 1000,
    minTilt: 35,
    maxTilt: 55
  });

 document.body.append(map);
}

init();

محدود کردن محدوده نقشه و دوربین

شما می‌توانید همزمان مرزهای نقشه و دوربین را محدود کنید. نمونه کد زیر محدود کردن مرزهای نقشه و دوربین را نشان می‌دهد:

async function init() {
  const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: { lat: 37.7704, lng: -122.3985, altitude: 500 },
    tilt: 67.5,
    mode: MapMode.HYBRID,
    minAltitude: 1,
    maxAltitude: 1000,
    minTilt: 35,
    maxTilt: 55,
    bounds: {south: 37, west: -123, north: 38, east: -121}
  });

 document.body.append(map);
}

init();

مسیرهای از پیش تعیین شده دوربین

نقشه‌های سه‌بعدی در Maps JavaScript دو ​​مسیر دوربین از پیش تعیین‌شده ارائه می‌دهد. مسیرهای دوربین را می‌توان با تغییر مدت زمان انیمیشن (در نتیجه افزایش یا کاهش سرعت) یا با ترکیب آنها برای ایجاد تجربیات سینمایی‌تر، سفارشی‌سازی کرد. علاوه بر این، می‌توانید ارتفاع دوربین را با مشخص کردن altitudeMode کنترل کنید.

نقشه‌های سه‌بعدی در Maps JavaScript از مسیرهای دوربین زیر پشتیبانی می‌کنند:

• انیمیشن flyCameraTo از مرکز نقشه به مقصد مشخص شده پرواز می‌کند.
• flyCameraAround animation rotates around a point on the map the specified number of revolutions.

دو مسیر موجود را می‌توان با هم ترکیب کرد تا به نقطه مورد نظر پرواز کنند، دور آن بچرخند و سپس در زمان مشخص شده متوقف شوند.

پرواز به

نمونه کد زیر، متحرک‌سازی دوربین برای پرواز به سمت یک مکان را نشان می‌دهد:

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraTo({
    endCamera: {
      center: { lat: 37.6191, lng: -122.3816, altitude: 500 },
      altitudeMode: 'RELATIVE_TO_GROUND',
      tilt: 67.5,
      range: 1000
    },
    durationMillis: 5000
  });
}

Fly around

نمونه کد زیر، متحرک‌سازی دوربین برای پرواز در اطراف یک مکان را نشان می‌دهد:

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraAround({
    camera,
    durationMillis: 60000,
    repeatCount: 1
  });
}

ترکیب انیمیشن‌ها

نمونه کد زیر ترکیب انیمیشن‌ها را برای انتقال دوربین به یک مکان و سپس چرخش آن در اطراف مکان پس از پایان انیمیشن اول نشان می‌دهد:

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraTo({
    endCamera: flyToCamera,
    durationMillis: 5000,
  });

  map.addEventListener('gmp-animationend', () => {
    map.flyCameraAround({
      camera: flyToCamera,
      durationMillis: 60000,
      repeatCount: 1
    });
  }, {once: true});
}

Control gesture handling

وقتی کاربر صفحه‌ای که حاوی نقشه است را اسکرول می‌کند، عمل اسکرول کردن می‌تواند ناخواسته باعث بزرگنمایی نقشه شود. می‌توانید این رفتار را با تنظیم گزینه gestureHandling map کنترل کنید.

gestureHandling: cooperative

مدیریت حرکات «همکاری» به کاربر اجازه می‌دهد بدون تأثیر بر بزرگنمایی یا حرکت افقی نقشه، صفحه را پیمایش کند. برای بزرگنمایی، کاربران می‌توانند از کنترل‌ها، حرکات دو انگشتی (برای دستگاه‌های لمسی) یا با نگه داشتن CMD/CTRL هنگام پیمایش استفاده کنند.

کد زیر تنظیم مدیریت ژست‌ها را روی «همکاری» نشان می‌دهد:

new Map3DElement({
  center: { lat: 37.729901343702736, lng: -119.63788444355905, altitude: 1500 },
  tilt: 70,
  heading: 50,
  range: 4000,
  gestureHandling: 'COOPERATIVE',
});

مدیریت حرکات: greedy

مدیریت حرکات "حریصانه" به تمام رویدادهای پیمایش و حرکات لمسی واکنش نشان می‌دهد.

gestureHandling: auto

"Auto" gesture handling changes the behavior of the map depending on whether or not the map is contained in an <iframe> , and whether the page is scrollable.

• اگر نقشه درون یک <iframe> باشد، مدیریت حرکات به صورت "مشارکتی" انجام خواهد شد.
• اگر نقشه درون یک <iframe> نباشد، مدیریت حرکات "حریصانه" خواهد بود.