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

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

شما می‌توانید انیمیشن‌های مسیر دوربین را به نقشه سه‌بعدی خود اضافه کنید تا تجربه‌ای فراگیرتر برای کاربرانتان فراهم کنید. انیمیشن‌های مسیر دوربین می‌توانند به سمت یا دور یک نقطه روی نقشه حرکت کنند.

مثال زیر انیمیشن‌های flyCameraTo و flyCameraAround را با هم ترکیب می‌کند:

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

نقشه‌های سه‌بعدی در 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});
}