Khám phá và điều khiển bản đồ 3D

Tổng quan về các chế độ kiểm soát

Các bản đồ hiển thị thông qua Bản đồ 3D chân thực trong Maps JavaScript API chứa các thành phần giao diện người dùng để hỗ trợ người dùng tương tác với bản đồ. Các phần tử này được gọi là các thành phần điều khiển và bạn có thể chọn đưa các thành phần này vào giao diện người dùng hoặc không. Nếu bạn chặn các nút điều khiển trên giao diện người dùng, người dùng vẫn có thể di chuyển trên bản đồ bằng phím tắt.

Bản đồ 3D chân thực trong API JavaScript của Maps cũng hỗ trợ hướng dẫn người dùng di chuyển trên bản đồ bằng cách sử dụng các đường dẫn máy ảnh đặt trước. Bạn có thể tuỳ chỉnh và kết hợp các đường dẫn này để tạo ra trải nghiệm 3D phong phú.

Các chế độ điều khiển dữ liệu khám phá

Hình ảnh sau đây cho thấy bộ điều khiển mặc định mà Bản đồ 3D chân thực hiển thị trong API Maps JavaScript:

Hình ảnh bản đồ có các chế độ điều khiển

Dưới đây là danh sách đầy đủ các chế độ điều khiển trong Bản đồ 3D chân thực trong Maps JavaScript:

  • Zoom control (Điều khiển thu phóng) hiển thị các nút "+" và "-" để thay đổi mức thu phóng của bản đồ.
  • Chế độ điều khiển độ nghiêng cho phép bạn thay đổi độ nghiêng của máy ảnh.
  • Chế độ điều khiển xoay cho phép bạn thay đổi hướng của máy ảnh.
  • Điều khiển di chuyển hiển thị các nút "←", "→", "↑" và "↓" để thay đổi tâm của bản đồ.

Mã mẫu sau đây minh hoạ cách bật/tắt các chế độ điều khiển khám phá:

JavaScript

const map = new Map3DElement({
  center: { lat: 37.819852, lng: -122.478549, altitude: 2000 },
  tilt: 75,
  heading: 330,
  mode: MapMode.SATELLITE,
  defaultUIDisabled: true,
});

HTML

<gmp-map-3d
  mode="hybrid"
  range="639.274301042242"
  tilt="64.92100184857551"
  center="34.0768990953219,-118.47450491266041,292.9794737933403"
  heading="-61.02026752077781"
  default-ui-disabled
></gmp-map-3d>

Đường dẫn máy ảnh đặt sẵn

Bản đồ 3D chân thực trong Maps JavaScript cung cấp hai đường dẫn máy ảnh đặt trước. Bạn có thể tuỳ chỉnh đường dẫn máy ảnh bằng cách thay đổi thời lượng của ảnh động (do đó tăng hoặc giảm tốc độ) hoặc bằng cách kết hợp các đường dẫn đó để tạo trải nghiệm điện ảnh hơn.

Bản đồ 3D chân thực trong Maps JavaScript hỗ trợ các đường dẫn máy ảnh sau:

  • Ảnh động flyCameraTo bay từ trung tâm bản đồ đến một đích đến được chỉ định.
  • Ảnh động flyCameraAround xoay quanh một điểm trên bản đồ theo số vòng được chỉ định.

Bạn có thể kết hợp hai đường dẫn có sẵn để bay đến một điểm yêu thích, xoay quanh điểm đó rồi dừng lại khi được chỉ định.

Chuyển đến

Mã mẫu sau đây minh hoạ cách tạo ảnh động cho máy ảnh bay đến một vị trí:

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraTo({
    endCamera: {
      center: { lat: 37.6191, lng: -122.3816 },
      tilt: 67.5,
      range: 1000
    },
    durationMillis: 5000
  });
}

Bay xung quanh

Mã mẫu sau đây minh hoạ cách tạo ảnh động cho máy ảnh bay xung quanh một vị trí:

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraAround({
    camera,
    durationMillis: 60000,
    rounds: 1
  });
}

Kết hợp ảnh động

Đoạn mã mẫu sau đây minh hoạ cách kết hợp ảnh động để đưa máy ảnh đến một vị trí, sau đó xoay quanh vị trí đó khi ảnh động đầu tiên kết thúc:

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraTo({
    endCamera: flyToCamera,
    durationMillis: 5000,
  });

  map.addEventListener('gmp-animation-end', () => {
    map.flyCameraAround({
      camera: flyToCamera,
      durationMillis: 60000,
      rounds: 1
    });
  }, {once: true});
}

Các bước tiếp theo