Обзор

С помощью функций на основе WebGL для Maps JavaScript API вы можете управлять наклоном и ориентацией, добавлять 3D-объекты на карту и не только. Доступны следующие функции:

  • Режим наложения в WebGL позволяет добавлять на карты пользовательские 2D- и 3D-изображения и анимированный контент.
  • Наклон и ориентацию теперь можно регулировать программно и с помощью мыши и клавиатуры.
  • Метод map.moveCamera() используется для одновременного изменения нескольких свойств камеры.
  • Масштабирование теперь поддерживает дробные значения.

Начать

Чтобы использовать новые функции WebGL, необходима векторная карта. в соответствии с инструкциями в этом разделе.

Укажите параметр renderingType

Используйте параметр renderingType, чтобы указать тип отрисовки карты (растровый или векторный). Идентификатор карты не требуется.

  1. Загрузите библиотеку RenderingType. Это можно сделать при загрузке библиотеки Maps:

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

  2. При инициализации карты используйте параметр renderingType, чтобы указать RenderingType.VECTOR или RenderingType.RASTER:

    map = new Map(
  document.getElementById('map') as HTMLElement,
  {
    zoom: 4,
    center: position,
    renderingType: RenderingType.VECTOR,
  }
);

Параметр renderingType переопределяет любые настройки типа отрисовки, заданные в идентификаторе карты.

  • Чтобы включить наклон и поворот, задайте для параметра карты tiltInteractionEnabled значение true или вызовите метод map.setTiltInteractionEnabled.
  • Чтобы включить панорамирование, установите для параметра карты headingInteractionEnabled значение true или вызовите метод map.setHeadingInteractionEnabled.

Как задать тип отрисовки с помощью идентификатора карты

Вы также можете указать тип отрисовки с помощью идентификатора карты. Следуйте инструкциям по созданию идентификатора карты в статье Облачные стили карт. Обязательно задайте тип карты JavaScript и выберите вариант Vector (Векторная). Установите флажки Tilt (Наклон) и/или Rotation (Ориентация), чтобы программно менять эти значения. Кроме того, пользователи смогут менять наклон и ориентацию карты непосредственно на ней. Если же это негативно влияет на ваше приложение, снимите флажки Tilt (Наклон) и Rotation (Ориентация). Тогда пользователи не смогут менять эти параметры.

Создание идентификатора векторной карты

Затем добавьте созданный идентификатор карты в код инициализации карты. Идентификаторы карт можно найти на странице Maps Management (Управление картами). При создании экземпляра карты необходимо указать ее идентификатор с помощью свойства mapId. Вот как это сделать:

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

Используйте элемент <gmp-map>

Векторные карты, наклон и ориентация включены по умолчанию при использовании элемента <gmp-map>, который позволяет добавить карту на страницу с помощью HTML. Подробнее…

Примеры

Посмотрите, как работают описанные функции: