Поддержка

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

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

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

Примечание: прочитайте руководство по использованию TypeScript и Google Maps.

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 или jank, как они сравниваются между векторными и растровыми картами?
• Производительность сильно различается в зависимости от браузера.

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