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

Wybierz platformę: Android iOS JavaScript

Omówienie elementów sterujących

Mapy wyświetlane za pomocą interfejsu Photorealistic 3D Maps w Mapach w JavaScripcie zawierają elementy interfejsu, które umożliwiają użytkownikom interakcję z mapą. Te elementy są nazywane kontrolkami. Możesz je uwzględnić w interfejsie lub nie. Jeśli ukryjesz elementy interfejsu, użytkownik nadal będzie mógł poruszać się po mapie za pomocą skrótów klawiszowych.

Interfejs Photorealistic 3D Maps w Mapach w JavaScripcie umożliwia też prowadzenie użytkowników po mapie za pomocą wstępnie ustawionych ścieżek kamery. Ścieżki te można dostosowywać i łączyć, aby tworzyć bogate środowiska 3D.

Ustawienia eksploracji

Na ilustracji poniżej widać domyślny zestaw elementów sterujących wyświetlanych przez fotorealistyczne mapy 3D w Maps JavaScript API:

Obraz mapy z elementami sterującymi

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

  • Element sterujący powiększeniem zawiera przyciski „+” i „–”, które służą do zmiany poziomu powiększenia mapy.
  • Sterowanie pochyleniem umożliwia zmianę pochylenia kamery.
  • Element sterujący obracaniem umożliwia zmianę kierunku, w którym zwrócona jest kamera.
  • Element sterujący przesuwaniem wyświetla przyciski „←”, „→”, „↑” i „↓”, które służą do zmiany środka mapy.

Poniższy przykładowy kod pokazuje, jak przełączać elementy sterujące eksploracyjnym dobieraniem reklam:

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 Mapach w JavaScripcie udostępniają 2 gotowe ścieżki kamery. Ścieżki kamery można dostosowywać, zmieniając czas trwania animacji (zwiększając lub zmniejszając w ten sposób prędkość) albo łącząc je, aby tworzyć bardziej filmowe efekty.

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

  • Animacja flyCameraTo przelatuje z centrum mapy do określonego miejsca docelowego.
  • flyCameraAround animacja obraca się wokół punktu na mapie o określoną liczbę obrotów.

Dostępne są 2 ścieżki, które można połączyć, aby przelecieć do wybranego punktu, obrócić się wokół niego, a następnie zatrzymać w określonym miejscu.

Przejdź do

Poniższy przykładowy kod pokazuje, jak animować kamerę, aby przeleciała 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
  });
}

Przelatywanie

Poniższy przykładowy kod pokazuje, jak animować kamerę, aby przelatywała wokół lokalizacji:

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

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

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

Łączenie animacji

Poniższy przykładowy kod pokazuje, jak połączyć animacje, aby przenieść kamerę do lokalizacji, a następnie obracać 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