Ograniczanie obrazu z kamery i granic

Wybierz platformę: Android iOS JavaScript

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

Poniższy przykład 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 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ć kamerę:

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 Mapach JavaScript udostępniają 2 gotowe ścieżki kamery. Ścieżki kamery można dostosować, zmieniając czas trwania animacji (zwiększając lub zmniejszając prędkość) albo łącząc je, aby uzyskać bardziej filmowe efekty. Dodatkowo możesz kontrolować wysokość kamery, określając altitudeMode.

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

• Animacja flyCameraTo przesuwa kamerę od środka mapy do określonego miejsca docelowego.
• Animacja flyCameraAround obraca kamerę wokół punktu na mapie o określoną liczbę obrotów.

Dostępne ścieżki można połączyć, aby przesuwać kamerę do interesującego miejsca, obracać ją wokół niego, a następnie zatrzymać w określonym momencie.

Przejdź do

Poniższy przykładowy kod pokazuje, jak animować kamerę, aby przesuwała się 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, altitude: 500 },
      altitudeMode: 'RELATIVE_TO_GROUND',
      tilt: 67.5,
      range: 1000
    },
    durationMillis: 5000
  });
}

Obróć się

Poniższy przykładowy kod pokazuje, jak animować kamerę, aby obracała się wokół określonej 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 przesuwać kamerę do określonej 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});
}

Kontrolowanie obsługi gestów

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

gestureHandling: cooperative

Obsługa gestów „cooperative” umożliwia użytkownikowi przewijanie strony bez wpływu na powiększenie lub panoramowanie mapy. Aby powiększyć mapę, użytkownicy mogą używać elementów sterujących, gestów dwoma palcami (w przypadku urządzeń z ekranem dotykowym) lub przytrzymywać klawisz CMD/CTRL podczas przewijania.

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

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 „greedy” reaguje na wszystkie zdarzenia przewijania i gesty dotykowe.

gestureHandling: auto

Obsługa gestów „auto” zmienia zachowanie mapy w zależności od tego, czy mapa znajduje się w elemencie <iframe>, oraz od tego, czy strona jest przewijalna.

• Jeśli mapa znajduje się w elemencie <iframe>, obsługa gestów będzie "cooperative".
• Jeśli mapa nie znajduje się w elemencie <iframe>, obsługa gestów będzie „greedy”.