نمای کلی

ویژگی‌های مجهز به WebGL برای Maps JavaScript API به شما امکان می‌دهد شیب و چرخش را کنترل کنید، اشیای سه‌بعدی را مستقیماً به نقشه اضافه کنید، و کارهای دیگری انجام دهید. ویژگی‌های زیر گنجانده شده است:

  • نمای رونهاد WebGL به شما امکان می‌دهد گرافیک‌های دوبعدی و سه‌بعدی سفارشی و محتوای پویانمایی‌شده به نقشه‌هایتان اضافه کنید.
  • اکنون می‌توان شیب و سر را به‌صورت برنامه‌ریزی‌شده و بااستفاده از اشاره‌های موشواره و صفحه‌کلید تنظیم کرد.
  • با map.moveCamera() می‌توانید چندین ویژگی دوربین را به‌طور هم‌زمان تغییر دهید.
  • بزرگ‌نمایی اکنون از مقادیر کسری پشتیبانی می‌کند.

شروع کنید

برای استفاده از ویژگی‌های جدید WebGL، باید از نقشه برداری استفاده کنید. این بخش نحوه انجام آن را نشان می‌دهد.

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

از گزینه renderingType برای مشخص کردن نوع رندر کردن شطرنجی یا برداری برای نقشه‌تان استفاده کنید (نیازی به شناسه نقشه نیست):

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

    const { Map, RenderingType } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
    
  2. هنگام مقداردهی اولیه نقشه، از گزینه renderingType برای مشخص کردن RenderingType.VECTOR یا RenderingType.RASTER استفاده کنید:

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

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

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

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

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

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

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

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

استفاده از عنصر <gmp-map>

نقشه‌های بُرداری، کج کردن، و جهت به‌طور پیش‌فرض هنگام استفاده از عنصر <gmp-map> فعال هستند، که به شما امکان می‌دهد بااستفاده از HTML نقشه‌ای به صفحه‌تان اضافه کنید. بیشتر بدانید.

مثال‌ها

برای نشان دادن این ویژگی‌ها، نمونه‌هایی ارائه شده است: