Kamerapfade animieren

Plattform auswählen: Android iOS JavaScript

Sie können Ihrer 3D-Karte Animationen von Kamerapfaden hinzufügen, um Ihren Nutzern ein noch intensiveres Erlebnis zu bieten. Bei Kamera-Pfad-Animationen kann die Kamera zu einem Punkt auf der Karte fliegen oder ihn umkreisen.

Im folgenden Beispiel werden die Animationen flyCameraTo und flyCameraAround kombiniert:

Voreingestellte Kamerapfade

3D Maps in Maps JavaScript bietet zwei voreingestellte Kamerapfade. Die Kamerapfade können angepasst werden, indem Sie die Dauer der Animation ändern (wodurch die Geschwindigkeit erhöht oder verringert wird) oder sie kombinieren, um filmischere Effekte zu erzielen. Außerdem können Sie die Höhe der Kamera mit altitudeMode festlegen.

3D-Karten in Maps JavaScript unterstützen die folgenden Kamerapfade:

• Die flyCameraTo-Animation fliegt von der Kartenmitte zu einem angegebenen Ziel.
• Die flyCameraAround-Animation dreht sich um einen Punkt auf der Karte und führt die angegebene Anzahl von Umdrehungen aus.

Die beiden verfügbaren Pfade können kombiniert werden, um zu einem Point of Interest zu fliegen, sich um ihn zu drehen und dann anzuhalten, wenn angegeben.

Anfliegen

Das folgende Codebeispiel zeigt, wie die Kamera animiert wird, um zu einem Ort zu fliegen:

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
  });
}

Umherfliegen

Das folgende Codebeispiel zeigt, wie die Kamera animiert wird, um einen Ort zu umrunden:

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

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

  map.flyCameraAround({
    camera,
    durationMillis: 60000,
    repeatCount: 1
  });
}

Animationen kombinieren

Im folgenden Codebeispiel wird gezeigt, wie Sie Animationen kombinieren, um die Kamera zu einem Ort zu bewegen und dann um diesen Ort zu drehen, wenn die erste Animation endet:

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});
}