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 chạy bản đồ và bằng cách gọi các 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 đồ cho thấy việc điều chỉnh độ nghiêng và hướng 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;
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ử mẫu

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

Nếu bạn đã bật tính năng tương tác của người dùng với độ nghiêng và xoay (tiêu đề) (bằng cách 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, phải và trái để điều chỉnh hướng.
  • Sử dụng bàn phím, giữ phím shift, sau đó sử dụng các phím mũi tên lên và xuống để điều chỉnh độ nghiêng, cũng như các phím mũi tên phải và trái để điều chỉnh hướng.

Đ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() 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. Heading là hướng máy ảnh theo chiều kim đồng hồ bắt đầu từ hướng bắc, vì vậy 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, vì vậy, map.setTilt(0) đang 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() để lấy giá trị độ nghiêng hiện tại.
  • Gọi setHeading() để đặt tiêu đề của bản đồ. Sử dụng getHeading() để lấy 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().

Xin lưu ý rằng phạm vi góc có thể sử dụng 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ẽ được xếp vào 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, tâm 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 thức khác

Khi bạn nghiêng hoặc xoay bản đồ, hành vi của các phương thức API JavaScript Maps khác 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 độ nghiêng được áp dụ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 bản đồ.
  • map.fitBounds() sẽ đặt lại độ nghiêng và hướng về 0 trước khi điều chỉnh giới hạn.
  • map.panToBounds() sẽ đặt lại độ nghiêng và hướng về 0 trước khi kéo các 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 giá trị đó để phù hợp với phạm vi [0, 360].