Karte und Kamera steuern

Plattform auswählen: Android iOS JavaScript

Es kann sinnvoll sein, das Schwenken der Kamera oder die maximale Höhe zu steuern oder Breiten- und Längengrenzen festzulegen, 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 Kartenbegrenzungen 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();

Karten- und Kameragrenzen einschränken

Sie können sowohl die Karten- als auch die Kameragrenzen gleichzeitig einschränken. Im folgenden Codebeispiel wird gezeigt, wie sowohl die Karten- 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

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.

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 interessanten Punkt 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 },
      tilt: 67.5,
      range: 1000
    },
    durationMillis: 5000
  });
}

Umherfliegen

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

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

Festlegen, wie Touch-Gesten verarbeitet werden

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

gestureHandling: cooperative

Bei der „kooperativen“ Gestenverarbeitung 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 Taste CMD/CTRL beim Scrollen verwenden.

Im folgenden Code wird gezeigt, wie die Gestenverarbeitung auf „kooperativ“ festgelegt wird:

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

gestureHandling: greedy

Bei der „Greedy“-Gestenverarbeitung wird auf alle Scroll-Ereignisse und Touch-Gesten reagiert.

gestureHandling: auto

Bei der automatischen Gestensteuerung wird das Verhalten der Karte je nachdem geändert, ob sie in einem <iframe> enthalten ist und ob die Seite gescrollt werden kann.

• Wenn sich die Karte in einem <iframe> befindet, ist die Gestenverarbeitung „kooperativ“.
• Wenn sich die Karte nicht in einem <iframe> befindet, wird die Verarbeitung von Touch-Gesten als „greedy“ (gierig) bezeichnet.