Поддержка

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

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

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

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

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

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

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

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

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

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

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

• Узнайте, как изменить настройки веб-сайтов в Safari .
• Узнайте о настройках производительности Firefox .

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

Вы можете программно проверить, является ли карта растровой или векторной, вызвав метод 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

/**
 * 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 .

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

Mobile web support for vector maps is still experimental. Developers can use client APIs to detect mobile web browsers and use a map ID associated with a raster map instead of a vector map. We anticipate slower rendering performance for some mobile devices. If you choose to use vector maps on mobile web, we would greatly appreciate performance statistics and feedback. As above, if Vector Maps support is not available, a vector map ID will automatically fallback to using a raster map.

Ошибки

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

• There is a known issue in Chrome on some macOS devices with AMD GPUs. This can be particularly confusing when macOS dynamically switches between GPUs on devices with multiple GPUs, so vector maps may not be available depending on what other apps are running, or whether an external monitor is connected. Turning on Chrome's upcoming ANGLE Metal backend appears to fix this issue in some cases. You can follow general rollout plans for this at https://bugs.chromium.org/p/chromium/issues/detail?id=1322521 .

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

• Перед сообщением об ошибке, пожалуйста, обновите браузер и драйвер видеокарты до последней версии.
• Ensure that the hardware acceleration setting at chrome://settings/system (Chrome), about:preferences#general (Firefox), edge://settings/system (Microsoft Edge) is enabled. In Safari, this setting is enabled automatically in macOS version 10.15 or newer. For older MacOS version(s), please go to the Safari advanced settings and ensure that the "Use hardware acceleration" option is enabled.
• Включите ссылку на пример кода на jsfiddle в отчет об ошибке.
• Пожалуйста, сделайте также снимок экрана chrome://gpu (Chrome), about:support (Firefox) или edge://gpu (Microsoft Edge) и приложите информацию, связанную с графическим процессором, в отчет об ошибке, если вы столкнетесь с какими-либо проблемами при рендеринге.

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

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

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

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