Поддержка

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

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

Предварительная версия функции WebGL поддерживает те же браузеры и устройства, что и Maps JavaScript API. Чтобы проверить, поддерживает ли браузер на конкретном устройстве 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 динамически переключается между графическими процессорами на устройствах с несколькими графическими процессорами, поэтому векторные карты могут быть недоступны в зависимости от того, какие другие приложения запущены или подключен ли внешний монитор. Включение предстоящего бэкэнда Chrome ANGLE Metal в некоторых случаях решает эту проблему. Вы можете следить за общими планами развертывания по адресу 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-тестирование для сравнения векторных и растровых карт, поделитесь любыми полученными отзывами о производительности, поскольку это будет очень полезно, чтобы помочь нам усовершенствовать эту функцию.