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 heading và tilt khi khởi tạo bản đồ, cũng như bằng cách gọi phương thức setTilt và setHeading trên bản đồ. Ví dụ sau đây thêm một số nút vào bản đồ. Các nút này sẽ điều chỉnh độ nghiêng và hướng theo phương thức 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;
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

Thử dùng mẫu

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

Nếu đã bật tính năng tương tác nghiêng và xoay (tiêu đề) của người dùng (theo phương thức lập trình hoặc trong Google Cloud Console), thì người dùng có thể điều chỉnh độ nghiêng và xoay bằng chuột và bàn phím:

  • Sử dụng chuột, 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à trái để điều chỉnh tiêu đề.
  • Sử dụng bàn phím, nhấn 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à tiêu đề theo phương thức lập trình

Sử dụng các phương thức setTilt() và 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 quay mặt 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ừ điểm 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 xiên.

  • Gọi setTilt() để đặt góc nghiêng của bản đồ. Sử dụng getTilt() để nhận 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 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ể sử dụng sẽ thay đổi theo mức thu phóng hiện tại. Các giá trị nằm ngoài phạm vi này sẽ bị giới hạn trong phạm vi hiện được cho phép.

Bạn cũng có thể sử dụng phương thức moveCamera để thay đổi tiêu đề, nghiêng, 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 đồ, hành vi 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 khu vực nhìn thấy được; khi áp dụng độ nghiêng, giới hạn được trả về có thể đại diện cho một khu vực lớn hơn khu vực hiển thị của khung nhìn trên bản đồ.
  • map.fitBounds() sẽ đặt lại độ nghiêng và hướng về 0 trước khi lắp giới hạn.
  • map.panToBounds() sẽ đặt lại độ nghiêng và hướng về 0 trước khi xoay giới hạn.
  • map.setTilt() chấp nhận mọi giá trị, nhưng hạn chế độ nghiêng tối đa dựa trên mức thu phóng bản đồ hiện tại.
  • map.setHeading() chấp nhận mọi giá trị và sẽ sửa đổi để phù hợp với phạm vi [0, 360].