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 prędkość) albo łącząc je, aby tworzyć bardziej filmowe efekty. Możesz też sterować wysokością kamery, określając wartość parametru altitudeMode.

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, altitude: 500 },
      altitudeMode: 'RELATIVE_TO_GROUND',
      tilt: 67.5,
      range: 1000
    },
    durationMillis: 5000
  });
}

Przelatuj

Poniższy przykładowy kod pokazuje, jak animować kamerę, aby przelatywała 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żyć 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”.