نوع رندر (رستر و وکتور)

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

نوع نقشه برداری برای بهترین تجربه کاربری توصیه می‌شود، زیرا وضوح بصری بهبود یافته، ذخیره سازی بهتر در نقشه‌ها و همچنین امکان کنترل شیب و جهت روی نقشه را فراهم می‌کند. درباره ویژگی‌های نقشه برداری بیشتر بدانید.

نوع رندر پیش‌فرض

نوع رندر پیش‌فرض نقشه بسته به پیاده‌سازی شما متفاوت است.

  • نقشه‌هایی که از عنصر <gmp-map> استفاده می‌کنند، به طور پیش‌فرض از نوع رندر برداری (vector) هستند.

  • نقشه‌ها با استفاده از یک عنصر <div> با google.maps.Map که به طور پیش‌فرض از نوع رندر رستری است.

نوع رندرینگ یک نقشه را یا با مشخص کردن گزینه renderingType map یا با تنظیم این گزینه روی یک شناسه نقشه مرتبط، تنظیم کنید. گزینه renderingType هرگونه تنظیمات نوع رندرینگ انجام شده با پیکربندی شناسه نقشه را لغو می‌کند.

گزینه renderingType مشخص کنید

از گزینه renderingType برای مشخص کردن نوع رندر رستری یا برداری برای نقشه خود استفاده کنید (نیازی به شناسه نقشه نیست). برای نقشه‌هایی که با استفاده از یک عنصر div و جاوا اسکریپت بارگذاری می‌شوند، نوع رندر پیش‌فرض google.maps.RenderingType.RASTER است. برای تنظیم گزینه renderingType این مراحل را دنبال کنید:

  1. کتابخانه RenderingType بارگذاری کنید؛ این کار را می‌توان هنگام بارگذاری کتابخانه Maps انجام داد:

    const { Map, RenderingType } = await google.maps.importLibrary("maps");

  2. هنگام مقداردهی اولیه نقشه، از گزینه renderingType برای تعیین RenderingType.VECTOR یا RenderingType.RASTER استفاده کنید:

    map = new Map(
  document.getElementById('map'),
  {
    zoom: 4,
    center: position,
    renderingType: RenderingType.VECTOR,
  }
);

وقتی نوع رندر نقشه برداری تنظیم شد، باید گزینه‌های مربوط به ویژگی‌های مورد نیاز را تنظیم کنید.

  • برای فعال کردن کج شدن، گزینه tiltInteractionEnabled map را روی true تنظیم کنید یا map.setTiltInteractionEnabled(true) را فراخوانی کنید.
  • برای فعال کردن قابلیت panning، گزینه نقشه headingInteractionEnabled را روی true تنظیم کنید یا map.setHeadingInteractionEnabled(true) را فراخوانی کنید.

برای نقشه‌هایی که با استفاده از عنصر <gmp-map> بارگذاری می‌شوند، نوع رندر پیش‌فرض google.maps.RenderingType.VECTOR است که کنترل شیب و جهت آن فعال است. برای تنظیم نوع رندر با استفاده از عنصر <gmp-map> ، از ویژگی rendering-type استفاده کنید.

برای تنظیم نوع رندر از شناسه نقشه استفاده کنید

همچنین می‌توانید نوع رندر را با استفاده از شناسه نقشه مشخص کنید. با دنبال کردن مراحل موجود در «استفاده از سبک‌دهی نقشه مبتنی بر ابر - دریافت شناسه نقشه»، یک شناسه نقشه ایجاد کنید. حتماً نوع نقشه را روی جاوا اسکریپت تنظیم کنید و یک گزینه ( وکتور یا رستر ) را انتخاب کنید. برای فعال کردن شیب و چرخش روی نقشه، گزینه Tilt and Rotation را علامت بزنید. انجام این کار به شما امکان می‌دهد تا این مقادیر را به صورت برنامه‌نویسی تنظیم کنید و همچنین به کاربران اجازه می‌دهد شیب و جهت را مستقیماً روی نقشه تنظیم کنند. اگر استفاده از شیب یا جهت تأثیر منفی بر برنامه شما می‌گذارد، تیک گزینه Tilt and Rotation را بردارید تا کاربران نتوانند شیب و چرخش را تنظیم کنند.

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

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

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

تشخیص اینکه از کدام نوع رندر استفاده می‌شود

برای تشخیص اینکه از کدام نوع رندر استفاده شده است، همانطور که در مثال زیر نشان داده شده است، تابع getRenderingType() را روی شیء نقشه فراخوانی کنید:

  // Wait for the map to finish loading.
  google.maps.event.addListenerOnce(map, "tilesloaded", () => {
      // Print the rendering type to the console.
      console.log(`${map.getRenderingType()}`);
  });```