Neigung und Drehung

Plattform auswählen: Android iOS JavaScript

Beispiel ansehen

Überblick

Sie können Neigung und Drehung (Ausrichtung) auf der Vektorkarte festlegen. Dazu geben Sie beim Initialisieren der Karte die Eigenschaften heading und tilt an und rufen die Methoden setTilt und setHeading auf der Karte auf. Im folgenden Beispiel werden der Karte einige Schaltflächen hinzugefügt, die eine programmatische Anpassung von Neigung und Ausrichtung in 20-Grad-Schritten ermöglichen.

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      center: {
        lat: 37.7893719,
        lng: -122.3942,
      },
      zoom: 16,
      heading: 320,
      tilt: 47.5,
      mapId: "90f87356969d889c",
    }
  );

  const buttons: [string, string, number, google.maps.ControlPosition][] = [
    ["Rotate Left", "rotate", 20, google.maps.ControlPosition.LEFT_CENTER],
    ["Rotate Right", "rotate", -20, google.maps.ControlPosition.RIGHT_CENTER],
    ["Tilt Down", "tilt", 20, google.maps.ControlPosition.TOP_CENTER],
    ["Tilt Up", "tilt", -20, google.maps.ControlPosition.BOTTOM_CENTER],
  ];

  buttons.forEach(([text, mode, amount, position]) => {
    const controlDiv = document.createElement("div");
    const controlUI = document.createElement("button");

    controlUI.classList.add("ui-button");
    controlUI.innerText = `${text}`;
    controlUI.addEventListener("click", () => {
      adjustMap(mode, amount);
    });
    controlDiv.appendChild(controlUI);
    map.controls[position].push(controlDiv);
  });

  const adjustMap = function (mode: string, amount: number) {
    switch (mode) {
      case "tilt":
        map.setTilt(map.getTilt()! + amount);
        break;
      case "rotate":
        map.setHeading(map.getHeading()! + amount);
        break;
      default:
        break;
    }
  };
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: {
      lat: 37.7893719,
      lng: -122.3942,
    },
    zoom: 16,
    heading: 320,
    tilt: 47.5,
    mapId: "90f87356969d889c",
  });
  const buttons = [
    ["Rotate Left", "rotate", 20, google.maps.ControlPosition.LEFT_CENTER],
    ["Rotate Right", "rotate", -20, google.maps.ControlPosition.RIGHT_CENTER],
    ["Tilt Down", "tilt", 20, google.maps.ControlPosition.TOP_CENTER],
    ["Tilt Up", "tilt", -20, google.maps.ControlPosition.BOTTOM_CENTER],
  ];

  buttons.forEach(([text, mode, amount, position]) => {
    const controlDiv = document.createElement("div");
    const controlUI = document.createElement("button");

    controlUI.classList.add("ui-button");
    controlUI.innerText = `${text}`;
    controlUI.addEventListener("click", () => {
      adjustMap(mode, amount);
    });
    controlDiv.appendChild(controlUI);
    map.controls[position].push(controlDiv);
  });

  const adjustMap = function (mode, amount) {
    switch (mode) {
      case "tilt":
        map.setTilt(map.getTilt() + amount);
        break;
      case "rotate":
        map.setHeading(map.getHeading() + amount);
        break;
      default:
        break;
    }
  };
}

window.initMap = initMap;
index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.ui-button {
  background-color: #fff;
  border: 0;
  border-radius: 2px;
  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
  margin: 10px;
  padding: 0 0.5em;
  font: 400 18px Roboto, Arial, sans-serif;
  overflow: hidden;
  height: 40px;
  cursor: pointer;
}
.ui-button:hover {
  background: rgb(235, 235, 235);
}

style.css

HTML

<html>
  <head>
    <title>Tilt and Rotation</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html

Testbeispiel

Mithilfe von Maus und Tastatur

Wenn Nutzerinteraktionen zum Neigen und Drehen (Ausrichtung) aktiviert sind (entweder programmatisch oder in der Google Cloud Console), können Nutzer Neigung und Drehung mit Maus und Tastatur anpassen:

  • Maus: Halten Sie die Umschalttaste gedrückt und klicken und ziehen Sie die Maus nach oben und unten, um die Neigung anzupassen, bzw. nach rechts und links, um die Ausrichtung anzupassen.
  • Tastatur: Halten Sie die Umschalttaste gedrückt und verwenden Sie die Aufwärts- und Abwärtspfeiltaste, um die Neigung anzupassen, bzw. die Rechts- und Linkspfeiltaste, um die Ausrichtung anzupassen.

Neigung und Ausrichtung programmatisch anpassen

Mit den Methoden setTilt() und setHeading() können Sie Neigung und Ausrichtung einer Vektorkarte programmatisch anpassen. Die Ausrichtung ist die Richtung, in die die Kamera ausgehend von Norden im Uhrzeigersinn zeigt. map.setHeading(90) dreht die Karte also so, dass Osten oben ist. Der Neigungswinkel wird vom Zenit aus gemessen. map.setTilt(0) entspricht also dem Blick gerade nach unten, während map.setTilt(45) für eine schräge Perspektive sorgt.

  • Rufen Sie setTilt() auf, um den Neigungswinkel der Karte festzulegen. Verwenden Sie getTilt(), um den aktuellen Neigungswinkel abzurufen.
  • Rufen Sie setHeading() auf, um die Ausrichtung der Karte festzulegen. Verwenden Sie getHeading(), um die aktuelle Ausrichtung abzurufen.

Wenn Sie den Mittelpunkt der Karte ändern, dabei aber Neigung und Ausrichtung beibehalten möchten, verwenden Sie map.setCenter() oder map.panBy().

Beachten Sie, dass der verfügbare Winkelbereich je nach aktueller Zoomstufe variiert. Werte außerhalb dieses Bereichs werden an den derzeit zulässigen Bereich angeglichen.

Sie können auch die Methode moveCamera verwenden, um Ausrichtung, Neigung, Mittelpunkt und Zoomstufe programmatisch zu ändern. Weitere Informationen

Auswirkungen auf andere Methoden

Wenn die Karte geneigt oder gedreht wird, wirkt sich dies auf das Verhalten anderer Maps JavaScript API-Methoden aus:

  • map.getBounds() gibt immer den kleinsten Begrenzungsrahmen zurück, der den sichtbaren Bereich enthält. Wenn die Karte geneigt wird, können die zurückgegebenen Grenzen eine größere Region darstellen als die, die im Darstellungsbereich der Karte sichtbar ist.
  • map.fitBounds() setzt Neigung und Ausrichtung vor dem Anpassen der Grenzen auf null zurück.
  • map.panToBounds() setzt Neigung und Ausrichtung vor dem Schwenken der Grenzen auf null zurück.
  • map.setTilt() akzeptiert einen beliebigen Wert, schränkt die maximale Neigung aber anhand der aktuellen Zoomstufe der Karte ein.
  • map.setHeading() akzeptiert einen beliebigen Wert und passt ihn so an, dass er in den Bereich [0, 360] passt.