Typ renderowania (rastrowy i wektorowy)

Interfejs Maps JavaScript API oferuje 2 różne implementacje mapy: rastrową i wektorową. Mapa rastrowa jest wczytywana domyślnie i wyświetla mapę jako siatkę rastrowych kafelków obrazów opartych na pikselach, które są generowane po stronie serwera przez Platformę Map Google, a następnie przesyłane do aplikacji internetowej. Mapa wektorowa składa się z kafelków wektorowych, które są rysowane w momencie wczytywania po stronie klienta za pomocą WebGL, technologii internetowej umożliwiającej przeglądarce dostęp do procesora graficznego na urządzeniu użytkownika w celu renderowania grafiki 2D i 3D. Aby zapewnić użytkownikom jak największy komfort, zalecamy korzystanie z mapy wektorowej, ponieważ zapewnia ona lepszą jakość obrazu oraz możliwość sterowania pochyleniem i kierunkiem na mapie. Więcej informacji o funkcjach map wektorowych

Ustaw typ renderowania mapy, określając opcję renderingType mapy lub ustawiając opcję powiązanego identyfikatora mapy. Opcja renderingType zastępuje wszystkie ustawienia typu renderowania wprowadzone podczas konfigurowania identyfikatora mapy.

Określ opcję renderingType.

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

  1. Załaduj bibliotekę RenderingType. Możesz to zrobić podczas wczytywania biblioteki Maps:

    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,
  }
);

Gdy ustawiony jest typ renderowania mapy wektorowej, musisz skonfigurować opcje potrzebnych funkcji.

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

W przypadku map wczytywanych za pomocą elementu <gmp-map> domyślny typ renderowania to 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.

Ustawianie typu renderowania za pomocą identyfikatora mapy

Możesz też określić typ renderowania za pomocą identyfikatora mapy. Aby utworzyć nowy identyfikator mapy, wykonaj czynności opisane w sekcji Korzystanie z dostosowywania stylu mapy przez konsolę Cloud – uzyskiwanie identyfikatora mapy. Ustaw typ mapy na JavaScript i wybierz opcję (Wektorowa lub Rastrowa). Zaznacz opcje Przechylenie i Obrót, aby włączyć przechylanie i obracanie mapy. Dzięki temu będziesz mieć możliwość programowego dostosowywania tych wartości, a także zezwolisz użytkownikom na bezpośrednie dostosowywanie pochylenia i kierunku na mapie. Jeśli użycie pochylenia lub kierunku wpłynie negatywnie na działanie aplikacji, pozostaw pola Pochylenie i Obrót niezaznaczone, aby użytkownicy nie mogli dostosowywać pochylenia i obrotu.

Tworzenie identyfikatora mapy wektorowej

Następnie zaktualizuj kod inicjowania mapy za pomocą utworzonego identyfikatora mapy. Identyfikatory map znajdziesz na stronie Zarządzanie mapami. Podaj identyfikator mapy podczas tworzenia instancji mapy za pomocą właściwości mapId, jak pokazano poniżej:

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