Наклон и вращение

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Выберите платформу: Android iOS JavaScript

Просмотреть образец

Обзор

Вы можете установить наклон и поворот (заголовок) на векторной карте , включив свойства heading и tilt при инициализации карты и вызвав на карте методы setTilt и setHeading . В следующем примере на карту добавляются несколько кнопок, которые показывают программную настройку наклона и направления с шагом 20 градусов.

Машинопись

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;

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;

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);
}

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
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=beta"
      defer
    ></script>
  </body>
</html>

Попробуйте образец

Использование жестов мыши и клавиатуры

Вы можете настроить наклон и вращение с помощью мыши и клавиатуры:

  • Используя мышь , удерживайте нажатой клавишу Shift, затем нажмите и перетащите мышь вверх и вниз, чтобы отрегулировать наклон, вправо и влево, чтобы отрегулировать заголовок.
  • Используя клавиатуру , удерживайте нажатой клавишу Shift, затем используйте клавиши со стрелками вверх и вниз для регулировки наклона, а клавиши со стрелками вправо и влево — для регулировки направления.

Программная регулировка наклона и направления

Используйте setTilt() и setHeading() для программной настройки наклона и направления на векторной карте. Направление — это направление, в котором камера смотрит по часовой стрелке, начиная с севера, поэтому map.setHeading(90) повернет карту так, чтобы восток был направлен вверх. Угол наклона измеряется от зенита, поэтому map.setTilt(0) смотрит прямо вниз, а map.setTilt(45) дает вид под углом.

  • Вызовите setTilt() , чтобы установить угол наклона карты. Используйте getTilt() , чтобы получить текущее значение наклона.
  • Вызовите setHeading() , чтобы установить заголовок карты. Используйте getHeading() , чтобы получить текущее значение заголовка.

Чтобы изменить центр карты, сохранив наклон и направление, используйте map.setCenter() или map.panBy() .

Обратите внимание, что диапазон углов, которые можно использовать, зависит от текущего уровня масштабирования. Значения вне этого диапазона будут ограничены текущим допустимым диапазоном.

Вы также можете использовать метод moveCamera для программного изменения заголовка, наклона, центра и масштабирования. Узнать больше .

Влияние на другие методы

Когда к карте применяется наклон или поворот, это влияет на поведение других методов Maps JavaScript API:

  • map.getBounds() всегда возвращает наименьшую ограничивающую рамку, включающую видимую область; при применении наклона возвращаемые границы могут представлять большую область, чем видимая область окна просмотра карты.
  • map.fitBounds() сбросит наклон и направление до нуля перед установкой границ.
  • map.panToBounds() сбросит наклон и направление до нуля перед панорамированием границ.
  • map.setTilt() принимает любое значение, но ограничивает максимальный наклон в зависимости от текущего уровня масштабирования карты.
  • map.setHeading() принимает любое значение и изменит его, чтобы оно соответствовало диапазону [0, 360].