Pochylenie i obrót

Wybierz platformę: Android iOS JavaScript

Zobacz przykład

Omówienie

Możesz ustawić pochylenie i obrót (nagłówek) na mapie wektorowej. przez uwzględnienie właściwości heading i tilt podczas inicjowania mapy oraz po wywołaniu na mapie metod setTilt i setHeading. Poniżej Przykład dodaje do mapy kilka przycisków, które pozwalają automatycznie dostosować przechylenie. i nagłówek w odstępach co 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

Zobacz próbkę

Korzystanie z gestów myszy i klawiatury

Jeśli zostały włączone interakcje użytkownika dotyczące przechylania i obracania (nagłówka) automatycznie lub w konsoli Google Cloud), użytkownicy mogą dostosować przechylenie i obracania za pomocą myszy i klawiatury:

  • Za pomocą myszy przytrzymaj naciśnięty klawisz Shift, a następnie kliknij i przeciągnij w górę i w dół, aby dostosować przechylenie, a w prawo i w lewo, aby dostosować kierunek.
  • Na klawiaturze przytrzymaj klawisz Shift, a następnie użyj klawiszy strzałek w górę i w dół Użyj klawiszy strzałek, by dostosować nachylenie, oraz klawiszy strzałek w prawo i w lewo, by dostosować nagłówek.

Automatyczne dostosowywanie przechylenia i kierunku

Za pomocą metod setTilt() i setHeading() możesz automatycznie dostosowywać pochylenie i kierunku na mapie wektorowej. Nagłówek to kierunek, w którym jest zwrócony aparat stopni w kierunku północnym, więc map.setHeading(90) będzie obracać mapę tak by wschód był zwrócony do góry. Kąt nachylenia jest mierzony od zenitu, więc map.setTilt(0) patrzy prosto w dół, a map.setTilt(45) będzie widzieć wynik w widoku ukośnym.

  • Wywołaj funkcję setTilt(), aby ustawić kąt nachylenia mapy. Użyj kodu getTilt(), aby uzyskać bieżącej wartości pochylenia.
  • Wywołaj setHeading(), aby ustawić nagłówek mapy. Użyj getHeading(), aby otrzymać bieżącej wartości nagłówka.

Aby zmienić środek mapy przy zachowaniu przechylenia i kierunku, użyj funkcji 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 zostaną zmienione na obecnie dozwolone zakres dat.

Możesz też użyć metody moveCamera, aby automatycznie zmienić nagłówek, możesz przechylić, wyśrodkować i powiększyć. Więcej informacji

Wpływ na inne metody

Po zastosowaniu przechylenia lub obrotu do mapy działanie innych interfejsów Maps JavaScript API metod, które wpływają na:

  • map.getBounds() zawsze zwraca najmniejszą ramkę ograniczającą, która zawiera widoczny obszar; po zastosowaniu przechylenia zwrócone granice mogą przedstawiać jest większy niż obszar widoczny w widoku mapy.
  • map.fitBounds() zresetuje pochylenie i kierunek do zera przed dopasowaniem granic.
  • map.panToBounds() zresetuje pochylenie i kierunek do zera przed przesunięciem granic.
  • map.setTilt() akceptuje dowolną wartość, ale ogranicza maksymalne pochylenie na podstawie aktualnego poziomu powiększenia mapy.
  • map.setHeading() akceptuje dowolną wartość i będzie ją modyfikować, aby dopasować do zakres [0, 360].