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

В Maps JavaScript API возможны две реализации карт: растровая и векторная. Растровая карта загружается по умолчанию в виде сетки растровых (пиксельных) изображений, которые генерируются серверами платформы Google Карт, а затем передаются в ваше веб-приложение. Векторная карта состоит из векторных изображений, которые отрисовываются во время загрузки на стороне клиента с помощью 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');
  }
});