Tương tác với bản đồ

Trang này cung cấp thông tin về các tính năng chính trong Bản đồ 3D chân thực trong Maps JavaScript, cho phép bạn tạo trải nghiệm 3D tương tác và sống động. Tài liệu sau đây trình bày:

  • Xử lý các sự kiện giao diện người dùng để tương tác liền mạch.
  • Bao gồm các chế độ điều khiển khám phá để di chuyển trong không gian 3D.
  • Sử dụng các đường dẫn máy ảnh đặt trước cho các chuyến tham quan có hướng dẫn.
  • Áp dụng các quy định hạn chế về máy ảnh để duy trì tiêu điểm trên một khu vực cụ thể.

Sự kiện giao diện người dùng

Phần này trình bày các sự kiện tương tác và thông báo thay đổi trạng thái mà bạn có thể nghe và xử lý theo phương thức lập trình khi làm việc với bản đồ 3D. JavaScript trong trình duyệt là sự kiện do sự kiện điều khiển, nghĩa là nó phản hồi các hoạt động tương tác của người dùng bằng cách tạo các sự kiện mà chương trình của bạn có thể nghe và thực thi mã cho phù hợp.

Có hai loại sự kiện chính:

  • Các sự kiện tương tác của người dùng (chẳng hạn như lượt nhấp chuột) được truyền từ khung nhìn bản đồ 3D đến mã của bạn. Các sự kiện này cho phép bạn phản hồi các hành động trực tiếp của người dùng trong môi trường bản đồ 3D. Xem mẫu.
  • Thông báo thay đổi trạng thái phản ánh các bản cập nhật đối với mô hình dữ liệu bản đồ 3D cơ bản và trạng thái kết xuất, bằng cách sử dụng lược đồ đặt tên property_changed thông thường.

Mỗi đối tượng API lập bản đồ 3D hiển thị một tập hợp các sự kiện được đặt tên mà chương trình của bạn có thể đăng ký trình nghe sự kiện và thực thi logic khi các sự kiện đó xảy ra bằng cách sử dụng hàm addEventListener() tích hợp. Ví dụ sau đây minh hoạ các sự kiện phổ biến được kích hoạt khi người dùng tương tác với bản đồ 3D.

Ví dụ sau đây cho biết những sự kiện nào được kích hoạt khi người dùng tương tác với bản đồ:

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

Các bản đồ hiển thị trong 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 người dùng. Các chế độ điều khiển khám phá được đưa vào theo mặc định, nhưng bạn có thể chọn tắt các chế độ này trong ứng dụng.

Hình ảnh sau đây cho thấy các chế độ điều khiển mặc định mà Bản đồ 3D chân thực hiển thị trong 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 đồ.

Điều khiển máy ảnh và ảnh động

Đườ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ố lần bạn 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 muốn.

Dùng thử mẫu

Quy định hạn chế về máy ảnh

Bạn nên kiểm soát chế độ xoay của máy ảnh, độ cao tối đa hoặc tạo các giới hạn lat/lng để hạn chế chuyển động của người dùng trong một bản đồ nhất định. Bạn có thể thực hiện việc này bằng cách sử dụng các quy định hạn chế về máy ảnh.

Để biết ví dụ về cách hoạt động và triển khai các quy định hạn chế về máy ảnh, hãy xem bản minh hoạ.