ویژگیهای مبتنی بر WebGL برای Maps JavaScript API به شما امکان میدهد شیب و چرخش را کنترل کنید، اشیاء سه بعدی را مستقیماً به نقشه اضافه کنید و موارد دیگر. ویژگی های زیر گنجانده شده است:
- WebGL Overlay View به شما امکان می دهد گرافیک های 2 بعدی و 3 بعدی و محتوای متحرک سفارشی را به نقشه های خود اضافه کنید.
- اکنون می توان شیب و عنوان را به صورت برنامه ریزی شده و با استفاده از حرکات ماوس و صفحه کلید تنظیم کرد.
- map.moveCamera() به شما امکان می دهد چندین ویژگی دوربین را به طور همزمان تغییر دهید.
- زوم اکنون از مقادیر کسری پشتیبانی می کند.
شروع کنید
برای استفاده از ویژگی های جدید WebGL، باید از نقشه برداری استفاده کنید. این بخش به شما نشان می دهد که چگونه.
گزینه renderingType
را مشخص کنید
از گزینه renderingType
برای تعیین نوع رندر شطرنجی یا برداری برای نقشه خود استفاده کنید (بدون نیاز به شناسه نقشه):
بارگذاری کتابخانه
RenderingType
؛ این را می توان هنگام بارگیری کتابخانه Maps انجام داد:const { Map, RenderingType } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
هنگام تنظیم اولیه نقشه، از گزینه
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 یک نقشه به صفحه خود اضافه کنید. بیشتر بدانید .
نمونه ها
نمونه هایی برای نشان دادن این ویژگی ها ارائه شده است: