Pomoc

Na tej stronie znajdziesz listę znanych problemów i sposobów ich obejścia w przypadku map wektorowych i funkcji WebGL.

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 jest włączone przyspieszenie sprzętowe. W przeciwnym razie mapy wektorowe zostaną zastąpione rastrowymi.

Raster czy wektor?

Czasami mapa wektorowa może zostać zastąpiona 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. W tej sekcji dowiesz się, jak prawidłowo skonfigurować przeglądarkę internetową i jak programowo sprawdzić, czy obsługuje ona mapy wektorowe.

Sprawdzanie możliwości przeglądarki w Chrome

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

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

(Są to tylko podstawowe wymagania. Na pomoc mogą mieć wpływ inne czynniki. Więcej informacji znajdziesz w sekcji „Znane błędy” poniżej).

Włączanie akceleracji sprzętowej

Aby obsługiwać mapy wektorowe, 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 upewnij się, że opcja Użyj akceleracji sprzętowej, gdy jest dostępna jest włączona.

Programowe sprawdzanie, czy obraz jest rastrowy czy wektorowy

Możesz programowo sprawdzić, czy mapa jest rastrowa, czy wektorowa, wywołując funkcję map.getRenderingType(). Poniższy przykład pokazuje kod, który monitoruje zdarzenie renderingtype_changed i wyświetla okno informacyjne z informacją, czy używana jest mapa rastrowa czy 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ż 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 programowo wykrywać kontekst renderowania WebGL.

Obsługa internetu mobilnego

Obsługa map wektorowych w przeglądarkach mobilnych jest nadal eksperymentalna. Deweloperzy mogą używać interfejsów API klienta do wykrywania mobilnych przeglądarek internetowych i używać identyfikatora mapy powiązanego z mapą rastrową zamiast mapy wektorowej. Spodziewamy się wolniejszego renderowania na niektórych urządzeniach mobilnych. Jeśli zdecydujesz się korzystać z map wektorowych w internecie na urządzeniu mobilnym, będziemy wdzięczni za statystyki wydajności i opinie. Jak wspomnieliśmy wyżej, jeśli obsługa map wektorowych jest niedostępna, identyfikator mapy wektorowej automatycznie przełączy się na mapę rastrową.

Błędy

Znane błędy

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

Zgłaszanie błędów

  • Zanim zgłosisz błąd, zaktualizuj przeglądarkę i sterownik GPU do najnowszej wersji.
  • Sprawdź, czy akceleracja sprzętowa jest włączona w chrome://settings/system (Chrome), about:preferences#general (Firefox) lub edge://settings/system (Microsoft Edge). W Safari to ustawienie jest włączane automatycznie w systemie macOS w wersji 10.15 lub nowszej. W przypadku starszych wersji systemu macOS przejdź do ustawień zaawansowanych Safari i upewnij się, że opcja „Użyj akceleracji sprzętowej” jest włączona.
  • Dołącz do raportu o błędzie link do przykładowego kodu jsfiddle.
  • Zrób też zrzut ekranu chrome://gpu (Chrome), about:support (Firefox) lub edge://gpu (Microsoft Edge) i dołącz do raportu o błędzie informacje dotyczące procesora graficznego, jeśli napotkasz problemy z renderowaniem.

Chcemy poznać wasze opinie

Twoja opinia jest dla nas bardzo ważna, ponieważ staramy się zapewnić Tobie i Twoim użytkownikom jak najlepsze wrażenia podczas korzystania z map wektorowych. Daj nam znać, jeśli:

  • w aplikacjach internetowych wykryjesz nowe błędy JavaScript lub awarie.
  • Opóźnienie uruchamiania 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 progi.
  • Mapy wektorowe nie działają tak płynnie, jak powinny. Jeśli rejestrujesz dane FPS lub dane dotyczące zacinania się, jak wypadają one w porównaniu z mapami wektorowymi i rastrowymi?
  • Wydajność znacznie się różni w zależności od przeglądarki.

Jeśli masz skonfigurowane testy A/B do porównywania map wektorowych z mapami rastrowymi, podziel się z nami opiniami na temat skuteczności, ponieważ będą one bardzo przydatne w ulepszaniu tej funkcji.