支持渠道

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

浏览器/设备支持

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

光栅地图还是矢量地图？

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

检查 Chrome 中的浏览器功能

如需确定在安装的特定 Chrome 实例中启用了哪些硬件加速功能，请前往 chrome://gpu/，确保已启用以下各项（以绿色显示）：

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

（以上只是基本要求，其他方面的因素也可能会影响支持情况，具体请参见下面的“已知 bug”部分。）

启用硬件加速功能

为了支持矢量地图，大多数浏览器都必须启用硬件加速。如需在 Chrome 和 Microsoft Edge 中启用硬件加速，请打开设置，选择系统，并确保使用硬件加速模式（如果可用）处于启用状态。

以程序化方式检查地图是光栅地图还是矢量地图

您可以通过调用 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

  • 在部分搭载 AMD GPU 的 macOS 设备上，Chrome 存在一个已知问题。当 macOS 在有多个 GPU 的设备上动态切换 GPU 时，情况尤其混乱，因此矢量地图可能无法显示，具体取决于正在运行其他哪些应用或是否连接了外部显示器。在某些情况下，启用 Chrome 即将推出的 ANGLE Metal 后端似乎可以解决此问题。您可以访问 https://bugs.chromium.org/p/chromium/issues/detail?id=1322521，关注这方面的大致发布计划。

报告 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 测试来比较矢量地图与光栅地图，请分享您获得的所有性能反馈，因为这对于我们优化功能非常有用。