本頁面列出向量地圖和 WebGL 功能的已知問題和解決方法。
瀏覽器/裝置支援
WebGL 功能預覽支援與 Maps JavaScript API 相同的瀏覽器和裝置。如要檢查特定裝置上的瀏覽器是否支援 WebGL,請造訪 https://get.webgl.org/ 或 caniuse.com。此外,請確認瀏覽器設定中的硬體加速功能已啟用,否則向量地圖會還原為光柵地圖。
是光柵地圖,還是向量地圖?
向量地圖有時可能會轉換回光柵地圖。發生這種情況時,便無法使用向量地圖相關功能。有許多原因可能造成地圖轉換回光柵地圖。這個部分說明如何正確設定網路瀏覽器,以及如何透過程式輔助方式檢查向量地圖功能是否正常運作。
檢查 Chrome 的瀏覽器功能
如要判斷在特定 Chrome 安裝過程中哪些硬體加速功能已啟用,請前往 chrome://gpu/,然後確認下列項目為啟用狀態 (綠色):
- 「OpenGL: Enabled」(OpenGL:已啟用)
- 「WebGL: Hardware accelerated」(WebGL:硬體加速)
- 「WebGL2: Hardware accelerated」(WebGL2:硬體加速)
啟用硬體加速功能
為了支援向量地圖,在大部分瀏覽器中都必須啟用硬體加速功能。如要在 Chrome 和 Microsoft Edge 中啟用硬體加速功能,請開啟「設定」,選取「系統」,然後確認「在可用時使用硬體加速」已啟用。
- 瞭解如何在 Safari 中變更網站偏好設定。
- 瞭解 Firefox 的效能設定。
透過程式輔助方式檢查地圖為光柵或向量
您可以呼叫 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;
JavaScript
/** * 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 偵測行動網路瀏覽器,並使用與光柵地圖 (而非向量地圖) 相關聯的地圖 ID。我們預期某些行動裝置的算繪效能會比較慢。如果您選擇在行動網路上使用向量地圖,懇請您提供效能統計資料和意見回饋,我們會由衷感謝。如上所述,如果無法使用向量地圖,向量地圖 ID 會自動退回使用光柵地圖。
回報錯誤
- 請先將瀏覽器和 GPU 驅動程式更新至最新版本,再回報錯誤。
- 請確認
chrome://settings/system
(Chrome)、about:preferences#general
(Firefox)、edge://settings/system
(Microsoft Edge) 中的硬體加速設定已啟用。在 Safari 中,macOS 10.15 以上版本會自動啟用這項設定。如果是舊版 MacOS,請前往 Safari 進階設定,並確認「使用硬體加速」選項已啟用。 - 在錯誤報告中加入 jsfiddle 程式碼範例連結。
- 如果遇到任何算繪問題,請在錯誤報告中一併附上
chrome://gpu
(Chrome)、about:support
(Firefox) 或edge://gpu
(Microsoft Edge) 的螢幕截圖,以及 GPU 相關資訊。
歡迎提供您的寶貴意見!
我們致力於為您和使用者提供最優質的向量地圖服務,因此非常重視您的寶貴意見。如有以下情況,請通知我們:
- 您在網頁應用程式中偵測到任何新的 JavaScript 錯誤或當機問題。
- 向量地圖的啟動延遲時間遠比光柵地圖更長。在這種情況下,啟動延遲迴歸的指標非常實用。總而言之,我們希望瞭解啟動延遲時間是否會超過可接受的門檻。
- 向量地圖服務的流暢度不如預期。如果您記錄每秒影格數或資源浪費指標,這些指標在向量地圖和光柵地圖中有何差異?
- 各種瀏覽器之間的效能差異很大。
如果您設定 A/B 測試來比較向量地圖與光柵地圖,歡迎將效能方面的任何意見與我們分享,這有助於我們調整這項功能。