Przegląd

Funkcje interfejsu Maps JavaScript API oparte na WebGL umożliwiają m.in. kontrolowanie pochylenia i obrotu oraz dodawanie obiektów 3D bezpośrednio na mapie. Obejmuje ona te funkcje:

• Widok nakładki WebGL umożliwia dodawanie do map niestandardowych grafik 2D i 3D oraz animowanych treści.
• Pochylenie i kierunek można teraz dostosować programowo oraz za pomocą gestów myszy i klawiatury.
• map.moveCamera() umożliwia jednoczesną zmianę wielu właściwości kamery.
• Zoom obsługuje teraz wartości ułamkowe.

Rozpocznij

Aby korzystać z nowych funkcji WebGL, musisz użyć mapy wektorowej. W tej sekcji dowiesz się, jak to zrobić.

Określ opcję renderingType

Użyj opcji renderingType, aby określić typ renderowania mapy (rasterowy lub wektorowy) (nie jest wymagany identyfikator mapy):

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

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

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

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

Opcja renderingType zastępuje wszystkie ustawienia typu renderowania wprowadzone przez konfigurację identyfikatora mapy.

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

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 sekcji Korzystanie z definiowania stylów map w chmurze – uzyskiwanie identyfikatora mapy. Ustaw typ mapy na JavaScript i wybierz opcję Wektor. Zaznacz Pochylenie lub 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 zmieniać pochylenie i kierunek bezpośrednio na mapie. Jeśli korzystanie z funkcji nachylenia lub orientacji będzie miało negatywny wpływ na Twoją aplikację, pozostaw pola Nachylenie i Orientacja niezaznaczone, aby użytkownicy nie mogli ich dostosować.

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

Ważne: zalecamy powiązanie identyfikatora mapy i klucza API z tym samym projektem w konsoli Google Cloud.

Używanie elementu <gmp-map>

Mapy wektorowe, pochylenie i kierunek są domyślnie włączone, gdy używasz elementu <gmp-map>, który umożliwia dodawanie mapy do strony za pomocą kodu HTML. Więcej informacji

Przykłady

Poniżej znajdziesz przykłady, które pokazują, jak działają te funkcje:

• Widok nakładki WebGL
• Pochylenie i obrót WebGL
• Prezentacja funkcji WebGL
• Demonstracja aplikacji podróżniczej WebGL