支持

本页面列出了矢量地图和 WebGL 功能的已知问题和解决方法。

浏览器/设备支持

WebGL 功能预览支持的浏览器和设备与 Maps JavaScript API 相同。如需检查特定设备上的浏览器是否支持 WebGL，请访问 https://get.webgl.org/ 或 caniuse.com。此外，请确保在浏览器设置中启用硬件加速，否则矢量地图将还原为光栅地图。

光栅地图还是矢量地图？

有时，矢量地图可能会回退为光栅地图。如果发生这种情况，依赖矢量地图的功能将无法使用。有多种原因可能会导致矢量地图回退为光栅地图。本部分介绍了如何正确配置网络浏览器，以及如何以编程方式检查是否存在矢量地图功能。

检查 Chrome 中的浏览器功能

如需确定在安装特定 Chrome 时启用了哪些硬件加速功能，请导航至 chrome://gpu/，并确保已启用以下各项（以绿色显示）：

“OpenGL: Enabled”
“WebGL: Hardware accelerated”
“WebGL2: Hardware accelerated”

启用硬件加速功能

为了支持矢量地图，大多数浏览器都必须启用硬件加速。如需在 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 会自动回退到使用光栅地图。

报告 bug

在报告 bug 之前，请先将浏览器和 GPU 驱动程序更新到最新版本。
请访问 chrome://settings/system (Chrome)、about:preferences#general (Firefox)、edge://settings/system (Microsoft Edge)，确保已启用硬件加速设置。对于 Safari，macOS 10.15 或更高版本会自动启用此设置。如果您使用的是旧版 MacOS，请转到 Safari 高级设置，确保“使用硬件加速”选项处于启用状态。
在 bug 报告中添加 jsfiddle 示例代码链接。
此外，如果您在遇到任何渲染问题，请截取 chrome://gpu (Chrome)、about:support (Firefox) 或 edge://gpu (Microsoft Edge) 的屏幕截图，并在 bug 报告中附加 GPU 相关信息。

欢迎您提供反馈意见！

由于我们致力于为您和您的最终用户提供更好的矢量地图体验，因此非常重视您的反馈。如果您遇到以下情况，请告知我们：

在您的 Web 应用中检测到任何新的 JavaScript 错误或 bug/崩溃。
矢量地图的启动延迟时间明显比光栅地图更长。在这种情况下，提供启动延迟回归的指标会非常有用。总而言之，我们希望了解启动延迟时间是否超过了可接受的阈值。
矢量地图体验不如预期。如果您记录 FPS 或卡顿指标，那么这些指标在矢量地图和光栅地图之间有何差异？
各个浏览器之间的性能差异很大。

如果您设置了 A/B 测试来比较矢量地图与光栅地图，请分享您获得的所有性能反馈，因为这对于我们优化功能非常有用。