Векторные карты

Maps JavaScript API предлагает две разные реализации карты: растровую и векторную. Растровая карта загружается по умолчанию и загружает карту в виде сетки фрагментов растровых изображений на основе пикселей, которые генерируются серверной частью платформы Google Maps, а затем передаются в ваше веб-приложение. Векторная карта состоит из векторных плиток, которые рисуются во время загрузки на стороне клиента с помощью WebGL — веб-технологии, позволяющей браузеру получать доступ к графическому процессору на устройстве пользователя для рендеринга 2D- и 3D-графики.

Векторная карта — это та же карта Google, с которой знакомы ваши пользователи, и она предлагает ряд преимуществ по сравнению с растровой мозаичной картой по умолчанию, в первую очередь резкость векторных изображений и добавление 3D-зданий при близком масштабе. Векторная карта также поддерживает некоторые новые функции, такие как возможность добавления 3D-контента с помощью WebGL Overlay View, программное управление наклоном и направлением, улучшенное управление камерой и дробное масштабирование для более плавного масштабирования.

Начните работу с векторными картами

Управление камерой

Используйте функцию 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');
  }
});