Places UI Kit: gotowa do użycia biblioteka, która zapewnia programistom możliwość dostosowywania i kontrolowania. Wypróbuj go i podziel się opinią na temat korzystania z interfejsu UI Kit.

Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Przegląd

Funkcje interfejsu Maps JavaScript API oparte na WebGL umożliwiają sterowanie pochyleniem i obrotem, dodawanie obiektów 3D bezpośrednio do mapy i wiele innych. Oto niektóre z tych funkcji:

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.
Powiększenie 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 ładowania biblioteki Mapy:

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

Podczas inicjowania mapy użyj opcji renderingType, aby określić 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 skonfigurowane za pomocą identyfikatora mapy.

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

Użyj identyfikatora mapy, aby ustawić typ renderowania

Typ renderowania możesz też określić za pomocą identyfikatora mapy. Aby utworzyć nowy identyfikator mapy, wykonaj czynności opisane w sekcji Korzystanie z definiowania stylów map w Google 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 użytkownicy mogą dostosowywać pochylenie i kierunek bezpośrednio na mapie. Jeśli używanie pochylenia lub kierunku będzie miało negatywny wpływ na Twoją aplikację, pozostaw pola Pochylenie i Obrót odznaczone, aby użytkownicy nie mogli dostosowywać pochylenia i obrotu.

Tworzenie identyfikatora mapy wektorowej

Następnie zaktualizuj kod inicjowania mapy o utworzony identyfikator mapy. Identyfikatory map znajdziesz na stronie Zarządzanie mapami. Podczas tworzenia instancji mapy podaj identyfikator 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żyj 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

Aby zademonstrować te funkcje, udostępniliśmy te przykłady: