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

پلتفرم را انتخاب کنید: Android iOS JavaScript

نمای کلی کنترل ها

نقشه‌هایی که از طریق نقشه‌های سه‌بعدی Photorealistic در Maps JavaScript API نمایش داده می‌شوند، حاوی عناصر UI برای پشتیبانی از تعامل کاربر با نقشه هستند. این عناصر به عنوان کنترل شناخته می شوند و شما می توانید انتخاب کنید که آنها را در UI قرار دهید یا نه. اگر کنترل‌های رابط کاربری را سرکوب کنید، کاربر همچنان می‌تواند با استفاده از میان‌برهای صفحه‌کلید در اطراف نقشه حرکت کند.

Photorealistic 3D Maps in Maps JavaScript API همچنین از راهنمایی کاربران شما در اطراف نقشه با استفاده از مسیرهای از پیش تعیین شده دوربین پشتیبانی می کند. این مسیرها را می توان برای ایجاد تجربیات سه بعدی غنی سفارشی و ترکیب کرد.

کنترل های اکتشافی

تصویر زیر مجموعه پیش‌فرض کنترل‌های نمایش‌داده‌شده توسط Photorealistic 3D Maps در Maps JavaScript API را نشان می‌دهد:

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

در زیر لیستی از مجموعه کامل کنترل ها در نقشه های سه بعدی فوتورئالیستی در Maps JavaScript آمده است:

  • کنترل زوم دکمه های "+" و "-" را برای تغییر سطح بزرگنمایی نقشه نمایش می دهد.
  • کنترل Tilt به شما امکان می دهد شیب دوربین را تغییر دهید.
  • کنترل چرخش به شما امکان می دهد عنوان دوربین را تغییر دهید.
  • کنترل Move دکمه های "←"، "→"، "↑" و "↓" را برای تغییر مرکز نقشه نمایش می دهد.

نمونه کد زیر تغییر دادن کنترل های کاوش را نشان می دهد:

جاوا اسکریپت 

const map = new Map3DElement({
  center: { lat: 37.819852, lng: -122.478549, altitude: 2000 },
  tilt: 75,
  heading: 330,
  mode: MapMode.SATELLITE,
  defaultUIDisabled: true,
});

HTML 

<gmp-map-3d
  mode="hybrid"
  range="639.274301042242"
  tilt="64.92100184857551"
  center="34.0768990953219,-118.47450491266041,292.9794737933403"
  heading="-61.02026752077781"
  default-ui-disabled
></gmp-map-3d>

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

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

نقشه های سه بعدی فوتورئالیستی در Maps جاوا اسکریپت از مسیرهای دوربین زیر پشتیبانی می کند:

  • انیمیشن 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 },
      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,
    rounds: 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-animation-end', () => {
    map.flyCameraAround({
      camera: flyToCamera,
      durationMillis: 60000,
      rounds: 1
    });
  }, {once: true});
}

مراحل بعدی