Inclinaison et rotation

Sélectionnez une plate-forme : Android iOS JavaScript

Voir un exemple

Présentation

Vous pouvez définir l'inclinaison et la rotation (orientation) sur la carte vectorielle en intégrant les propriétés heading et tilt lors de l'initialisation de la carte, et en appelant les méthodes setTilt et setHeading sur la carte. L'exemple suivant ajoute à la carte des boutons qui affichent le réglage programmatique de l'inclinaison et de l'orientation par incréments de 20 degrés.

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

Essayer avec un exemple

Utiliser la souris et le clavier

Si les interactions d'utilisateur avec l'inclinaison et la rotation (en-tête) ont été activées ( par programmation ou dans la console Google Cloud), les utilisateurs peuvent ajuster l'inclinaison et rotation à l'aide de la souris et du clavier:

  • Si vous utilisez la souris : maintenez la touche Maj enfoncée, puis cliquez et faites glisser la souris vers le haut ou le bas pour ajuster l'inclinaison, et vers la droite ou la gauche pour ajuster l'orientation.
  • Si vous utilisez le clavier : maintenez la touche Maj enfoncée, puis utilisez les flèches vers le haut ou le bas pour ajuster l'inclinaison, et les flèches vers la droite ou la gauche pour ajuster l'orientation.

Ajuster l'inclinaison et l'orientation programmatiquement

Utilisez les méthodes setTilt() et setHeading() pour ajuster programmatiquement l'inclinaison et l'orientation d'une carte vectorielle. L'orientation correspond à la direction vers laquelle la caméra est tournée dans le sens des aiguilles d'une montre, en partant du nord. Ainsi, map.setHeading(90) fera pivoter la carte de sorte que l'est soit orienté vers le haut. L'angle d'inclinaison est mesuré à partir du zénith. map.setTilt(0) équivaut donc à une vue directe vers le bas, tandis que map.setTilt(45) génère une vue oblique.

  • Appelez setTilt() pour définir l'angle d'inclinaison de la carte. Utilisez getTilt() pour obtenir la valeur d'inclinaison actuelle.
  • Appelez setHeading() pour définir l'orientation de la carte. Utilisez getHeading() pour obtenir la valeur d'orientation actuelle.

Pour modifier le centre de la carte sans changer l'inclinaison ni l'orientation, utilisez map.setCenter() ou map.panBy().

Notez que la plage des angles disponibles dépend du niveau de zoom actuel. Les valeurs sortant de cette plage seront limitées à la plage actuellement autorisée.

Vous pouvez également utiliser la méthode moveCamera pour modifier programmatiquement l'orientation, l'inclinaison, le centre et le zoom. En savoir plus

Impact sur les autres méthodes

Lorsqu'une inclinaison ou une rotation est appliquée à la carte, cela affecte le comportement des autres méthodes de l'API Maps JavaScript :

  • map.getBounds() renvoie toujours le plus petit cadre de délimitation qui comprend la région visible. Lorsqu'une inclinaison est appliquée, les limites renvoyées peuvent représenter une zone plus grande que la région visible de la fenêtre d'affichage de la carte.
  • map.fitBounds() réinitialise l'inclinaison et l'orientation à zéro avant d'ajuster les limites.
  • map.panToBounds() réinitialise l'inclinaison et l'orientation à zéro avant d'effectuer un panoramique sur les limites.
  • map.setTilt() accepte n'importe quelle valeur, mais limite l'inclinaison maximale en fonction du niveau de zoom actuel de la carte.
  • map.setHeading() accepte n'importe quelle valeur et la modifie pour s'adapter à la plage [0, 360].