Przedstawiamy interfejs Places UI Kit: gotową do użycia, niedrogą bibliotekę komponentów, która umożliwia przeniesienie znanego interfejsu Miejsc w Mapach Google na dowolną mapę. Wypróbuj je i podziel się z nami swoją opinią, aby pomóc nam kształtować przyszłość GMP.

Ta strona została przetłumaczona przez Cloud Translation API.

Przegląd

Funkcje interfejsu Maps JavaScript API oparte na WebGL pozwalają m.in. kontrolować nachylenie i obrót oraz dodawać obiekty 3D bezpośrednio do mapy. Obejmuje te funkcje:

WebGL Overlay View umożliwia dodawanie do map niestandardowej grafiki 2D i 3D oraz animowanych treści.
Pochylenie i kierunek można teraz dostosowywać 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żywać mapy wektorowej. W tej sekcji dowiesz się, jak to zrobić.

Określ opcję `renderingType`.

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

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

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

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 skonfigurowanie identyfikatora mapy.

Aby włączyć pochylenie i obrót, ustaw opcję tiltInteractionEnabled mapy na wartość true lub wywołaj map.setTiltInteractionEnabled.
Aby włączyć przesuwanie, ustaw opcję mapy headingInteractionEnabled na true lub wywołaj map.setHeadingInteractionEnabled.

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. Zaznacz Pochylenie lub Obrót, aby włączyć pochylenie i obrót na mapie. Dzięki temu możesz programowo dostosowywać te wartości, a także zezwalać użytkownikom na bezpośrednie dostosowywanie pochylenia i kierunku na mapie. Jeśli użycie pochylenia lub kierunku będzie miało negatywny wpływ na Twoją aplikację, 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'
});

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 dodanie mapy do strony za pomocą kodu HTML. Więcej informacji

Przykłady

Przykłady pokazujące te funkcje: