Поддержка

На этой странице перечислены известные проблемы и способы их решения для векторных карт и функций WebGL.

Поддержка браузеров/устройств

Предварительная версия WebGL поддерживает те же браузеры и устройства, что и API JavaScript для карт. Чтобы проверить, поддерживает ли браузер на конкретном устройстве WebGL, посетите get.webgl.org или caniuse.com . Также убедитесь, что аппаратное ускорение включено в настройках браузера, иначе векторные карты будут преобразованы в растровые .

Растровое или векторное изображение?

Иногда векторная карта может переключаться на растровую. В этом случае объекты, зависящие от векторной карты, становятся недоступны. Переключение на растровую карту может происходить по разным причинам. В этом разделе показано, как правильно настроить веб-браузер и как программно проверить наличие возможности отображения векторных карт.

Проверьте возможности браузера Chrome.

Чтобы определить, какие возможности аппаратного ускорения включены в конкретной установке Chrome, перейдите по адресу chrome://gpu/ и убедитесь, что следующие элементы включены (выделены зелёным):

  • "OpenGL: включен"
  • «WebGL: аппаратное ускорение»
  • «WebGL2: аппаратное ускорение»

(Это лишь базовые требования, могут быть и другие факторы, влияющие на поддержку, см. раздел «Известные ошибки» ниже.)

Включить аппаратное ускорение

Для поддержки векторных карт в большинстве браузеров необходимо включить аппаратное ускорение. Чтобы включить аппаратное ускорение в Chrome и Microsoft Edge, откройте «Настройки» , выберите «Система» и убедитесь, что параметр «Использовать аппаратное ускорение, если оно доступно» включен.

Программная проверка на растровое или векторное изображение.

Вы можете программно проверить, является ли карта растровой или векторной, вызвав метод map.getRenderingType() . В следующем примере показан код для отслеживания события renderingtype_changed и отображения информационного окна, показывающего, используется ли растровая или векторная карта.

Машинопись 

/**
 * This example creates a map with an info window that shows whether
 * the map render type is raster or vector.
 */

 function initMap() {
    const center = {lat: 0, lng: 0};
    const map = new google.maps.Map(document.getElementById('map') as HTMLElement, {
      center,
      zoom: 10,
      heading: 0.0,
      tilt: 0.0,
      // Map ID for a vector map.
      mapId: '6ff586e93e18149f',
    });
    const canvas = document.createElement("canvas");
    const infoWindow = new google.maps.InfoWindow({
      content: '',
      ariaLabel: 'Raster/Vector',
      position: center,
    });
    infoWindow.open({
      map,
    });

    map.addListener('renderingtype_changed', () => {
      infoWindow.setContent(`${map.getRenderingType()}`);
    });
  }

  declare global {
    interface Window {
      initMap: () => void;
    }
  }
  window.initMap = initMap;
index.ts

JavaScript 

/**
 * This example creates a map with an info window that shows whether
 * the map render type is raster or vector.
 */
function initMap() {
  const center = { lat: 0, lng: 0 };
  const map = new google.maps.Map(document.getElementById("map"), {
    center,
    zoom: 10,
    heading: 0.0,
    tilt: 0.0,
    // Map ID for a vector map.
    mapId: "6ff586e93e18149f",
  });
  const canvas = document.createElement("canvas");
  const infoWindow = new google.maps.InfoWindow({
    content: "",
    ariaLabel: "Raster/Vector",
    position: center,
  });

  infoWindow.open({
    map,
  });
  map.addListener("renderingtype_changed", () => {
    infoWindow.setContent(`${map.getRenderingType()}`);
  });
}

window.initMap = initMap;
index.js

Также можно использовать контекст рендеринга WebGL для проверки поддержки WebGL 2:

const canvas = document.createElement("canvas");
canvas.getContext("webgl2") ? console.log("WebGL 2 is supported") : console.log("WebGL 2 is NOT supported");

Узнайте о других способах программного определения контекста рендеринга WebGL .

Поддержка мобильной версии веб-сайта

Поддержка векторных карт в мобильном веб-браузере пока находится на стадии экспериментальной разработки. Разработчики могут использовать клиентские API для определения мобильных веб-браузеров и использовать идентификатор карты, связанный с растровой картой, вместо векторной. Мы ожидаем замедления отрисовки на некоторых мобильных устройствах. Если вы решите использовать векторные карты в мобильном веб-браузере, мы будем очень благодарны за статистику производительности и отзывы. Как указано выше, если поддержка векторных карт недоступна, идентификатор векторной карты автоматически будет использоваться вместо растровой.

Ошибки

Известные ошибки

  • В Chrome на некоторых устройствах macOS с графическими процессорами AMD обнаружена известная проблема. Это может вызывать затруднения, особенно когда macOS динамически переключается между графическими процессорами на устройствах с несколькими видеокартами, поэтому векторные карты могут быть недоступны в зависимости от того, какие другие приложения запущены или подключен ли внешний монитор. Включение готовящегося к выпуску бэкенда ANGLE Metal в Chrome, по-видимому, решает эту проблему в некоторых случаях. С общими планами по внедрению можно ознакомиться по ссылке: https://bugs.chromium.org/p/chromium/issues/detail?id=1322521 .

Сообщение об ошибках

  • Перед сообщением об ошибке, пожалуйста, обновите браузер и драйвер видеокарты до последней версии.
  • Убедитесь, что параметр аппаратного ускорения включен по адресу chrome://settings/system (Chrome), about:preferences#general (Firefox), edge://settings/system (Microsoft Edge). В Safari этот параметр включается автоматически в macOS версии 10.15 и новее. Для более старых версий macOS перейдите в расширенные настройки Safari и убедитесь, что параметр «Использовать аппаратное ускорение» включен.
  • Включите ссылку на пример кода на jsfiddle в отчет об ошибке.
  • Пожалуйста, сделайте также снимок экрана chrome://gpu (Chrome), about:support (Firefox) или edge://gpu (Microsoft Edge) и приложите информацию, связанную с графическим процессором, в отчет об ошибке, если вы столкнетесь с какими-либо проблемами при рендеринге.

Поделитесь своим мнением!

Мы ценим ваши отзывы, поскольку стремимся создать для вас и ваших конечных пользователей наилучший опыт работы с векторными картами. Пожалуйста, сообщите нам, если:

  • Есть ли какие-либо новые ошибки JavaScript, сбои или аварийные завершения работы, которые вы обнаружите в своих веб-приложениях?
  • Задержка запуска векторных карт значительно хуже, чем у растровых. В этом случае метрики регрессии задержки запуска оказываются очень полезными. В целом, нам нужно знать, выходит ли за пределы допустимых пороговых значений задержка запуска.
  • Работа с векторными картами оставляет желать лучшего. Если вы запишете показатели FPS или задержки изображения, как они будут соотноситься между векторными и растровыми картами?
  • Производительность сильно различается в зависимости от браузера.

Если вы проводили A/B-тестирование для сравнения векторных и растровых карт, пожалуйста, поделитесь полученными отзывами о производительности, так как это будет очень полезно для улучшения данной функции.