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 thêm các thuộc tính heading và tilt khi khởi tạo bản đồ và bằng cách gọi phương thức setTilt và setHeading trên bản đồ. Nội dung sau đây ví dụ này sẽ thêm một số nút vào bản đồ để hiển thị điều chỉnh độ nghiêng theo phương thức lập trình và tiêu đề theo mức 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>

    <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 các tương tác của người dùng nghiêng và xoay (tiêu đề) đã được bật ( 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, nhấn giữ phím shift rồi nhấp và kéo chuột lên và xuống để điều chỉnh độ nghiêng, phải và trái để điều chỉnh tiêu đề.
  • Sử dụng bàn phím, nhấn giữ phím shift rồi dùng phím mũi tên lên và xuống các phím mũi tên để điều chỉnh độ nghiêng và 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 theo phương thức lập trình và hướng trên bản đồ vectơ. Hướng là hướng của máy ảnh độ theo chiều kim đồng hồ bắt đầu từ hướng bắc, nên map.setHeading(90) sẽ xoay bản đồ sao cho hướng đông hướng lên trên. Góc nghiêng được đo từ thiên đỉnh, do đó map.setTilt(0) đang nhìn thẳng xuống, còn kết quả là map.setTilt(45) ở góc nhìn 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 đồ. Dùng getHeading() để có 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ấp độ. Các giá trị không nằm trong phạm vi này sẽ bị giới hạn trong phạm vi hiện cho phép dải ô.

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

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

Khi tính năng nghiêng hoặc xoay được áp dụng cho bản đồ, hành vi của API Maps JavaScript khác bị ảnh hưởng:

  • map.getBounds() luôn trả về hộp giới hạn nhỏ nhất chứa khu vực nhìn thấy; khi áp dụng nghiêng, giới hạn được trả về có thể biểu thị lớn hơn khu vực nhìn thấy 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 điều chỉnh ranh giới.
  • map.panToBounds() sẽ đặt lại độ nghiêng và hướng về 0 trước khi xoay ranh giới.
  • 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 giá trị đó cho phù hợp với phạm vi [0, 360].