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

Wybierz platformę: Android iOS JavaScript

Omówienie ustawień

Mapy wyświetlane za pomocą interfejsu Maps JavaScript API w trybie Map 3D 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 zrobić miejsce na niestandardowe elementy sterujące. Pamiętaj, że skróty klawiszowe do przeglądania mapy są dostępne, gdy elementy sterujące interfejsu są wyłączone.

Interfejs API Map 3D 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 funkcje 3D.

Ustawienia eksploracji

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

Obraz mapy z elementami sterującymi

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

  • Element sterujący powiększeniem zawiera przyciski „+” i „–”, które służą do zmiany poziomu powiększenia mapy.
  • Element sterujący przesuwaniem wyświetla przyciski „←”, „→”, „↑” i „↓”, które służą do zmiany środka mapy.
  • Elementy sterujące obracaniem umożliwiają zmianę kierunku kamery.
  • Sterowanie pochyleniem umożliwia zmianę pochylenia kamery.
  • Sterowanie kompasem wskazuje kierunek północy na kompasie i umożliwia zresetowanie kamery do kierunku północnego.

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

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