Обзор

Функции на основе WebGL для Maps JavaScript API позволяют управлять наклоном и вращением, добавлять 3D-объекты непосредственно на карту и многое другое. Включены следующие функции:

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

Начать

Чтобы использовать новые функции 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 и выберите параметр Вектор . Установите флажок Наклон или Вращение , чтобы включить наклон и вращение на карте. Это позволит вам программно настроить эти значения, а также позволит пользователям настраивать наклон и направление непосредственно на карте. Если использование наклона или направления отрицательно повлияет на ваше приложение, не устанавливайте флажок Наклон и Вращение , чтобы пользователи не могли настраивать наклон и вращение.

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

Затем обновите код инициализации карты с помощью созданного вами идентификатора карты. Вы можете найти идентификаторы ваших карт на странице управления картами . Укажите идентификатор карты при создании экземпляра карты с помощью свойства 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. Подробнее .

Примеры

Для демонстрации этих возможностей были приведены примеры: