نقشه های برداری

Maps JavaScript API دو پیاده سازی متفاوت از نقشه را ارائه می دهد: شطرنجی و برداری. نقشه شطرنجی به‌طور پیش‌فرض بارگیری می‌شود و نقشه را به‌عنوان شبکه‌ای از کاشی‌های تصویر شطرنجی مبتنی بر پیکسل بارگیری می‌کند، که توسط Google Maps Platform در سمت سرور تولید می‌شوند، سپس به برنامه وب شما ارائه می‌شوند. نقشه برداری از کاشی های مبتنی بر برداری تشکیل شده است که در زمان بارگذاری در سمت کلاینت با استفاده از WebGL ترسیم می شوند، یک فناوری وب که به مرورگر اجازه می دهد تا به GPU دستگاه کاربر برای ارائه گرافیک های دو بعدی و سه بعدی دسترسی داشته باشد.

نقشه برداری همان نقشه گوگلی است که کاربران شما با آن آشنا هستند و مزایای زیادی نسبت به نقشه کاشی شطرنجی پیش‌فرض ارائه می‌کند، که مهم‌ترین آن وضوح تصاویر مبتنی بر برداری و افزودن ساختمان‌های سه بعدی در سطوح بزرگنمایی نزدیک است. نقشه برداری از برخی ویژگی‌های جدید نیز پشتیبانی می‌کند، مانند امکان افزودن محتوای سه‌بعدی با نمای WebGL Overlay، کنترل شیب و هدینگ برنامه‌ای، کنترل پیشرفته دوربین، و زوم کسری برای زوم کردن روان‌تر.

با نقشه برداری شروع کنید

دوربین را کنترل کنید

از تابع map.moveCamera() برای به روز رسانی هر ترکیبی از ویژگی های دوربین به طور همزمان استفاده کنید. map.moveCamera() یک پارامتر واحد را می پذیرد که شامل تمام ویژگی های دوربین برای به روز رسانی باشد. مثال زیر فراخوانی map.moveCamera() را برای تنظیم center ، zoom ، heading و tilt به طور همزمان نشان می دهد:

map.moveCamera({
  center: new google.maps.LatLng(37.7893719, -122.3942),
  zoom: 16,
  heading: 320,
  tilt: 47.5
});

همانطور که در اینجا نشان داده شده است، می توانید با فراخوانی map.moveCamera() با یک حلقه انیمیشن، ویژگی های دوربین را متحرک کنید:

const degreesPerSecond = 3;

function animateCamera(time) {
  // Update the heading, leave everything else as-is.
  map.moveCamera({
    heading: (time / 1000) * degreesPerSecond
  });

  requestAnimationFrame(animateCamera);
}

// Start the animation.
requestAnimationFrame(animateCamera);

زوم کسری

نقشه های برداری از زوم کسری پشتیبانی می کنند، که به شما امکان می دهد با استفاده از مقادیر کسری به جای اعداد صحیح بزرگنمایی کنید. در حالی که هر دو نقشه شطرنجی و برداری از زوم کسری پشتیبانی می کنند، بزرگنمایی کسری به طور پیش فرض برای نقشه های برداری روشن است و به طور پیش فرض برای نقشه های شطرنجی خاموش است. از گزینه isFractionalZoomEnabled map برای روشن و خاموش کردن زوم کسری استفاده کنید.

مثال زیر فعال کردن زوم کسری را هنگام شروع اولیه نقشه نشان می دهد:

map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  isFractionalZoomEnabled: true
});

همچنین می‌توانید زوم کسری را با تنظیم گزینه isFractionalZoomEnabled map همانطور که در اینجا نشان داده شده است روشن و خاموش کنید:

// Using map.set
map.set('isFractionalZoomEnabled', true);

// Using map.setOptions
map.setOptions({isFractionalZoomEnabled: true});

می‌توانید شنونده‌ای تنظیم کنید تا تشخیص دهد بزرگ‌نمایی کسری روشن است یا خیر. اگر به طور صریح isFractionalZoomEnabled روی true یا false تنظیم نکرده باشید، بسیار مفید است. کد مثال زیر بررسی می کند که آیا بزرگنمایی کسری فعال است یا خیر:

map.addListener('isfractionalzoomenabled_changed', () => {
  const isFractionalZoomEnabled = map.get('isFractionalZoomEnabled');
  if (isFractionalZoomEnabled === false) {
    console.log('not using fractional zoom');
  } else if (isFractionalZoomEnabled === true) {
    console.log('using fractional zoom');
  } else {
    console.log('map not done initializing yet');
  }
});