Sterowanie mapą i kamerą

Wybierz platformę: Android iOS JavaScript

Możesz chcieć kontrolować panoramowanie kamery, maksymalną wysokość lub tworzyć granice szerokości i długości geograficznej, które ograniczają ruch użytkownika na danej mapie. Możesz to zrobić za pomocą ograniczeń kamery.

Przykład poniżej pokazuje mapę z ustawionymi granicami lokalizacji, które ograniczają ruch kamery:

Ograniczanie granic mapy

Możesz ograniczyć granice geograficzne kamery, ustawiając opcjębounds.

Poniższy przykładowy kod pokazuje, jak ograniczyć granice mapy:

async function init() {
  const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: { lat: 37.7704, lng: -122.3985, altitude: 500 },
    tilt: 67.5,
    mode: MapMode.HYBRID,
    bounds: {south: 37, west: -123, north: 38, east: -121}
  });

init();
}

Ograniczanie dostępu do kamery

Możesz ograniczyć ruch kamery, ustawiając dowolną z tych opcji:

• maxAltitude
• minAltitude
• maxHeading
• minHeading
• maxTilt
• minTilt

Poniższy przykładowy kod pokazuje, jak ograniczyć dostęp do kamery:

async function init() {
  const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: { lat: 37.7704, lng: -122.3985, altitude: 500 },
    tilt: 67.5,
    mode: MapMode.HYBRID,
    minAltitude: 1,
    maxAltitude: 1000,
    minTilt: 35,
    maxTilt: 55
  });

 document.body.append(map);
}

init();

Ograniczanie granic mapy i kamery

Możesz jednocześnie ograniczyć granice mapy i kamery. Poniższy przykładowy kod pokazuje, jak ograniczyć granice mapy i kamery:

async function init() {
  const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: { lat: 37.7704, lng: -122.3985, altitude: 500 },
    tilt: 67.5,
    mode: MapMode.HYBRID,
    minAltitude: 1,
    maxAltitude: 1000,
    minTilt: 35,
    maxTilt: 55,
    bounds: {south: 37, west: -123, north: 38, east: -121}
  });

 document.body.append(map);
}

init();

Gotowe ścieżki kamery

Mapy 3D w JavaScript 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 uzyskać bardziej filmowe efekty.

Mapy 3D w JavaScript obsługują te ścieżki kamery:

• Animacja flyCameraTo przelatuje ze środka mapy do określonego miejsca docelowego.
• Animacja flyCameraAround 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
  });
}

Przelatuj

Poniższy przykładowy kod pokazuje animację kamery, która przelatuje wokół lokalizacji:

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

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

  map.flyCameraAround({
    camera,
    durationMillis: 60000,
    repeatCount: 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-animationend', () => {
    map.flyCameraAround({
      camera: flyToCamera,
      durationMillis: 60000,
      repeatCount: 1
    });
  }, {once: true});
}

Obsługa gestów sterujących

Gdy użytkownik przewija stronę zawierającą mapę, może przypadkowo spowodować powiększenie mapy. Możesz kontrolować to zachowanie, ustawiając gestureHandling opcję mapy.

gestureHandling: cooperative

„Współpraca” w obsłudze gestów umożliwia użytkownikowi przewijanie strony bez wpływu na powiększenie lub przesuwanie mapy. Aby powiększyć obraz, użytkownicy mogą używać elementów sterujących, gestów dwoma palcami (w przypadku urządzeń z ekranem dotykowym) lub przytrzymać CMD/CTRL podczas przewijania.

Poniższy kod pokazuje, jak ustawić obsługę gestów na „współpraca”:

new Map3DElement({
  center: { lat: 37.729901343702736, lng: -119.63788444355905, altitude: 1500 },
  tilt: 70,
  heading: 50,
  range: 4000,
  gestureHandling: 'COOPERATIVE',
});

gestureHandling: greedy

Obsługa gestów „zachłannych” reaguje na wszystkie zdarzenia przewijania i gesty dotykowe.

gestureHandling: auto

Obsługa gestów „Automatyczna” zmienia zachowanie mapy w zależności od tego, czy jest ona zawarta w <iframe>, i czy strona jest przewijalna.

• Jeśli mapa znajduje się w <iframe>, obsługa gestów będzie „współpracująca”.
• Jeśli mapa nie znajduje się w <iframe>, obsługa gestów będzie „zachłanna”.