نمای کلی

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

  • WebGL Overlay View به شما امکان می دهد گرافیک های 2 بعدی و 3 بعدی و محتوای متحرک سفارشی را به نقشه های خود اضافه کنید.
  • اکنون می توان شیب و عنوان را به صورت برنامه ریزی شده و با استفاده از حرکات ماوس و صفحه کلید تنظیم کرد.
  • 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 map را روی true تنظیم کنید یا map.setTiltInteractionEnabled را فراخوانی کنید.
  • برای فعال کردن پاننگ، گزینه headingInteractionEnabled map را روی true تنظیم کنید یا map.setHeadingInteractionEnabled را فراخوانی کنید.

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

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

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

در مرحله بعد، کد اولیه نقشه خود را با شناسه نقشه که ایجاد کرده اید به روز کنید. می توانید شناسه های نقشه خود را در صفحه مدیریت نقشه ها پیدا کنید. زمانی که نقشه را با استفاده از ویژگی 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 یک نقشه به صفحه خود اضافه کنید. بیشتر بدانید .

نمونه ها

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