Inclinación y rotación

Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

Seleccionar plataforma: Android iOS JavaScript

Ver muestra

Descripción general

Para configurar la inclinación y la rotación (encabezado) en el mapa de vectores, incluye las propiedades heading y tilt cuando inicialices el mapa, y llama a los métodos setTilt y setHeading en el mapa. En el siguiente ejemplo, se agregan algunos botones al mapa que muestran cómo ajustar la inclinación y el rumbo de forma programática en incrementos de 20 grados.

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>

Probar la muestra

Usar gestos del mouse y del teclado

Puedes ajustar la inclinación y la rotación con el mouse y el teclado:

  • Con el mouse, mantén presionada la tecla Mayúsculas y, luego, haz clic y arrastra el mouse hacia arriba y hacia abajo para ajustar la inclinación, la derecha y la izquierda para ajustar el encabezado.
  • Con el teclado, mantén presionada la tecla Mayúsculas y, luego, usa las teclas de flecha hacia arriba y hacia abajo para ajustar la inclinación, y las flechas hacia la derecha y hacia la izquierda para ajustar el encabezado.

Cómo ajustar la orientación y la inclinación de forma programática

Usa los métodos setTilt() y setHeading() para ajustar la inclinación y el rumbo de manera programática en un mapa vectorial. El rumbo es la dirección hacia la que apunta la cámara en grados en sentido horario, comenzando por el norte, por lo que map.setHeading(90) rotará el mapa para que el este quede hacia arriba. El ángulo de inclinación se mide desde el cenit, por lo que map.setTilt(0) mira hacia abajo, mientras que map.setTilt(45) dará como resultado una vista oblicua.

  • Llama a setTilt() para establecer el ángulo de inclinación del mapa. Usa getTilt() para obtener el valor de inclinación actual.
  • Llama a setHeading() para establecer el encabezado del mapa. Usa getHeading() para obtener el valor de encabezado actual.

Para cambiar el centro del mapa y mantener la inclinación y el rumbo, usa map.setCenter() o map.panBy().

Ten en cuenta que el rango de ángulos que se pueden usar varía según el nivel de zoom actual. Los valores fuera de este rango se fijarán al rango permitido actualmente.

También puedes usar el método moveCamera para cambiar de manera programática el encabezado, la inclinación, el centro y el zoom. Obtén más información.

Impacto en otros métodos

Cuando se aplica la inclinación o la rotación al mapa, se ve afectado el comportamiento de otros métodos de la API de Maps JavaScript:

  • map.getBounds() siempre muestra el cuadro de límite más pequeño que incluye la región visible; cuando se aplica la inclinación, los límites mostrados pueden representar una región más grande que la región visible del viewport del mapa.
  • map.fitBounds() restablecerá la inclinación y el rumbo a cero antes de ajustar los límites.
  • map.panToBounds() restablecerá la inclinación y el rumbo a cero antes de desplazar lateralmente los límites.
  • map.setTilt() acepta cualquier valor, pero restringe la inclinación máxima según el nivel de zoom del mapa actual.
  • map.setHeading() acepta cualquier valor y lo modifica para que se ajuste al rango [0, 360].