Наклон и ориентация

Выберите платформу: 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;
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 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

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

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

Если взаимодействие с пользователем по наклону и вращению (заголовку) включено (программно или в Google Cloud Console), пользователи могут регулировать наклон и вращение с помощью мыши и клавиатуры:

  • Используя мышь , удерживайте нажатой клавишу 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].