Pochylenie i obrót

Wybierz platformę: Android iOS JavaScript

Wyświetl próbkę

Opis

Możesz ustawić przechylenie i obrót (nagłówek) na mapie wektorowej, uwzględniając właściwości heading i tilt podczas inicjowania mapy oraz wywołując na mapie metody setTilt i setHeading. W poniższym przykładzie dodaliśmy do mapy kilka przycisków, które automatycznie dostosowują przechylenie i kierunek w krokach 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>
    <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 callback 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 fragment

Używanie gestów myszy i klawiatury

Za pomocą myszy i klawiatury możesz dostosować przechylenie i obrót:

  • Za pomocą myszy przytrzymaj naciśnięty 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.
  • Za pomocą klawiatury przytrzymaj klawisz Shift, a następnie za pomocą klawiszy strzałek w górę i w dół dostosuj przechylenie oraz użyj klawiszy strzałek w prawo i w lewo do dostosowania kierunku.

Automatyczne dostosowywanie pochylenia i kierunku

Użyj metod setTilt() i setHeading(), aby automatycznie dostosować przechylenie i kierunek na mapie wektorowej. Kierunek to kierunek, w którym kamera jest skierowana w prawo, zaczynając od północy, więc map.setHeading(90) obróci mapę tak, aby wschód był skierowany do góry. Kąt nachylenia jest mierzony od zenitu, więc element map.setTilt(0) patrzy prosto w dół, a map.setTilt(45) daje ukośny widok.

  • Wywołaj setTilt(), aby ustawić kąt pochylenia mapy. Użyj funkcji getTilt(), aby pobrać aktualną wartość pochylenia.
  • Wywołaj setHeading(), aby ustawić nagłówek mapy. Użyj getHeading(), aby pobrać bieżącą wartość nagłówka.

Aby zmienić środek mapy przy zachowaniu przechylenia i kierunku, użyj właściwości map.setCenter() lub map.panBy().

Pamiętaj, że dostępny zakres kątów zależy od obecnego powiększenia. Wartości spoza tego zakresu będą ograniczane do aktualnie dozwolonego zakresu.

Możesz też użyć metody moveCamera, aby automatycznie zmienić kierunek, przechylenie, wyśrodkować i powiększyć. Więcej informacji

Wpływ na inne metody

Zastosowanie do mapy przechylenia lub obrotu wpływa na działanie innych metod interfejsu Maps JavaScript API:

  • map.getBounds() zawsze zwraca najmniejszą ramkę ograniczającą, która obejmuje widoczny obszar. Po zastosowaniu przechylenia zwrócone granice mogą przedstawiać większy obszar niż widoczny obszar widocznego obszaru mapy.
  • Przed dopasowaniem granic funkcja map.fitBounds() zresetuje przechylenie i kierunek do zera.
  • Przed przesunięciem granic funkcja map.panToBounds() zresetuje przechylenie i kierunek do zera.
  • map.setTilt() akceptuje dowolną wartość, ale ogranicza maksymalne nachylenie w zależności od obecnego powiększenia mapy.
  • map.setHeading() akceptuje dowolną wartość i zmienia ją, aby mieściła się w zakresie [0–360].