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

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

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

Bản đồ hiển thị thông qua Bản đồ 3D chân thực trong Maps JavaScript API có các phần tử trê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à nút điều khiển và bạn có thể chọn đưa chúng vào giao diện người dùng hoặc không. Nếu bạn chặn các chế độ kiểm soát 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 Maps JavaScript API 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 camera đặt sẵn. 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ú.

Chế độ kiểm soát việc khám phá

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

Hình ảnh bản đồ có các chế độ kiểm soát

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

  • Nút đ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 camera.
  • Chế độ xoay cho phép bạn thay đổi hướng của camera.
  • Nút 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ế độ kiểm soát 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 camera đặt sẵn

Bản đồ 3D chân thực trong Maps JavaScript cung cấp 2 đường dẫn camera đặt sẵn. Bạn có thể tuỳ chỉnh đường dẫn camera 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 ra 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 camera sau:

  • Ảnh động flyCameraTo bay từ tâm bản đồ đến một đích đến cụ thể.
  • Ả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 tham quan, 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 hiệu ứng cho camera 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 hiệu ứng cho camera 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 các ảnh động để di chuyển camera đế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