支援

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

瀏覽器/裝置支援

WebGL 功能預覽支援的瀏覽器和裝置，與 Maps JavaScript API 相同。如要檢查特定裝置上的瀏覽器是否支援 WebGL，請造訪 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;
index.ts
敬上

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;
index.js

您也可以使用 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 測試來比較向量與光柵地圖，歡迎分享效能方面的意見，這對功能的提升會大有幫助。