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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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