Elementy sterujące mapą 3D i przeglądanie

Omówienie ustawień

Mapy wyświetlane za pomocą interfejsu Maps JavaScript API w ramach usługi fotorealistycznych map 3D zawierają elementy interfejsu użytkownika, które umożliwiają interakcję z mapą. Te elementy nazywamy ustawieniami. Możesz je uwzględnić w interfejsie użytkownika lub nie. Jeśli pominiesz elementy sterujące interfejsem, użytkownik nadal będzie mógł poruszać się po mapie za pomocą skrótów klawiszowych.

Interfejs Maps JavaScript API obsługuje też mapy 3D o fotorealistycznej jakości, które umożliwiają użytkownikom poruszanie się po mapie za pomocą wstępnie ustawionych ścieżek kamery. Ścieżki można dostosowywać i łączyć, aby tworzyć bogate wrażenia 3D.

Elementy sterujące eksploracji

Na poniższym obrazie widać domyślny zestaw elementów sterujących wyświetlanych przez interfejs API Map Google w ramach realistycznych map 3D:

Obraz mapy z elementami sterującymi

Poniżej znajdziesz pełną listę elementów sterujących w fotorealistycznych mapach 3D w JavaScript w Mapach:

  • Element sterujący powiększeniem zawiera przyciski „+” i „-” służące do zmiany poziomu powiększenia mapy.
  • Regulacja pochylenia pozwala zmienić pochylenie kamery.
  • Za pomocą elementu sterującego Obrót możesz zmienić kierunek kamery.
  • Element sterujący „Przenieś” zawiera przyciski „←”, „→”, „↑” i „↓” umożliwiające zmianę położenia środka mapy.

Ten przykładowy kod pokazuje, jak przełączać elementy sterujące eksploracji:

JavaScript

const map = new Map3DElement({
  center: { lat: 37.819852, lng: -122.478549, altitude: 2000 },
  tilt: 75,
  heading: 330,
  mode: MapMode.SATELLITE,
  defaultUIDisabled: true,
});

HTML

<gmp-map-3d
  mode="hybrid"
  range="639.274301042242"
  tilt="64.92100184857551"
  center="34.0768990953219,-118.47450491266041,292.9794737933403"
  heading="-61.02026752077781"
  default-ui-disabled
></gmp-map-3d>

Gotowe ścieżki kamery

Fotorealistyczne mapy 3D w Maps JavaScript zawierają 2 wstępnie ustawione ścieżki kamery. Ścieżki kamery możesz dostosować, zmieniając czas trwania animacji (co spowoduje zwiększenie lub zmniejszenie szybkości) lub łącząc je, aby uzyskać bardziej filmowy efekt.

Fotorealistyczne mapy 3D w Maps JavaScript obsługują te ścieżki kamery:

  • Animacja flyCameraTo przelatuje z centrum mapy do określonego miejsca docelowego.
  • Animacja flyCameraAround obraca się wokół punktu na mapie przez określonyą liczbę rund.

Obie dostępne ścieżki można połączyć, aby przelecieć do punktu zainteresowania, obrócić się wokół niego, a następnie zatrzymać się w określonym miejscu.

Przejdź do

Poniższy przykładowy kod pokazuje animację kamery, która przelatuje do określonej lokalizacji:

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraTo({
    endCamera: {
      center: { lat: 37.6191, lng: -122.3816 },
      tilt: 67.5,
      range: 1000
    },
    durationMillis: 5000
  });
}

Oblot

Poniższy przykładowy kod pokazuje animację kamery, która przelatuje nad lokalizacją:

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraAround({
    camera,
    durationMillis: 60000,
    rounds: 1
  });
}

Łączenie animacji

Ten przykładowy kod pokazuje, jak połączyć animacje, aby przelecieć kamerą do danej lokalizacji, a potem obrócić ją wokół tej lokalizacji po zakończeniu pierwszej animacji:

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraTo({
    endCamera: flyToCamera,
    durationMillis: 5000,
  });

  map.addEventListener('gmp-animation-end', () => {
    map.flyCameraAround({
      camera: flyToCamera,
      durationMillis: 60000,
      rounds: 1
    });
  }, {once: true});
}

Dalsze kroki