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

پلتفرم مورد نظر را انتخاب کنید: اندروید، iOS، جاوا اسکریپت

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

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

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

شما می‌توانید با تنظیم گزینه 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 به تعداد مشخص شده دور یک نقطه روی نقشه می‌چرخد.

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

پرواز به

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

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
  });
}

پرواز در اطراف

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

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});
}

کنترل حرکات دست

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

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

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

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

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

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

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

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

مدیریت خودکار ژست‌ها، رفتار نقشه را بسته به اینکه نقشه در <iframe> قرار دارد یا خیر و اینکه آیا صفحه قابل اسکرول است یا خیر، تغییر می‌دهد.

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