Тип рендеринга (растровый и векторный)

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

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

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

Используйте параметр renderingType , чтобы указать растровый или векторный тип рендеринга для вашей карты (ID карты не требуется). Для карт, загруженных с помощью элемента div и JavaScript, тип рендеринга по умолчанию — google.maps.RenderingType.RASTER . Выполните следующие действия, чтобы задать параметр renderingType :

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

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

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

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

После установки типа рендеринга векторной карты необходимо задать параметры необходимых функций.

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

Для карт, загруженных с помощью элемента <gmp-map> , тип рендеринга по умолчанию — google.maps.RenderingType.VECTOR с включенным контролем наклона и направления. Чтобы задать тип рендеринга с помощью элемента <gmp-map> , используйте атрибут rendering-type .

Используйте идентификатор карты для установки типа рендеринга

Вы также можете указать тип рендеринга с помощью идентификатора карты. Чтобы создать новый идентификатор карты, следуйте инструкциям в разделе Использование облачного стиля карты — получение идентификатора карты . Обязательно установите тип карты на JavaScript и выберите параметр ( векторный или растровый ). Установите флажок Tilt and Rotation , чтобы включить наклон и вращение на карте. Это позволит вам программно настраивать эти значения, а также позволит пользователям настраивать наклон и направление непосредственно на карте. Если использование наклона или направления отрицательно повлияет на ваше приложение, не устанавливайте флажок Tilt and Rotation , чтобы пользователи не могли настраивать наклон и вращение.

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

Затем обновите код инициализации карты с помощью созданного вами идентификатора карты. Вы можете найти идентификаторы ваших карт на странице управления картами . Укажите идентификатор карты при создании экземпляра карты с помощью свойства mapId , как показано здесь:

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