Эта страница переведена с помощью Cloud Translation API.

Обзор

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

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

Начать

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

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

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

Загрузите библиотеку RenderingType ; это можно сделать при загрузке библиотеки Maps:
```
const { Map, RenderingType } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
```

При инициализации карты используйте параметр 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 .

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

You can also specify the rendering type by using a map ID. To create a new map ID, follow the steps in Using Cloud-based Map Styling - Get a map ID . Be sure to set the Map type to JavaScript , and select the Vector option. Check Tilt or Rotation to enable tilt and rotation on the map. Doing so lets you programmatically adjust these values, and also lets users adjust tilt and heading directly on the map. If the use of tilt or heading will adversely affect your app, leave Tilt and Rotation un- checked so users cannot adjust tilt and rotation.

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

Далее обновите код инициализации карты, указав созданный вами идентификатор карты. Идентификаторы карт можно найти на странице управления картами . При создании экземпляра карты укажите идентификатор, используя свойство 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. Подробнее .

Примеры

Для демонстрации этих функций приведены примеры: