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

Wybierz platformę: Android iOS JavaScript

Omówienie ustawień

Mapy wyświetlane za pomocą interfejsu 3D Maps in Maps JavaScript API zawierają elementy interfejsu, zwane elementami sterującymi eksploracją, które umożliwiają użytkownikom interakcję z mapą. Elementy sterujące eksploracją są domyślnie wyświetlane w interfejsie mapy, ale można je wyłączyć, aby uprościć interfejs lub zostawić miejsce na niestandardowe elementy sterujące. Pamiętaj, że skróty klawiszowe do przeglądania na mapie są dostępne, gdy elementy sterujące interfejsu są wyłączone.

Mapy 3D w interfejsie Maps JavaScript API obsługują też oprowadzanie użytkowników po mapie za pomocą gotowych ścieżek kamery. Te ścieżki można dostosowywać i łączyć, aby tworzyć bogate wrażenia 3D.

Ustawienia eksploracji

Poniższy obraz przedstawia domyślny zestaw elementów sterujących wyświetlanych przez mapy 3D w interfejsie Maps JavaScript API:

Obraz mapy z widocznymi elementami sterującymi

Poniżej znajdziesz listę wszystkich elementów sterujących dostępnych w Mapach 3D w Mapach w JavaScripcie:

  • Element sterujący powiększeniem wyświetla przyciski „+” i „-”, które służą do zmiany poziomu powiększenia mapy.
  • Element sterujący przemieszczaniem wyświetla przyciski „←”, „→”, „↑” i „↓” służące do zmiany środka mapy.
  • Elementy sterujące obracaniem umożliwiają zmianę kierunku kamery.
  • Sterowanie pochyleniem umożliwia zmianę pochylenia kamery.
  • Kompas wskazuje północ i umożliwia zresetowanie kamery do kierunku północnego.
  • Element sterujący trybem mapy umożliwia przełączanie się między trybem ROADMAP a trybem fotorealistycznym (HYBRID lub SATELLITE).

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

JavaScript

const map = new Map3DElement({
  center: { lat: 37.819852, lng: -122.478549, altitude: 2000 },
  tilt: 75,
  heading: 330,
  mode: MapMode.SATELLITE,
  defaultUIHidden: 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>

Dalsze kroki