Pochylenie i obrót

Wybierz platformę: Android iOS JavaScript

Wyświetl fragment

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, a także wywołując na mapie metody setTilt i setHeading. Poniższy przykład pokazuje dodanie do mapy przycisków, które automatycznie dostosowują przechylenie i nagłówek 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=beta"
      defer
    ></script>
  </body>
</html>
index.html

Wypróbuj fragment

Korzystanie z gestów myszy i klawiatury

Pochylenie i obrót ekranu możesz dostosować za pomocą myszy i klawiatury:

  • 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ć nagłówek.
  • Na klawiaturze przytrzymaj klawisz Shift, a następnie za pomocą strzałek w górę i w dół dostosuj pochylenie, a strzałek w prawo i w lewo do dostosowania nagłówka.

Automatyczne dostosowywanie przechylenia i nagłówka

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 od północy, więc map.setHeading(90) obróci mapę tak, by 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 pole map.setTilt(45) daje widok skośny.

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

Aby zmienić środek mapy przy zachowaniu pochylenia i kierunku, użyj map.setCenter() lub map.panBy().

Pamiętaj, że dostępny zakres kątów zależy od bieżącego poziomu powiększenia. Wartości spoza tego zakresu zostaną ograniczone do aktualnie dozwolonego zakresu.

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

Wpływ na inne metody

Zastosowanie do mapy przechylenia lub obrotu ma wpływ 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ą wskazywać większy obszar niż widoczny obszar mapy.
  • map.fitBounds() zresetuje przechylenie i kierunek do zera przed dopasowaniem granic.
  • Przed przesuwaniem granic funkcja map.panToBounds() zresetuje przechylenie i kierunek na zero.
  • map.setTilt() akceptuje dowolną wartość, ale ogranicza maksymalne pochylenie na podstawie bieżącego poziomu powiększenia mapy.
  • map.setHeading() akceptuje dowolną wartość i zmienia ją, aby mieściła się w zakresie [0–360].