این صفحه مشکلات و راه حل های شناخته شده برای نقشه های برداری و ویژگی های WebGL را فهرست می کند.
پشتیبانی از مرورگر/دستگاه
پیش نمایش ویژگی WebGL از همان مرورگرها و دستگاه هایی مانند Maps JavaScript API پشتیبانی می کند. برای بررسی اینکه آیا مرورگر یک دستگاه خاص از WebGL پشتیبانی می کند یا خیر، از get.webgl.org یا caniuse.com دیدن کنید. لطفاً مطمئن شوید که شتاب سختافزاری در تنظیمات مرورگر فعال است، در غیر این صورت نقشههای برداری به حالت شطرنجی برمیگردند.
رستر یا وکتور؟
گاهی اوقات، یک نقشه برداری ممکن است به حالت شطرنجی بازگردد. وقتی این اتفاق میافتد، ویژگیهای بسته به نقشه برداری در دسترس نیستند. بازگشت به نقشه شطرنجی ممکن است به دلایل مختلفی رخ دهد. این بخش به شما نشان می دهد که چگونه مرورگر وب خود را به درستی پیکربندی کنید، و چگونه به صورت برنامه نویسی بررسی کنید که آیا قابلیت نقشه برداری وجود دارد یا خیر.
قابلیت های مرورگر را در کروم بررسی کنید
برای تعیین اینکه کدام قابلیتهای شتاب سختافزاری در یک نصب خاص Chrome فعال هستند، به chrome://gpu/ بروید و مطمئن شوید که موارد زیر فعال هستند (به رنگ سبز):
- "OpenGL: فعال"
- "WebGL: سخت افزار شتاب گرفت"
- "WebGL2: سخت افزار تسریع شده"
(اینها فقط الزامات اولیه هستند، عوامل دیگری می تواند بر پشتیبانی تأثیر بگذارد، به «اشکالات شناخته شده» در زیر مراجعه کنید.)
فعال کردن شتاب سخت افزاری
برای پشتیبانی از نقشه های برداری، شتاب سخت افزاری باید در اکثر مرورگرها فعال باشد. برای فعال کردن شتاب سختافزاری در کروم و مایکروسافت اج، تنظیمات را باز کنید، سیستم را انتخاب کنید و مطمئن شوید که استفاده از شتاب سختافزار در زمان موجود فعال است.
- نحوه تغییر تنظیمات برگزیده وب سایت ها در سافاری را بیاموزید.
- با تنظیمات عملکرد فایرفاکس آشنا شوید.
شطرنجی یا برداری را به صورت برنامه ای بررسی کنید
با فراخوانی map.getRenderingType()
میتوانید بهصورت برنامهریزی بررسی کنید که آیا نقشهها شطرنجی هستند یا برداری. مثال زیر کدی را برای نظارت بر رویداد renderingtype_changed
نشان میدهد و پنجره اطلاعاتی را نشان میدهد که نشان میدهد آیا یک نقشه شطرنجی یا برداری استفاده میشود.
TypeScript
/** * 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 های سرویس گیرنده برای شناسایی مرورگرهای وب تلفن همراه استفاده کنند و به جای نقشه برداری، از شناسه نقشه مرتبط با نقشه شطرنجی استفاده کنند. ما عملکرد رندر کندتر را برای برخی از دستگاه های تلفن همراه پیش بینی می کنیم. اگر تصمیم به استفاده از نقشه های برداری در وب تلفن همراه دارید، از آمار عملکرد و بازخورد بسیار قدردانی خواهیم کرد. همانطور که در بالا ذکر شد، اگر پشتیبانی از نقشه برداری در دسترس نباشد، شناسه نقشه برداری به طور خودکار به استفاده از نقشه شطرنجی بازگشته است.
اشکالات
اشکالات شناخته شده
- مشکلی در Chrome در برخی از دستگاههای macOS با پردازندههای گرافیکی AMD وجود دارد. هنگامی که macOS به طور پویا بین GPUها در دستگاههایی با چندین پردازنده گرافیکی سوئیچ میکند، این امر میتواند گیجکننده باشد، بنابراین بسته به اینکه چه برنامههایی در حال اجرا هستند یا اینکه یک مانیتور خارجی متصل است، نقشههای برداری ممکن است در دسترس نباشند. به نظر می رسد روشن کردن باطن ANGLE Metal آینده کروم در برخی موارد این مشکل را برطرف می کند. میتوانید برنامههای عمومی برای این کار را در https://bugs.chromium.org/p/chromium/issues/detail?id=1322521 دنبال کنید.
گزارش اشکالات
- لطفاً قبل از گزارش اشکال، مرورگر و درایور GPU را به آخرین نسخه به روز کنید.
- مطمئن شوید که تنظیمات شتاب سختافزار در
chrome://settings/system
(Chrome)،about:preferences#general
(Firefox)،edge://settings/system
(Microsoft Edge) فعال است. در Safari، این تنظیم به طور خودکار در macOS نسخه 10.15 یا جدیدتر فعال می شود. برای نسخه(های) MacOS قدیمی، لطفاً به تنظیمات پیشرفته Safari بروید و مطمئن شوید که گزینه "Use hardware acceleration" فعال است. - لینک کد نمونه jsfiddle را در گزارش اشکال وارد کنید.
- لطفاً یک اسکرین شات از
chrome://gpu
(Chrome)،about:support
(Firefox) یاedge://gpu
(Microsoft Edge) نیز بگیرید، اگر با هر گونه مشکل رندر مواجه شدید، اطلاعات مربوط به GPU را در گزارش اشکال پیوست کنید.
به ما بگویید چه فکر می کنید!
ما برای بازخورد شما ارزش قائل هستیم زیرا در تلاشیم تا بهترین تجربه نقشه برداری را برای شما و کاربران نهایی شما ایجاد کنیم. لطفا به ما اطلاع دهید اگر:
- هر گونه خطای جدید جاوا اسکریپت یا اشکالات / خرابی هایی که در برنامه های وب خود شناسایی می کنید وجود دارد.
- تأخیر راه اندازی برای نقشه های برداری به طور قابل توجهی بدتر از نقشه های شطرنجی است. اگر اینطور باشد، معیارهای رگرسیون تاخیر راه اندازی بسیار مفید هستند. به طور کلی، میخواهیم بدانیم که آیا تأخیر استارتآپ از آستانههای قابل قبول پسرفت میکند یا خیر.
- تجربه نقشه های برداری آنقدر که می تواند صاف نیست. اگر متریک های FPS یا jank را ثبت کنید، چگونه بین نقشه های برداری و شطرنجی مقایسه می شوند؟
- عملکرد بر اساس مرورگر بسیار متفاوت است.
اگر آزمایش A/B را برای مقایسه نقشههای برداری با نقشههای شطرنجی تنظیم کردهاید، لطفاً هر گونه بازخورد عملکردی را که به دست میآورید به اشتراک بگذارید، زیرا این برای کمک به اصلاح ویژگی بسیار مفید خواهد بود.