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

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