Nghiêng và xoay

Chọn nền tảng: Android iOS JavaScript

Xem mẫu

Tổng quan

Bạn có thể đặt độ nghiêng và xoay (tiêu đề) trên bản đồ vectơ bằng cách đưa các thuộc tính headingtilt khi khởi tạo bản đồ và bằng cách gọi các phương thức setTiltsetHeading trên bản đồ. Ví dụ sau đây thêm một số nút vào bản đồ. Nút này hiển thị việc điều chỉnh độ nghiêng và tiêu đề theo cách lập trình theo mức tăng 20 độ.

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;

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.
      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>

Thử mẫu

Sử dụng cử chỉ chuột và bàn phím

Bạn có thể điều chỉnh độ nghiêng và xoay bằng chuột và bàn phím:

  • Sử dụng chuột, nhấn và giữ phím shift, sau đó nhấp và kéo chuột lên và xuống để điều chỉnh độ nghiêng, sang phải và sang trái để điều chỉnh hướng.
  • Sử dụng bàn phím, hãy nhấn và giữ phím shift, sau đó dùng các phím mũi tên lên và xuống để điều chỉnh độ nghiêng, còn các phím mũi tên phải và trái để điều chỉnh tiêu đề.

Điều chỉnh độ nghiêng và hướng theo phương thức lập trình

Sử dụng các phương thức setTilt()setHeading() để điều chỉnh độ nghiêng và hướng trên bản đồ vectơ theo phương thức lập trình. Hướng là hướng mà máy ảnh đang quay theo độ kim đồng hồ bắt đầu từ phía Bắc, vì vậy, map.setHeading(90) sẽ xoay bản đồ để hướng đông hướng lên trên. Góc nghiêng được đo từ thiên đỉnh, vì vậy, map.setTilt(0) sẽ nhìn thẳng xuống, trong khi map.setTilt(45) sẽ dẫn đến chế độ xem từ góc nghiêng.

  • Gọi setTilt() để đặt góc nghiêng của bản đồ. Sử dụng getTilt() để lấy giá trị độ nghiêng hiện tại.
  • Gọi setHeading() để đặt tiêu đề của bản đồ. Sử dụng getHeading() để nhận giá trị tiêu đề hiện tại.

Để thay đổi trung tâm bản đồ trong khi vẫn giữ nguyên độ nghiêng và hướng, hãy sử dụng map.setCenter() hoặc map.panBy().

Lưu ý rằng phạm vi các góc có thể được sử dụng sẽ thay đổi theo mức thu phóng hiện tại. Các giá trị bên ngoài phạm vi này sẽ được giới hạn trong phạm vi cho phép hiện tại.

Bạn cũng có thể dùng phương thức moveCamera để thay đổi tiêu đề, độ nghiêng, căn giữa và thu phóng theo phương thức lập trình. Tìm hiểu thêm.

Tác động đến các phương pháp khác

Khi áp dụng tính năng nghiêng hoặc xoay cho bản đồ, hoạt động của các phương thức API JavaScript khác của Maps sẽ bị ảnh hưởng:

  • map.getBounds() luôn trả về hộp giới hạn nhỏ nhất bao gồm vùng hiển thị; khi áp dụng độ nghiêng, các giới hạn được trả về có thể đại diện cho một vùng lớn hơn vùng hiển thị của khung nhìn của bản đồ.
  • map.fitBounds() sẽ đặt lại độ nghiêng và hướng về 0 trước khi khớp với các giới hạn.
  • map.panToBounds() sẽ đặt lại độ nghiêng và hướng về 0 trước khi xoay các giới hạn.
  • map.setTilt() chấp nhận mọi giá trị nhưng giới hạn độ nghiêng tối đa dựa trên mức thu phóng hiện tại của bản đồ.
  • map.setHeading() chấp nhận mọi giá trị và sẽ sửa đổi giá trị đó cho phù hợp với phạm vi [0, 360].