این صفحه فهرستی از مشکلات شناختهشده و راهحلهای موجود برای نقشههای برداری و ویژگیهای WebGL را ارائه میدهد.
پشتیبانی مرورگر/دستگاه
پیشنمایش ویژگی WebGL از همان مرورگرها و دستگاههایی پشتیبانی میکند که Maps JavaScript API از آنها پشتیبانی میکند. برای بررسی اینکه آیا مرورگر روی یک دستگاه خاص از WebGL پشتیبانی میکند یا خیر، به get.webgl.org یا caniuse.com مراجعه کنید. لطفاً مطمئن شوید که شتاب سختافزاری در تنظیمات مرورگر فعال شده است، در غیر این صورت نقشههای برداری به رستر (raster) تبدیل میشوند.
رستر یا وکتور؟
گاهی اوقات، یک نقشه برداری ممکن است به رستر بازگردد. وقتی این اتفاق میافتد، ویژگیهای وابسته به نقشه برداری در دسترس نیستند. بازگشت به نقشه رستر ممکن است به دلایل مختلفی رخ دهد. این بخش به شما نشان میدهد که چگونه مرورگر وب خود را به درستی پیکربندی کنید و چگونه به صورت برنامهنویسی بررسی کنید که آیا قابلیت نقشه برداری وجود دارد یا خیر.
بررسی قابلیتهای مرورگر در کروم
برای تعیین اینکه کدام قابلیتهای شتاب سختافزاری در یک نسخه خاص از کروم فعال هستند، به chrome://gpu/ بروید و مطمئن شوید که موارد زیر (به رنگ سبز) فعال هستند:
- "OpenGL: فعال"
- «وبجیال: شتابدهنده سختافزاری»
- «WebGL2: شتابدهنده سختافزاری»
(اینها فقط الزامات اولیه هستند، عوامل دیگری نیز میتوانند بر پشتیبانی تأثیر بگذارند، به «اشکالات شناخته شده» در زیر مراجعه کنید.)
فعال کردن شتاب سختافزاری
برای پشتیبانی از نقشههای برداری، شتاب سختافزاری باید در اکثر مرورگرها فعال باشد. برای فعال کردن شتاب سختافزاری در کروم و مایکروسافت اج، تنظیمات را باز کنید، سیستم را انتخاب کنید و مطمئن شوید که گزینه «استفاده از شتاب سختافزاری در صورت وجود» فعال است.
- آموزش تغییر تنظیمات وبسایتها در سافاری
- با تنظیمات عملکرد فایرفاکس آشنا شوید.
به صورت برنامهنویسی، رستر یا وکتور بودن را بررسی کنید
شما میتوانید با فراخوانی تابع map.getRenderingType() به صورت برنامهنویسی بررسی کنید که آیا یک نقشه رستری است یا برداری. مثال زیر کدی را برای نظارت بر رویداد renderingtype_changed نشان میدهد و یک پنجره اطلاعات را نمایش میدهد که نشان میدهد آیا نقشه رستری است یا برداری.
تایپ اسکریپت
/** * This example creates a map with an info window that shows whether * the map render type is raster or vector. */ function initMap() { const center = {lat: 0, lng: 0}; const map = new google.maps.Map(document.getElementById('map') as HTMLElement, { center, zoom: 10, heading: 0.0, tilt: 0.0, // Map ID for a vector map. mapId: '6ff586e93e18149f', }); const canvas = document.createElement("canvas"); const infoWindow = new google.maps.InfoWindow({ content: '', ariaLabel: 'Raster/Vector', position: center, }); infoWindow.open({ map, }); map.addListener('renderingtype_changed', () => { infoWindow.setContent(`${map.getRenderingType()}`); }); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
جاوا اسکریپت
/** * This example creates a map with an info window that shows whether * the map render type is raster or vector. */ function initMap() { const center = { lat: 0, lng: 0 }; const map = new google.maps.Map(document.getElementById("map"), { center, zoom: 10, heading: 0.0, tilt: 0.0, // Map ID for a vector map. mapId: "6ff586e93e18149f", }); const canvas = document.createElement("canvas"); const infoWindow = new google.maps.InfoWindow({ content: "", ariaLabel: "Raster/Vector", position: center, }); infoWindow.open({ map, }); map.addListener("renderingtype_changed", () => { infoWindow.setContent(`${map.getRenderingType()}`); }); } window.initMap = initMap;
همچنین میتوانید از زمینه رندر WebGL برای بررسی پشتیبانی از WebGL 2 استفاده کنید:
const canvas = document.createElement("canvas");
canvas.getContext("webgl2") ? console.log("WebGL 2 is supported") : console.log("WebGL 2 is NOT supported");
روشهای دیگر برای تشخیص برنامهنویسی زمینه رندر WebGL را بیاموزید.
پشتیبانی وب موبایل
پشتیبانی وب موبایل از نقشههای برداری هنوز در مرحله آزمایشی است. توسعهدهندگان میتوانند از APIهای کلاینت برای شناسایی مرورگرهای وب موبایل استفاده کنند و از شناسه نقشه مرتبط با نقشه رستری به جای نقشه برداری استفاده کنند. ما پیشبینی میکنیم که عملکرد رندرینگ برای برخی از دستگاههای تلفن همراه کندتر باشد. اگر تصمیم به استفاده از نقشههای برداری در وب موبایل دارید، از آمار عملکرد و بازخورد بسیار قدردانی میکنیم. همانطور که در بالا ذکر شد، اگر پشتیبانی از نقشههای برداری در دسترس نباشد، شناسه نقشه برداری به طور خودکار به استفاده از نقشه رستری منجر میشود.
اشکالات
اشکالات شناخته شده
- یک مشکل شناختهشده در کروم در برخی از دستگاههای macOS با پردازندههای گرافیکی AMD وجود دارد. این مشکل میتواند بهویژه زمانی گیجکننده باشد که macOS بهطور پویا بین پردازندههای گرافیکی در دستگاههایی با چندین پردازنده گرافیکی جابهجا میشود، بنابراین ممکن است نقشههای برداری بسته به برنامههای در حال اجرا یا اتصال مانیتور خارجی در دسترس نباشند. به نظر میرسد فعال کردن ANGLE Metal backend کروم در برخی موارد این مشکل را برطرف میکند. میتوانید برنامههای کلی برای انتشار این مشکل را در https://bugs.chromium.org/p/chromium/issues/detail?id=1322521 دنبال کنید.
گزارش اشکالات
- لطفاً قبل از گزارش اشکال، مرورگر و درایور پردازنده گرافیکی را به آخرین نسخه بهروزرسانی کنید.
- مطمئن شوید که تنظیمات شتاب سختافزاری در
chrome://settings/system(کروم)،about:preferences#general(فایرفاکس)،edge://settings/system(مایکروسافت اج) فعال باشد. در سافاری، این تنظیم به طور خودکار در macOS نسخه ۱۰.۱۵ یا جدیدتر فعال میشود. برای نسخه(های) قدیمیتر MacOS، لطفاً به تنظیمات پیشرفته سافاری بروید و مطمئن شوید که گزینه "استفاده از شتاب سختافزاری" فعال است. - لینک نمونه کد jsfiddle را در گزارش اشکال قرار دهید.
- لطفاً از
chrome://gpu(کروم)،about:support(فایرفاکس) یاedge://gpu(مایکروسافت اج) اسکرینشات بگیرید و در صورت بروز هرگونه مشکل در رندر، اطلاعات مربوط به پردازنده گرافیکی (GPU) را در گزارش اشکال پیوست کنید.
نظرت رو به ما بگو!
ما برای بازخورد شما ارزش قائلیم و تلاش میکنیم تا بهترین تجربه استفاده از نقشههای برداری را برای شما و کاربران نهاییتان فراهم کنیم. لطفاً در صورت وجود موارد زیر به ما اطلاع دهید:
- هرگونه خطای جاوا اسکریپت یا باگ/کرش جدیدی که در برنامههای وب خود شناسایی میکنید، وجود دارد.
- تأخیر شروع به کار برای نقشههای برداری به طور قابل توجهی بدتر از نقشههای رستری است. در این صورت، معیارهای رگرسیون تأخیر شروع به کار بسیار مفید هستند. به طور کلی، ما میخواهیم بدانیم که آیا تأخیر شروع به کار از آستانههای قابل قبول فراتر میرود یا خیر.
- تجربه استفاده از نقشههای برداری (وکتور) آنقدرها هم روان نیست. اگر FPS یا معیارهای jank را وارد کنید، مقایسه آنها بین نقشههای برداری و رستری چگونه است؟
- عملکرد بسته به مرورگر بسیار متفاوت است.
اگر برای مقایسه نقشههای برداری در مقابل نقشههای رستری، تست A/B راهاندازی کردهاید، لطفاً هرگونه بازخورد عملکردی که دریافت میکنید را به اشتراک بگذارید، زیرا این امر برای کمک به ما در اصلاح این ویژگی بسیار مفید خواهد بود.