Pochylenie i obrót

Wybierz platformę: Android iOS JavaScript

Wyświetl próbkę

Omówienie

Możesz ustawić pochylenie i obrót (kierunek) na mapie wektorowej, podając właściwości heading i tilt podczas inicjowania mapy oraz wywołując metody setTilt i setHeading na mapie. W tym przykładzie do mapy dodawane są przyciski, które umożliwiają programowe dostosowywanie pochylenia i kierunku o 20 stopni.

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

Wypróbuj

Korzystanie z gestów myszy i klawiatury

Jeśli interakcje użytkownika dotyczące pochylenia i obrotu (kierunku) zostały włączone (programowo lub w Google Cloud Console), użytkownicy mogą dostosowywać pochylenie i obrót za pomocą myszy i klawiatury:

  • Za pomocą myszy przytrzymaj klawisz Shift, a następnie kliknij i przeciągnij mysz w górę i w dół, aby dostosować pochylenie, oraz w prawo i w lewo, aby dostosować kierunek.
  • Na klawiaturze przytrzymaj klawisz Shift, a potem użyj klawiszy strzałek w górę i w dół, aby dostosować pochylenie, oraz klawiszy strzałek w lewo i w prawo, aby dostosować kierunek.

Programowe dostosowywanie pochylenia i kierunku

Aby programowo dostosować pochylenie i kierunek na mapie wektorowej, użyj metod setTilt() i setHeading(). Kierunek to kierunek, w jakim skierowana jest kamera, mierzony w stopniach w zgodnym z kierunkiem ruchu wskazówek zegara, zaczynając od północy. Oznacza to, że map.setHeading(90) spowoduje obrócenie mapy tak, aby wschodnia część była skierowana ku górze. Kąt nachylenia jest mierzony od zenitu, więc map.setTilt(0) oznacza patrzenie prosto w dół, a map.setTilt(45) – patrzenie pod kątem.

  • Aby ustawić kąt nachylenia mapy, wywołaj funkcję setTilt(). Aby uzyskać bieżącą wartość pochylenia, użyj polecenia getTilt().
  • Zadzwoń pod numer setHeading(), aby ustawić nagłówek mapy. Aby uzyskać bieżącą wartość nagłówka, użyj funkcji getHeading().

Aby zmienić środek mapy, zachowując przy tym pochylenie i kierunek, użyj map.setCenter() lub map.panBy().

Pamiętaj, że zakres kątów, które można stosować, zależy od bieżącego poziomu powiększenia. Wartości spoza tego zakresu są zmieniane na wartości graniczne.

Możesz też użyć metody moveCamera, aby programowo zmienić kierunek, pochylenie, położenie w środku i powiększenie. Więcej informacji

Wpływ na inne metody

Gdy na mapie zastosujesz pochylenie lub obrót, wpłynie to na działanie innych metod interfejsu Maps JavaScript API:

  • map.getBounds() zawsze zwraca najmniejszy prostokąt ograniczający, który zawiera widoczny obszar. Gdy zastosujesz pochylenie, zwrócone granice mogą reprezentować większy obszar niż widoczny obszar widoku mapy.
  • map.fitBounds() spowoduje zresetowanie pochylenia i kierunku do zera przed dopasowaniem granic.
  • map.panToBounds() spowoduje zresetowanie pochylenia i kierunku do zera przed przesunięciem granic.
  • map.setTilt() akceptuje dowolną wartość, ale ogranicza maksymalne pochylenie na podstawie bieżącego poziomu powiększenia mapy.
  • map.setHeading() może przyjmować dowolną wartość i będzie ją modyfikować, aby pasowała do zakresu [0, 360].