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 richiamando i metodi setTilt e setHeading sulla mappa. Le seguenti esempio aggiunge alla mappa alcuni pulsanti che mostrano la regolazione dell'inclinazione in modo programmatico e la direzione 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>

    <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 con inclinazione e rotazione (intestazione) sono state attivate (o in modo programmatico o nella console Google Cloud), gli utenti possono e la rotazione utilizzando il mouse e la tastiera:

  • Con 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, verso destra e sinistra per regolare l'orientamento.
  • Con la tastiera, tieni premuto il tasto Maiusc, quindi usa i tasti Su e Giù i tasti freccia per regolare l'inclinazione e i tasti freccia destra e sinistra per regolare .

Regolazione programmatica di inclinazione e intestazione

Usa i metodi setTilt() e setHeading() per regolare l'inclinazione in modo programmatico e dirigendoti verso una mappa vettoriale. L'orientamento è la direzione in cui è rivolta la fotocamera gradi in senso orario partendo 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 in verticale, mentre map.setTilt(45) risultato in una vista obliqua.

  • Chiama setTilt() per impostare l'angolo di inclinazione della mappa. Usa getTilt() per ottenere valore di inclinazione corrente.
  • 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 la gamma di angoli utilizzabili varia in base allo zoom corrente livello. I valori al di fuori di questo intervallo verranno applicati ai valori attualmente consentiti intervallo.

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

Impatto su altri metodi

Quando alla mappa vengono applicate l'inclinazione o la rotazione, il comportamento dell'altra API Maps JavaScript di questi metodi:

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