Neigung und Rotation

Plattform auswählen: Android iOS JavaScript

Beispiel ansehen

Übersicht

Du kannst Neigung und Rotation (Überschrift) auf der Vektorkarte festlegen, indem du beim Initialisieren der Karte die Properties heading und tilt einschließt und die Methoden setTilt und setHeading auf der Karte aufrufst. Im folgenden Beispiel werden einige Schaltflächen zur Karte hinzugefügt, auf denen die Neigung und die Richtung programmatisch in 20-Grad-Schritten angepasst werden.

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;

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;

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

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 callback 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
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=beta"
      defer
    ></script>
  </body>
</html>

Beispiel ausprobieren

Maus- und Tastaturbewegungen verwenden

Sie können Neigung und Drehung mit der Maus und der Tastatur anpassen:

  • Halte mit der Maus die Umschalttaste gedrückt. Klicke dann auf die Maus und ziehe sie nach oben oder unten, um die Neigung anzupassen. Mit der rechten und linken Maustaste kannst du die Richtung anpassen.
  • Halte die Umschalttaste gedrückt und verwende dann die Pfeiltasten nach oben oder unten, um die Neigung anzupassen. Mit den Rechts- und Linkspfeilen kannst du die Überschrift anpassen.

Neigung und Ausrichtung programmatisch anpassen

Mit den Methoden setTilt() und setHeading() können Sie Neigung und Richtung einer Vektorkarte programmatisch anpassen. Die Richtung ist die Richtung, in die die Kamera im Norden zeigt, beginnend mit dem Pfeil nach Norden. Deshalb dreht map.setHeading(90) die Karte nach Osten. Der Neigungswinkel wird vom Zenit gemessen. Daher sieht map.setTilt(0) gerade aus, während map.setTilt(45) zu einer Schrägsicht führt.

  • Rufe setTilt() auf, um den Neigungswinkel der Karte festzulegen. Verwenden Sie getTilt(), um den aktuellen Neigungswert abzurufen.
  • Rufen Sie setHeading() auf, um die Richtung der Karte festzulegen. Verwenden Sie getHeading(), um den aktuellen Wert der Überschrift abzurufen.

Wenn du die Kartenmitte ändern und gleichzeitig die Neigung und Richtung beibehalten möchtest, verwende map.setCenter() oder map.panBy().

Der verfügbare Winkelbereich kann je nach aktueller Zoomstufe variieren. Werte außerhalb dieses Bereichs werden auf den derzeit zulässigen Bereich gesetzt.

Mit der Methode moveCamera können Sie außerdem die Richtung, die Neigung, die Mitte und den Zoom programmatisch ä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 Neigung angewendet wird, können die zurückgegebenen Grenzen einen größeren Bereich darstellen als den sichtbaren Bereich des Darstellungsbereichs der Karte.
  • 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 aber die maximale Neigung anhand des aktuellen Zoomfaktors für die Karte ein.
  • map.setHeading() akzeptiert einen beliebigen Wert und passt ihn so an, dass er in den Bereich [0, 360] passt.