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. Nell'esempio seguente vengono aggiunti alla mappa alcuni pulsanti che mostrano la regolazione programmatica dell'inclinazione e dell'orientamento 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;
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

Prova Sample

Uso dei gesti del mouse e della tastiera

Se le interazioni degli utenti di inclinazione e rotazione (intestazione) sono state attivate (in modo programmatico o nella console Google Cloud), gli utenti possono regolare l'inclinazione e la rotazione utilizzando mouse e tastiera:

  • Utilizzando il mouse, tieni premuto il tasto Maiusc, quindi fai clic e trascina il mouse verso l'alto e verso il basso per regolare l'inclinazione, oppure verso destra e sinistra per regolare l'intestazione.
  • Con 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 intestazione

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

  • Chiama 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. Usa getHeading() per ottenere il valore dell'intestazione corrente.

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

Tieni presente che l'intervallo di angolazioni utilizzabili varia in base al livello di zoom corrente. I valori al di fuori di questo intervallo verranno limitati 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'inclinazione o la rotazione applicata alla mappa influisce sul comportamento di altri metodi dell'API Maps JavaScript:

  • map.getBounds() restituisce sempre il riquadro di delimitazione più piccolo che include l'area visibile; quando viene applicata l'inclinazione, i limiti restituiti potrebbero rappresentare una regione più ampia di quella dell'area visibile della mappa.
  • map.fitBounds() reimposterà l'inclinazione e l'orientamento a zero prima di rientrare nei limiti.
  • map.panToBounds() reimposterà l'inclinazione e l'orientamento a zero prima della panoramica dei limiti.
  • map.setTilt() accetta qualsiasi valore, ma limita l'inclinazione massima in base al livello di zoom della mappa corrente.
  • map.setHeading() accetta qualsiasi valore e lo modifica per rientrare nell'intervallo [0, 360].