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 ramach 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 eksplorowania mapy są dostępne, gdy elementy sterujące interfejsu są wyłączone.

Interfejs 3D Maps in Maps JavaScript API umożliwia też prowadzenie użytkowników po mapie za pomocą gotowych ścieżek kamery. Ścieżki te można dostosowywać i łączyć, aby tworzyć bogate doświadczenia 3D.

Elementy sterujące eksploracją

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

Obraz mapy z elementami sterującymi

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

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

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,
  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