Pomoc

Na tej stronie znajdziesz listę znanych problemów z mapami wektorowymi i funkcjami WebGL oraz sposoby ich obejścia.

Obsługa przeglądarek i urządzeń

Wersja przedpremierowa funkcji WebGL obsługuje te same przeglądarki i urządzenia co interfejs Maps JavaScript API. Aby sprawdzić, czy przeglądarka na danym urządzeniu obsługuje WebGL, wejdź na stronę get.webgl.org lub caniuse.com. Upewnij się też, że w ustawieniach przeglądarki włączone jest przyspieszenie sprzętowe, ponieważ w przeciwnym razie mapy wektorowe zostaną przekształcone w raster.

Plik rastrowy czy wektorowy?

Czasami mapa wektorowa może zostać zastąpiona mapą rastrową. W takim przypadku funkcje zależne od mapy wektorowej są niedostępne. Przejście na mapę rastrową może nastąpić z różnych powodów. Z tej sekcji dowiesz się, jak prawidłowo skonfigurować przeglądarkę internetową i jak sprawdzić programowo, czy obsługa map wektorowych jest dostępna.

Sprawdzanie możliwości przeglądarki Chrome

Aby sprawdzić, które funkcje akceleracji sprzętowej są włączone w konkretnej instalacji Chrome, otwórz stronę chrome://gpu/ i upewnij się, że te elementy są włączone (zaznaczone na zielono):

  • „OpenGL: włączony”.
  • „WebGL: akceleracja sprzętowa”
  • „WebGL2: przyspieszenie sprzętowe”

(są to tylko podstawowe wymagania, ale mogą być też inne czynniki, które wpływają na obsługę; patrz „Znane błędy” poniżej).

Włączanie akceleracji sprzętowej

Aby obsługiwać mapy wektorowe, w większości przeglądarek należy włączyć akcelerację sprzętową. Aby włączyć akcelerację sprzętową w Chrome i Microsoft Edge, otwórz Ustawienia, wybierz System i sprawdź, czy włączona jest opcja Użyj akceleracji sprzętowej, gdy jest dostępna.

Sprawdzanie, czy obraz jest rastrowy czy wektorowy za pomocą kodu

Aby sprawdzić, czy mapa jest rastrowa czy wektorowa, możesz użyć wywołania map.getRenderingType(). W tym przykładzie widać kod monitorujący zdarzenie renderingtype_changed i okno informacyjne, które pokazuje, czy używana jest mapa wektorowa czy rastrowa.

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ż użyć kontekstu renderowania WebGL, aby sprawdzić obsługę WebGL 2:

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

Dowiedz się, jak w sposób programowy wykrywać kontekst renderowania WebGL.

Obsługa w internecie mobilnym

Obsługa map wektorowych w internetach mobilnych jest wciąż eksperymentalna. Deweloperzy mogą używać interfejsów API klienta do wykrywania przeglądarek mobilnych i używania identyfikatora mapy powiązanego z mapą rastrową zamiast mapy wektorowej. Spodziewamy się wolniejszego renderowania na niektórych urządzeniach mobilnych. Jeśli zdecydujesz się używać map wektorowych w wersji mobilnej strony internetowej, będziemy wdzięczni za statystyki skuteczności i opinie. Jeśli, jak wyżej, nie można użyć map wektorowych, identyfikator mapy wektorowej automatycznie przełączy się na mapę rastrową.

Błędy

Znane błędy

  • W Chrome na niektórych urządzeniach z systemem macOS i kartami graficznymi AMD występuje znany problem. Może to być szczególnie mylące, gdy macOS dynamicznie przełącza się między procesorami graficznymi na urządzeniach z wieloma procesorami graficznymi. W zależności od tego, jakie inne aplikacje są uruchomione lub czy podłączony jest monitor zewnętrzny, mapy wektorów mogą być niedostępne. W niektórych przypadkach problem można rozwiązać, włączając nadchodzące oprogramowanie ANGLE Metal w Chrome. Ogólne plany wdrożenia 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 chrome://settings/system (Chrome), about:preferences#general (Firefox), edge://settings/system (Microsoft Edge). W Safari to ustawienie jest włączone automatycznie w systemie macOS w wersji 10.15 lub nowszej. W przypadku starszych wersji systemu macOS otwórz zaawansowane ustawienia Safari i sprawdź, czy opcja „Użyj akceleracji sprzętowej” jest włączona.
  • Dołącz do raportu o błędzie link do przykładowego kodu w jsfiddle.
  • Jeśli napotkasz problemy z renderowaniem, zrób zrzut ekranu w chrome://gpu (Chrome), about:support (Firefox) lub edge://gpu (Microsoft Edge) i załącz informacje o procesorze graficznym w raporcie o błędzie.

Chcemy poznać wasze opinie

Twoja opinia jest dla nas ważna, ponieważ zależy nam na tym, aby zapewnić Tobie i użytkownikom końcowym jak najlepsze mapy wektorowe. Poinformuj nas, jeśli:

  • w Twoich aplikacjach internetowych wykryto nowe błędy JavaScript lub błędy/awarie;
  • Opóźnienie wczytywania map wektorowych jest znacznie większe niż w przypadku map rastrowych. W takim przypadku bardzo przydatne są dane dotyczące regresji opóźnienia uruchamiania. Ogólnie chcemy wiedzieć, czy opóźnienie uruchamiania przekracza dopuszczalne wartości graniczne.
  • Obsługa map wektorowych nie jest tak płynna, jak powinna. Jeśli rejestrujesz dane dotyczące liczby klatek na sekundę lub janka, jak się one zmieniają na mapach wektorowych i rastrowych?
  • Wydajność różni się znacznie w zależności od przeglądarki.

Jeśli masz skonfigurowane testy A/B porównujące mapy wektorowe z mapami rastrowymi, prześlij nam opinię na temat ich skuteczności. Będzie to dla nas bardzo przydatne, ponieważ pomoże nam udoskonalić tę funkcję.