渲染类型（光栅和矢量）

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

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

默认渲染类型

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

使用 <gmp-map> 元素的地图默认采用矢量渲染类型。
使用 <div> 元素且 google.maps.Map 为默认值的地图采用的是栅格渲染类型。

通过指定 renderingType 地图选项或在关联的地图 ID 上设置相应选项，来设置地图的渲染类型。renderingType 选项会替换通过配置地图 ID 进行的任何渲染类型设置。

指定 `renderingType` 选项

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

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

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

初始化地图时，使用 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()}`);
  });```