Tổng quan

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

Bản đồ 3D trong Maps JavaScript giúp bạn tạo trải nghiệm bản đồ 3D sống động. Nền tảng này cung cấp các công cụ để tuỳ chỉnh kiểu bản đồ, cải thiện khả năng hỗ trợ tiếp cận và nâng cao khả năng hữu dụng, giúp phát triển các ứng dụng hấp dẫn và có tính tương tác.

Sau đây là ví dụ về những việc bạn có thể làm với Bản đồ 3D trong API JavaScript của Maps:

Lý do nên sử dụng Bản đồ 3D trong Maps JavaScript

Bản đồ 3D trong Maps JavaScript cung cấp lớp Map3DElement (<gmp-map-3d>) trong thư viện maps3d để bạn có thể sử dụng hình ảnh 3D của Google trong các ứng dụng của mình. Bản đồ 3D cung cấp trải nghiệm kết xuất 3D tích hợp, cho phép bạn kết hợp hoặc thử nghiệm với môi trường thực tế 3D, chế độ xem thành phố và chuyến tham quan địa danh.

Sử dụng 3D <gmp-map-3d> (Map3DElement trong thư viện maps3d) cho địa hình 3D, độ nghiêng của camera, hướng và phạm vi bay qua, toà nhà 3D dạng khối và các đối tượng 3D như Marker3DElement (<gmp-marker-3d>). Đối với bản đồ đường 2D phẳng, ghim 2D AdvancedMarkerElement tiêu chuẩn và kiểu vectơ 2D, hãy sử dụng 2D <gmp-map> (MapElement hoặc google.maps.Map trong thư viện maps).

Bạn có thể làm gì với Bản đồ 3D trong Maps JavaScript?

• Tạo trải nghiệm bản đồ trong thế giới thực: Hiển thị hình ảnh 3D chân thực từ trên không của các thành phố, địa hình và địa danh ở chế độ SATELLITE hoặc HYBRID (phủ nhãn bản đồ cơ sở lên hình ảnh vệ tinh) hoặc hiển thị bản đồ cơ sở 3D được tạo kiểu ở chế độ ROADMAP bằng thuộc tính mode. Để biết thêm thông tin, hãy xem phần Thay đổi chế độ bản đồ.
• Tuỳ chỉnh kiểu bản đồ:
  • Định kiểu bản đồ 3D dựa trên đám mây: Kiểm soát chế độ hiển thị và kiểu của các địa điểm yêu thích (POI) và đường trên bản đồ cơ sở. Để biết thêm thông tin, hãy xem bài viết Tuỳ chỉnh bản đồ 3D.
  • Điểm đánh dấu, cửa sổ bật lên, hình nhiều đường và đa giác tuỳ chỉnh: Xác định vị trí và vẽ các tuyến đường hoặc ranh giới 3D trên bản đồ bằng cách sử dụng MarkerElement, Marker3DElement, Marker3DInteractiveElement, PopoverElement, Polyline3DElement và Polygon3DElement. Để biết thêm thông tin, hãy xem phần Điểm đánh dấu, Cửa sổ bật lên và Hình dạng và đường.
  • Mô hình 3D và thành phần glTF: Thêm mô hình 3D glTF PBR tuỳ chỉnh của các toà nhà, địa danh hoặc đối tượng tại toạ độ thực tế bằng cách sử dụng Model3DElement. Để biết thêm thông tin, hãy xem phần Mô hình.
• Xây dựng bản đồ sống động:
  • Đường dẫn camera đặt trước: Hướng dẫn người dùng xem bản đồ 3D bằng các ảnh động quỹ đạo và ảnh động bay qua camera được xác định trước bằng flyCameraTo và flyCameraAround. Để biết thêm thông tin, hãy xem bài viết Tạo ảnh động cho đường đi của camera.
  • Kiểm soát hoạt động tương tác của người dùng: Tuỳ chỉnh các chế độ điều khiển và chuyển động của camera mà người dùng có thể sử dụng. Để biết thêm thông tin, hãy xem phần Điều khiển và khám phá bản đồ 3D, Hạn chế chế độ xem và ranh giới của camera, và Kiểm soát vị trí của camera.

Ví dụ nhanh

Để tải thư viện maps3d và kết xuất một phần tử <gmp-map-3d> bằng mode="HYBRID", center (lat,lng,altitude), range, tilt và heading, hãy sử dụng đoạn mã sau:

<gmp-map-3d
  style="height: 400px; width: 100%;"
  mode="HYBRID"
  center="40.7484,-73.9857,200"
  range="900"
  tilt="67"
  heading="35">
</gmp-map-3d>
<script async
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=beta&libraries=maps3d">
</script>

Thay thế YOUR_API_KEY bằng khoá API Google Maps Platform của bạn.

Cách sử dụng Bản đồ 3D trong Maps JavaScript

1	Thiết lập	Bắt đầu bằng cách Thiết lập JavaScript API rồi hoàn tất các hướng dẫn thiết lập sau đó.
2	Tìm hiểu cách tính phí của Maps JavaScript API	Để biết thông tin, hãy xem phần Mức sử dụng và thanh toán.
3	Tạo bản đồ	Để biết thêm thông tin, hãy xem phần Bắt đầu.

Phạm vi tổng hợp dữ liệu

Lưới địa danh và toà nhà 3D chân thực có sẵn ở một số khu vực đô thị tại các quốc gia và khu vực được hỗ trợ. Ở những khu vực không có phạm vi bao phủ lưới 3D (chẳng hạn như Ấn Độ), <gmp-map-3d> sẽ kết xuất hình ảnh vệ tinh hoặc hình ảnh bản đồ đường 2D phủ lên độ cao địa hình 3D mà không có toà nhà 3D được đúc nổi. Để giới thiệu một địa danh trong khu vực không có lưới 3D, bạn có thể đặt mô hình 3D glTF tuỳ chỉnh tại toạ độ của địa danh đó bằng cách sử dụng Model3DElement hoặc sử dụng <gmp-map> 2D. Để biết phạm vi cung cấp theo từng quốc gia (trong cột Maps JavaScript 3D), hãy xem Thông tin chi tiết về phạm vi cung cấp của Google Maps Platform.

Các bước tiếp theo

• Hãy xem hướng dẫn Bắt đầu để tạo một ứng dụng "Hello, World!" Bản đồ 3D.
• Hãy thử tham gia lớp học lập trình giới thiệu để tìm hiểu cách thêm các tính năng vào bản đồ.
• Mở rộng kiến thức về điểm đánh dấu và ảnh động trong lớp học lập trình tiếp theo.
• Duyệt qua bộ sưu tập mẫu của Google để tìm một mẫu phù hợp với trường hợp sử dụng của bạn.