矢量地图

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

用户熟悉的 Google 地图就是矢量地图，与默认的光栅图块地图相比优势众多，最值得注意的是基于矢量的图像的锐度，以及在较高缩放级别添加了 3D 建筑。矢量地图还支持一些新功能，例如通过 WebGL 叠加视图添加 3D 内容的功能、以编程方式控制倾斜角度和朝向、增强型镜头控制，以及可实现更顺畅缩放的小数缩放。

矢量地图使用入门

控制镜头

使用 map.moveCamera() 函数一次更新镜头属性的任意组合。map.moveCamera() 接受包含要更新的所有镜头属性的单个参数。以下示例展示了如何调用 map.moveCamera() 以同时设置 center、zoom、heading 和 tilt：

map.moveCamera({
  center: new google.maps.LatLng(37.7893719, -122.3942),
  zoom: 16,
  heading: 320,
  tilt: 47.5
});

您可以调用 map.moveCamera() 以动画方式呈现镜头属性，并设置动画循环，如下所示：

const degreesPerSecond = 3;

function animateCamera(time) {
  // Update the heading, leave everything else as-is.
  map.moveCamera({
    heading: (time / 1000) * degreesPerSecond
  });

  requestAnimationFrame(animateCamera);
}

// Start the animation.
requestAnimationFrame(animateCamera);

小数缩放

矢量地图支持小数缩放，可让您使用小数值（而非整数）进行缩放。虽然光栅地图和矢量地图都支持小数缩放，但对于矢量地图，该功能默认处于启用状态，而对于光栅地图，则默认处于停用状态。使用 isFractionalZoomEnabled 地图选项可启用和停用小数缩放。

以下示例展示了如何在初始化地图时启用小数缩放：

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

您还可以通过设置 isFractionalZoomEnabled 地图选项来启用和停用小数缩放，如下所示：

// Using map.set
map.set('isFractionalZoomEnabled', true);

// Using map.setOptions
map.setOptions({isFractionalZoomEnabled: true});

您可以设置监听器来检测是否启用了小数缩放；如果您尚未明确将 isFractionalZoomEnabled 设置为 true 或 false，此方法会非常有用。以下示例代码会检查小数缩放是否已启用：

map.addListener('isfractionalzoomenabled_changed', () => {
  const isFractionalZoomEnabled = map.get('isFractionalZoomEnabled');
  if (isFractionalZoomEnabled === false) {
    console.log('not using fractional zoom');
  } else if (isFractionalZoomEnabled === true) {
    console.log('using fractional zoom');
  } else {
    console.log('map not done initializing yet');
  }
});