支援

本頁列出向量地圖和 WebGL 功能的已知問題和解決方法。

瀏覽器/裝置支援

WebGL 功能預覽支援的瀏覽器和裝置,與 Maps JavaScript API 相同。如要檢查特定裝置上的瀏覽器是否支援 WebGL,請造訪 get.webgl.orgcaniuse.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 會自動退回使用光柵地圖。

錯誤

已知錯誤

  • Chrome 在某些搭載 AMD GPU 的 macOS 裝置上,會發生一個問題。在搭載多個 GPU 的裝置之間動態切換 GPU 時,這個問題格外容易造成錯亂,向量地圖可能因此無法使用,實際情況取決於還有哪些應用程式正在執行,或者是否外接螢幕。部分案例顯示,啟用 Chrome 即將推出的 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 進階設定,並確認「使用硬體加速」選項已啟用。
  • 在錯誤報告中加入 jsfiddle 程式碼範例連結。
  • 如果遇到任何算繪問題,請在錯誤報告中一併附上 chrome://gpu (Chrome)、about:support (Firefox) 或 edge://gpu (Microsoft Edge) 的螢幕截圖,以及 GPU 相關資訊。

歡迎提供寶貴意見!

我們致力於為您和使用者提供最優質的向量地圖服務,因此非常重視您的寶貴意見。如有以下情況,請通知我們:

  • 您在網頁應用程式中偵測到任何新的 JavaScript 錯誤或當機問題。
  • 向量地圖的啟動延遲時間遠比光柵地圖更長。在這種情況下,啟動延遲迴歸的指標非常實用。總而言之,我們希望瞭解啟動延遲時間是否會超過可接受的門檻。
  • 向量地圖服務的流暢度不如預期。如果您記錄每秒影格數或卡頓指標,這些指標在向量和光柵地圖中有何差異?
  • 各種瀏覽器之間的效能差異很大。

如果您設定 A/B 測試來比較向量與光柵地圖,歡迎分享效能方面的意見,這對功能的提升會大有幫助。