渲染类型（光栅和矢量）

Maps JavaScript API 提供了两种不同的地图实现方式：光栅和矢量。光栅地图会将地图加载为基于像素的光栅图片图块网格，这些图块由 Google Maps Platform 服务器端生成，然后提供给您的 Web 应用。矢量地图由基于矢量的图块组成，这些图块在加载时使用 WebGL 在客户端绘制，WebGL 是一种 Web 技术，可让浏览器访问用户设备上的 GPU 以渲染 2D 和 3D 图形。

为获得最佳用户体验，建议您使用矢量地图类型，因为它可以提高视觉保真度、改善跨地图缓存，并让您能够控制地图上的倾斜度和方向。详细了解矢量地图功能。

默认渲染类型

地图的默认渲染类型因您的实现方式而异。

  • 使用 <gmp-map> 元素的地图默认采用矢量渲染类型。

  • 使用 <div> 元素和 google.maps.Map 的地图默认采用光栅渲染类型。

您可以通过指定 renderingType 地图选项或在关联的地图 ID 上设置该选项，来设置地图的渲染类型。renderingType 选项会替换通过配置地图 ID 进行的所有渲染类型设置。

指定 renderingType 选项

使用 renderingType 选项为地图指定光栅或矢量渲染类型（无需地图 ID）。对于使用 div 元素和 JavaScript 加载的地图，默认渲染类型为 google.maps.RenderingType.RASTER。请按照以下步骤设置 renderingType 选项：

  1. 加载 RenderingType 库；这可以在加载 Maps 库时完成：

    const { Map, RenderingType } = await google.maps.importLibrary("maps");

  2. 初始化地图时，请使用 renderingType 选项指定 RenderingType.VECTOR 或 RenderingType.RASTER：

    map = new Map(
  document.getElementById('map'),
  {
    zoom: 4,
    center: position,
    renderingType: RenderingType.VECTOR,
  }
);

设置矢量地图渲染类型后，您必须为所需功能设置选项。

  • 如需启用倾斜，请将 tiltInteractionEnabled 地图选项设置为 true 或调用 map.setTiltInteractionEnabled(true)。
  • 如需启用平移，请将 headingInteractionEnabled 地图选项设置为 true 或调用 map.setHeadingInteractionEnabled(true)。

对于使用 <gmp-map> 元素加载的地图，默认渲染类型为 google.maps.RenderingType.VECTOR，并且倾斜度和朝向控件处于启用状态。如需使用 <gmp-map> 元素设置呈现类型，请使用 rendering-type 属性。

使用地图 ID 设置渲染类型

您还可以使用地图 ID 指定渲染类型。按照使用云端地图样式设置 - 获取地图 ID 一文中的步骤创建地图 ID。请务必将地图类型设置为 JavaScript，然后选择一个选项（矢量或光栅）。选中倾斜和旋转，以在地图上启用倾斜和旋转。这样一来，您便能以程序化方式调整这些值，还能让用户直接在地图上调整倾斜度和朝向。如果使用倾斜或朝向会对应用产生不利影响，则不要选中倾斜和旋转，这样用户就无法调整倾斜度和旋转度。

创建矢量地图 ID

接下来，使用您创建的地图 ID 更新地图初始化代码。您可以在地图管理页面上找到地图 ID。在实例化地图时，请通过 mapId 属性提供地图 ID，如下所示：

map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  mapId: 'MAP_ID'
});

检测正在使用的呈现类型

如需检测使用的是哪种渲染类型，请在地图对象上调用 getRenderingType()，如以下示例所示：

  // Wait for the map to finish loading.
  google.maps.event.addListenerOnce(map, "tilesloaded", () => {
      // Print the rendering type to the console.
      console.log(`${map.getRenderingType()}`);
  });```