Pomoc

Na tej stronie wymieniono znane problemy i sposoby obejścia problemów z mapami wektorowymi i funkcjami WebGL.

Obsługa przeglądarki/urządzenia

Podgląd funkcji WebGL działa w tych samych przeglądarkach i na tych samych urządzeniach co Maps JavaScript API. Aby sprawdzić, czy przeglądarka na danym urządzeniu obsługuje WebGL, wejdź na get.webgl.org lub caniuse.com. Upewnij się też, że akceleracja sprzętowa jest włączona w ustawieniach przeglądarki. W przeciwnym razie mapy wektorowe zostaną przywrócone do trybu rastrowego.

Rastrowe czy wektorowe?

Czasami mapa wektorowa może wrócić do trybu rastrowego. W takim przypadku obiekty zależne od mapy wektorowej są niedostępne. Powrót do mapy rastrowej może występować z różnych powodów. Z tej sekcji dowiesz się, jak prawidłowo skonfigurować przeglądarkę i jak zaprogramować sprawdzanie, czy jest dostępna funkcja map wektorowych.

Sprawdzanie możliwości przeglądarki Chrome

Aby sprawdzić, które funkcje akceleracji sprzętowej są włączone w konkretnej instalacji Chrome, otwórz chrome://gpu/ i sprawdź, czy są włączone następujące elementy (zaznaczone na zielono):

  • „OpenGL: włączona”
  • „WebGL: wspomaganie sprzętowe”
  • „WebGL2: wspomaganie sprzętowe”

To są tylko wymagania podstawowe. Na pomoc mogą wpływać też inne czynniki – patrz „Znane błędy” poniżej.

Włącz akcelerację sprzętową

Do obsługi map wektorowych w większości przeglądarek musi być włączona akceleracja sprzętowa. Aby włączyć akcelerację sprzętową w Chrome i Microsoft Edge, otwórz Ustawienia, wybierz System i włącz opcję Użyj akceleracji sprzętowej, gdy jest dostępna.

Automatyczne sprawdzanie pod kątem obrazów rastrowych lub wektorowych

Możesz automatycznie sprawdzić, czy mapa jest rastrowa czy wektorowa, wywołując map.getRenderingType(). Poniższy przykład pokazuje kod monitorowania zdarzenia renderingtype_changed oraz okno informacyjne pokazujące, czy jest używana mapa rastrowa lub wektorowa.

TypeScript

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

Możesz też sprawdzić obsługę WebGL 2, korzystając z kontekstu renderowania WebGL:

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

Poznaj inne sposoby automatycznego wykrywania kontekstu renderowania WebGL.

Obsługa internetu mobilnego

Obsługa map wektorowych w internecie mobilnym jest wciąż w fazie eksperymentalnej. Deweloperzy mogą za pomocą interfejsów API klienta wykrywać mobilne przeglądarki internetowe i używać identyfikatora mapy powiązanego z mapą rastrową zamiast wektorowej. Przewidujemy, że na niektórych urządzeniach mobilnych renderowanie będzie spowolnione. Jeśli chcesz używać map wektorowych w przeglądarce mobilnej, będziemy bardzo wdzięczni za statystyki wydajności i opinie na ich temat. Tak jak wyżej, jeśli obsługa map wektorowych nie jest dostępna, identyfikator mapy wektorowej automatycznie przełączy się na użycie mapy rastrowej.

Błędy

Znane błędy

  • W Chrome na niektórych urządzeniach z macOS z procesorami graficznymi AMD występuje znany problem. Jest to szczególnie mylące, gdy system macOS dynamicznie przełącza się między procesorami graficznymi na urządzeniach z wieloma GPU, więc mapy wektorowe mogą być niedostępne w zależności od tego, jakie inne uruchomione aplikacje są uruchomione lub czy podłączony jest zewnętrzny monitor. Wydaje się, że włączenie nowego backendu ANGLE Metal w Chrome może w niektórych przypadkach rozwiązać ten problem. Ogólne plany wdrożenia tego rozwiązania znajdziesz na stronie https://bugs.chromium.org/p/chromium/issues/detail?id=1322521.

Zgłaszanie błędów

  • Przed zgłoszeniem błędu zaktualizuj przeglądarkę i sterownik GPU do najnowszej wersji.
  • Upewnij się, że akceleracja sprzętowa jest włączona w ustawieniach chrome://settings/system (Chrome), about:preferences#general (Firefox), edge://settings/system (Microsoft Edge). W Safari to ustawienie jest automatycznie włączane w systemie macOS 10.15 lub nowszym. W przypadku starszych wersji systemu macOS otwórz ustawienia zaawansowane Safari i upewnij się, że jest włączona opcja „Użyj akceleracji sprzętowej”.
  • Do raportu o błędzie umieść link do przykładowego kodu jsfiddle.
  • Zrób też zrzut ekranu z grą chrome://gpu (Chrome), about:support (Firefox) lub edge://gpu (Microsoft Edge) i jeśli wystąpią problemy z renderowaniem, załącz do raportu o błędzie informacje dotyczące GPU.

Chcemy poznać wasze opinie

Twoja opinia jest dla nas bardzo ważna, ponieważ zależy nam na tym, aby mapy wektorowe były jak najwygodniejsze dla Ciebie i Twoich użytkowników. Daj nam znać, jeśli:

  • w aplikacjach internetowych pojawiły się nowe błędy lub usterki JavaScriptu.
  • Czas oczekiwania na uruchomienie map wektorowych jest znacznie krótszy niż w przypadku map rastrowych. W takim przypadku bardzo pomocne są wskaźniki regresji czasu oczekiwania na uruchomienie. Chcemy się dowiedzieć, czy czas oczekiwania na uruchomienie maleje powyżej akceptowalnych progów.
  • Mapy wektorowe nie są tak płynne, jak mogłyby być. Jeśli rejestrujesz FPS lub wskaźniki zacięć, jak wypadają one na tle map wektorowych i rastrowych?
  • Wydajność może się znacznie różnić w zależności od przeglądarki.

Jeśli masz skonfigurowane testy A/B do porównania map wektorowych i rastrowych, podziel się z nami uzyskanymi opiniami na temat wydajności, ponieważ pomoże nam to w ulepszaniu tej funkcji.