Kamera-Ansicht und Grenzen einschränken

Plattform auswählen: Android iOS JavaScript

Möglicherweise möchten Sie die Schwenkung und die maximale Höhe der Kamera steuern oder Breiten- und Längengradgrenzen festlegen, um die Bewegung eines Nutzers auf einer bestimmten Karte einzuschränken. Dazu können Sie Kamerabeschränkungen verwenden.

Das folgende Beispiel zeigt eine Karte mit festgelegten Standortgrenzen, um die Bewegung der Kamera einzuschränken:

Kartengrenzen einschränken

Sie können die geografischen Grenzen der Kamera einschränken, indem Sie die Option bounds festlegen.

Das folgende Codebeispiel zeigt, wie die Kartengrenzen eingeschränkt werden:

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

Kamera einschränken

Sie können die Bewegung der Kamera einschränken, indem Sie eine der folgenden Optionen festlegen:

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

Das folgende Codebeispiel zeigt, wie die Kamera eingeschränkt wird:

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

Kartengrenzen und Kameragrenzen einschränken

Sie können gleichzeitig die Kartengrenzen und die Kameragrenzen einschränken. Das folgende Codebeispiel zeigt, wie sowohl die Kartengrenzen als auch die Kameragrenzen eingeschränkt werden:

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

Voreingestellte Kamerapfade

In 3D Maps in der Maps JavaScript API sind zwei voreingestellte Kamerapfade verfügbar. 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 kinoreifere Erlebnisse zu schaffen. Außerdem können Sie die Höhe der Kamera mit der Option altitudeMode steuern.

3D Maps in der Maps JavaScript API unterstützt die folgenden Kamerapfade:

• Die Animation flyCameraTo fliegt vom Mittelpunkt der Karte zu einem angegebenen Ziel.
• Die Animation flyCameraAround 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 Standort 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
  });
}

Umfliegen

Das folgende Codebeispiel zeigt, wie die Kamera animiert wird, um einen Standort zu umfliegen:

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

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

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

Animationen kombinieren

Das folgende Codebeispiel zeigt, wie Animationen kombiniert werden, um die Kamera zu einem Standort zu fliegen und sich dann um den Standort 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});
}

Festlegen, wie Touch-Gesten verarbeitet werden

Scrollt ein Nutzer auf einer Seite mit einer Karte, löst das möglicherweise ungewollt ein Zoomen aus. Sie können dieses Verhalten mit der Kartenoption gestureHandling steuern.

gestureHandling: cooperative

Mit der Option „Cooperative“ kann der Nutzer auf der Seite scrollen, ohne dass sich das auf das Zoomen oder Schwenken der Karte auswirkt. Zum Zoomen können Nutzer die Steuerelemente, Zwei-Finger Gesten (für Touchscreen-Geräte) oder die Tastenkombination CMD/CTRL + Scrollen verwenden.

Der folgende Code zeigt, wie die Option „Cooperative“ für die Verarbeitung von Touch-Gesten festgelegt wird:

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

gestureHandling: greedy

Die Option „Greedy“ reagiert auf alle Scrollereignisse und Touch-Gesten.

gestureHandling: auto

Die Option "Auto" für die Gestensteuerung ändert das Verhalten der Karte je nachdem, ob die Karte in einem <iframe> enthalten ist und ob die Seite scrollbar ist.

• Wenn sich die Karte in einem <iframe> befindet, wird die Option "Cooperative" für die Verarbeitung von Touch-Gesten verwendet.
• Wenn sich die Karte nicht in einem <iframe> befindet, wird die Option „Greedy“ für die Verarbeitung von Touch-Gesten verwendet.