Typ renderowania (rastrowy i wektorowy)

Interfejs Maps JavaScript API oferuje 2 różne implementacje mapy: rastrową i wektorówą. Domyślnie wczytuje się mapa rastrowa, która jest siatką pikseli rastrowych, generowanych przez Mapy Google Platform na serwerze, a następnie przesyłanych do aplikacji internetowej. Mapa wektorowa składa się z płytek wektorowych, które są rysowane podczas wczytywania po stronie klienta za pomocą WebGL, czyli technologii internetowej, która umożliwia przeglądarce dostęp do karty graficznej na urządzeniu użytkownika w celu renderowania grafiki 2D i 3D. Aby zapewnić użytkownikom jak najlepsze wrażenia, zalecamy korzystanie z map wektorowych, które zapewniają większą wierność wizualizacji oraz możliwość sterowania pochyleniem i kierunkiem na mapie. Więcej informacji o funkcjach map wektorowych

Ustaw typ renderowania mapy, podając opcję mapy renderingType lub ustawiając opcję w powiązanym identyfikatorze mapy. Opcja renderingTypezastępuje wszystkie ustawienia typu renderowania wprowadzone przez skonfigurowanie identyfikatora mapy.

Określ opcję renderingType

Użyj opcji renderingType, aby określić typ renderowania mapy (rasterowy lub wektorowy) (nie jest wymagany identyfikator mapy). W przypadku map wczytywanych za pomocą elementu div i JavaScriptu domyślnym typem renderowania jest google.maps.RenderingType.RASTER. Aby ustawić opcję renderingType:

  1. Wczytaj bibliotekę RenderingType. Możesz to zrobić podczas wczytywania biblioteki Map:

    const { Map, RenderingType } = await google.maps.importLibrary("maps");

  2. Podczas inicjowania mapy użyj opcji renderingType, aby określić wartość RenderingType.VECTOR lub RenderingType.RASTER:

    map = new Map(
  document.getElementById('map'),
  {
    zoom: 4,
    center: position,
    renderingType: RenderingType.VECTOR,
  }
);

Po ustawieniu typu renderowania mapy wektorowej musisz ustawić opcje funkcji, których potrzebujesz.

  • Aby włączyć przechylanie, ustaw opcję mapy tiltInteractionEnabled na true lub wywołaj funkcję map.setTiltInteractionEnabled(true).
  • Aby włączyć przesuwanie, ustaw opcję mapy headingInteractionEnabled na true lub wywołaj funkcję map.setHeadingInteractionEnabled(true).

W przypadku map wczytywanych za pomocą elementu <gmp-map> domyślnym typem renderowania jest google.maps.RenderingType.VECTOR z włączoną kontrolą pochylenia i kierunku. Aby ustawić typ renderowania za pomocą elementu <gmp-map>, użyj atrybutu rendering-type.

Używanie identyfikatora mapy do ustawiania typu renderowania

Typ renderowania możesz też określić, podając identyfikator mapy. Aby utworzyć nowy identyfikator mapy, wykonaj czynności opisane w artykule Korzystanie z definiowania stylów map w chmurze – uzyskiwanie identyfikatora mapy. Ustaw typ mapy na JavaScript i wybierz opcję (Wektor lub Rastrowa). Zaznacz opcje Pochylenie i Obrót, aby włączyć pochylenie i obrót na mapie. Dzięki temu będziesz mieć możliwość programowego dostosowywania tych wartości, a użytkownicy będą mogli regulować pochylenie i kierunek bezpośrednio na mapie. Jeśli korzystanie z przechylania lub kierowania będzie miało negatywny wpływ na Twoją aplikację, pozostaw pola Przechylenie i Obrót niezaznaczone, aby użytkownicy nie mogli regulować przechylenia ani obrotu.

Tworzenie identyfikatora mapy wektorowej

Następnie zaktualizuj kod inicjalizacji mapy, podając utworzony identyfikator mapy. Identyfikatory map możesz znaleźć na stronie Zarządzanie mapami. Podczas tworzenia wystąpienia mapy za pomocą właściwości mapId podaj identyfikator mapy w ten sposób:

map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  mapId: 'MAP_ID'
});