Inclina e rotazione

Seleziona la piattaforma: Android iOS JavaScript

Visualizza esempio

Panoramica

Puoi impostare l'inclinazione e la rotazione (intestazione) sulla mappa vettoriale includendo le proprietà heading e tilt durante l'inizializzazione della mappa e chiamando i metodi setTilt e setHeading sulla mappa. Nel seguente esempio vengono aggiunti alla mappa alcuni pulsanti che mostrano la regolazione programmatica dell'inclinazione e dell'intestazione con incrementi di 20 gradi.

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.
      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>

Prova Sample

Utilizzo dei gesti con il mouse e con la tastiera

Puoi regolare l'inclinazione e la rotazione utilizzando il mouse e la tastiera:

  • Utilizzando il mouse, tieni premuto il tasto Maiusc, quindi fai clic e trascina il mouse verso l'alto e il basso per regolare l'inclinazione, verso destra e verso sinistra per regolare l'intestazione.
  • Utilizzando la tastiera, tieni premuto il tasto Maiusc, quindi utilizza i tasti Freccia su e Freccia giù per regolare l'inclinazione e i tasti Freccia destra e sinistra per regolare l'intestazione.

Regolazione programmatica di inclinazione e orientamento

Utilizza i metodi setTilt() e setHeading() per regolare in modo programmatico l'inclinazione e l'orientamento su una mappa vettoriale. La direzione è la direzione in cui la fotocamera è rivolta in senso orario a partire da nord, quindi map.setHeading(90) ruoterà la mappa in modo che l'est sia rivolto verso l'alto. L'angolo di inclinazione viene misurato dallo zenit, quindi map.setTilt(0) guarda verso il basso, mentre con map.setTilt(45) viene mostrata una vista obliqua.

  • Richiama setTilt() per impostare l'angolo di inclinazione della mappa. Usa getTilt() per ottenere il valore di inclinazione attuale.
  • Chiama setHeading() per impostare l'intestazione della mappa. Utilizza getHeading() per ottenere il valore corrente dell'intestazione.

Per cambiare il centro della mappa mantenendo inclinazione e orientamento, utilizza map.setCenter() o map.panBy().

Tieni presente che la gamma di angolazioni utilizzabili varia in base al livello di zoom corrente. I valori al di fuori di questo intervallo verranno fissati all'intervallo attualmente consentito.

Puoi anche utilizzare il metodo moveCamera per modificare in modo programmatico intestazione, inclinazione, centro e zoom. Scopri di più.

Impatto su altri metodi

L'applicazione dell'inclinazione o della rotazione alla mappa influisce sul comportamento degli altri metodi dell'API Maps JavaScript:

  • map.getBounds() restituisce sempre il riquadro di delimitazione più piccolo che include l'area visibile. Se viene applicata l'inclinazione, i limiti restituiti potrebbero rappresentare una regione più grande dell'area visibile dell'area visibile della mappa.
  • map.fitBounds() reimposterà l'inclinazione e l'orientamento su zero prima di adattarsi ai limiti.
  • map.panToBounds() reimposterà l'inclinazione e l'intestazione su zero prima di eseguire la panoramica dei limiti.
  • map.setTilt() accetta qualsiasi valore, ma limita l'inclinazione massima in base al livello di zoom corrente della mappa.
  • map.setHeading() accetta qualsiasi valore e lo modificherà per adattarlo all'intervallo [0, 360].