Places UI Kit: Một thư viện có thể sử dụng ngay, cung cấp không gian tuỳ chỉnh và kiểm soát cho nhà phát triển. Hãy dùng thử và chia sẻ ý kiến của bạn về trải nghiệm dùng Bộ giao diện người dùng.

Google sử dụng công nghệ AI để dịch nội dung sang ngôn ngữ bạn ưu tiên. Bản dịch bằng AI có thể có lỗi.

Các phương pháp hay nhất cho Bản đồ 3D

Hướng dẫn này cung cấp thông tin chi tiết về các thành phần web của Bản đồ 3D và những điều cần lưu ý khi tích hợp với ứng dụng của bạn.

Trường hợp sử dụng mẫu cho tính năng tìm kiếm địa điểm và tìm tuyến đường. — Ví dụ về tìm kiếm địa điểm và tìm tuyến đường.

Những điều cần cân nhắc về hiệu suất

Để đảm bảo trải nghiệm mượt mà và thích ứng cho các phần tử tương tác và hình ảnh, hãy cân nhắc các phương pháp sau.

Tải bản đồ

Quá trình tải ban đầu và thiết lập kết xuất của Bản đồ 3D kết hợp các kỹ thuật định cấu hình trình duyệt và các phương pháp hay nhất về giao diện người dùng để mang lại trải nghiệm tối ưu cho người dùng.

Tải API: Sử dụng tính năng tải động không đồng bộ của Bản đồ 3D để tải Maps JavaScript API trong lần tải trang đầu tiên.
Thư viện: Tải thư viện theo phương thức lập trình khi cần, chẳng hạn như google.maps.importLibrary("maps3d"). Ngoài ra, nếu bạn sử dụng trực tiếp các thành phần web như <gmp-map-3d> trong trang HTML bằng tính năng tải tập lệnh trực tiếp, thì các thư viện sẽ tự động tải vào thời điểm thích hợp
Quản lý các tính năng của bản đồ cơ sở: Sử dụng mapId tuỳ chỉnh để lọc các địa điểm yêu thích trên bản đồ cơ sở (chế độ HYBRID) và kiểm soát mật độ của các địa điểm đó, đặc biệt là nếu ứng dụng có tập hợp các phần tử tuỳ chỉnh riêng, chẳng hạn như điểm đánh dấu hoặc hình nhiều đường. Điều này giúp tránh gây rối mắt và có thể bị chồng chéo. Ngoài ra, bạn có thể tắt các tính năng của ô vectơ bản đồ cơ sở, chẳng hạn như địa điểm yêu thích, hình nhiều đường của đường, tên đường, tên phố (chế độ VỆ TINH).
Sự kiện: Nghe các sự kiện gmp-steadystate hoặc gmp-error để xây dựng logic tiếp theo, chẳng hạn như tải điểm đánh dấu, tạo ảnh động cho camera.

Trình tự tải bản đồ — Canvas nền > Ô thu nhỏ > Lưới địa hình > Lưới bề mặt (ví dụ: toà nhà) > Địa điểm yêu thích và nhãn đường, các phần tử tuỳ chỉnh được tải song song (điểm đánh dấu, mô hình 3D, v.v.)

Tương tác của người dùng: Chờ sự kiện gmp-steadystate trước khi thay đổi nội dung của bản đồ. Nếu người dùng bắt đầu tương tác (xoay, thu phóng) với bản đồ trước sự kiện gmp-steadystate ban đầu, thì sự kiện này sẽ chỉ kích hoạt sau khi người dùng ngừng tương tác. Tránh hiển thị hoặc cập nhật nội dung lớp phủ (như điểm đánh dấu hoặc đa giác) trong khi người dùng kéo hoặc thu phóng bản đồ, tránh hiển thị hoặc cập nhật nội dung lớp phủ (như điểm đánh dấu hoặc đa giác) bằng cách theo dõi gmp-centerchange, gmp-headingchange, gmp-rangechange, gmp-rollchange, gmp-tiltchange.
Sử dụng requestAnimationFrame() (rAF) để cập nhật liên tục và tách biệt hoàn toàn các phép tính chuyên sâu khỏi hàm gọi vẽ.
- Sử dụng rAF: Đồng bộ hoá nội dung cập nhật với tốc độ hiển thị của trình duyệt để có ảnh động 60 khung hình/giây mượt mà và giảm mức tiêu thụ điện năng.
- Tránh các tác vụ vẽ chuyên sâu: Đừng thực hiện các tác vụ nặng, không vẽ trong quá trình cập nhật cuối cùng.
- Tách riêng logic: Thực hiện tất cả logic chuyên sâu trước khi thực hiện các lệnh gọi cập nhật thành phần web tối thiểu trong vòng lặp rAF.
Chế độ cài đặt cảnh ban đầu: <gmp-map-3d> Chế độ cài đặt camera như Độ nghiêng sẽ ảnh hưởng đến tốc độ tải. Cảnh càng được phóng to hoặc nghiêng thì càng có nhiều đa giác chi tiết được hiển thị và cần tải. Mức độ chi tiết cũng sẽ phụ thuộc vào vị trí (ví dụ: thành phố có nhiều toà nhà so với vùng nông thôn chỉ có các đặc điểm tự nhiên).
- Ưu tiên chế độ xem ít phóng to (độ cao lớn), thấp hoặc không nghiêng.
- Thêm ranh giới (mẫu) vào bản đồ để người dùng tập trung vào một khu vực cụ thể và các ô có thể tải đầy đủ.
Hình ảnh của trình tải trước: Mặc dù <gmp-map-3d> tải cực kỳ nhanh, nhưng có thể mất một chút thời gian để hiển thị ở độ phân giải đầy đủ cho người dùng có thiết bị cấu hình thấp (GPU thấp) hoặc băng thông thấp (4G chậm). Trong trường hợp này, bạn có thể tạo một trình tải trước bằng hình ảnh, ảnh động hoặc văn bản có cảnh 3D đang tải trong nền. Xem sự kiện chính cần sử dụng bên dưới:

// create the map in the background and wait for gmp-steadystate event
async function initMap() {
    await google.maps.importLibrary("maps3d");
    const map = document.querySelector('gmp-map-3d');
    const div = document.querySelector('div'); // preloader "
    map.addEventListener('gmp-steadystate', ({isSteady}) => {
        if (isSteady) {
            div.style.display = 'none';
        }
    });
}
initMap();

Bản đồ 2D:
- Bạn có thể cung cấp bản đồ 2D thay thế (SATELLITE) cho những người dùng này trong khi vẫn bao gồm dữ liệu địa lý của bạn, chẳng hạn như điểm đánh dấu.

Ngoài ra, bạn có thể hiển thị Bản đồ tĩnh 2D bổ sung ở chế độ VỆ TINH để người dùng hình dung một địa điểm nhất định trong khi tải.

Hiệu suất và cách quản lý thành phần hình ảnh

Bản đồ 3D cung cấp một số cách để hiển thị các thành phần hình ảnh như điểm đánh dấu, hình nhiều đường và mô hình 3D với hiệu suất tối ưu và thời gian kết xuất tối thiểu, ngay cả đối với hình ảnh có dung lượng lớn hơn.

Điểm đánh dấu

Lựa chọn tuỳ chỉnh tối ưu:
- PinElement: Đối với các thay đổi cơ bản về điểm đánh dấu (màu sắc, tỷ lệ, đường viền, ký tự văn bản), hãy sử dụng phần tử <gmp-pin> hoặc lớp PinElement. Đây là phương thức tuỳ chỉnh hiệu quả nhất.
- Hạn chế sử dụng điểm đánh dấu HTMLImageElement hoặc SVGElement: Sử dụng để tuỳ chỉnh thêm, chẳng hạn như thêm độ trong suốt hoặc chèn hình ảnh (như biểu tượng) vào SVGElement (yêu cầu mã hoá base64). Các tệp này sẽ được tạo điểm ảnh khi tải và làm tăng mức hao tổn hiệu suất. HTMLImageElement và SVGElement phải được gói trong phần tử <template> trước khi gán cho vùng mặc định của Marker3DElement.
- Hiện không thể thêm HTML hoặc CSS thuần tuý.
Quản lý hành vi va chạm: Tận dụng thuộc tính collisionBehavior của điểm đánh dấu. Đối với các điểm đánh dấu quan trọng luôn phải hiển thị, hãy đặt hành vi cho phù hợp. Đối với các điểm đánh dấu ít quan trọng hơn, hãy cho phép ẩn chúng để duy trì trải nghiệm bản đồ rõ ràng hơn, ít lộn xộn hơn, đặc biệt là ở mức thu phóng cao.
Chỉ dành cho các địa điểm yêu thích quan trọng: Chỉ sử dụng drawsWhenOccluded (hoặc đặt thuộc tính theo phương thức lập trình) cho các điểm đánh dấu mà người dùng nhất định phải nhìn thấy qua các toà nhà hoặc địa hình (ví dụ: mục tiêu cứu hộ, đường dây tiện ích ngầm hoặc hình đại diện của người dùng).
Kiểm tra độ che khuất: Vì bản đồ ở dạng 3D, nên các điểm đánh dấu có thể bị che khuất (bị che khuất) bởi các toà nhà hoặc địa hình. Thử nghiệm nhiều góc camera và độ cao của điểm đánh dấu để đảm bảo các địa điểm yêu thích quan trọng vẫn hiển thị hoặc triển khai logic để điều chỉnh chế độ hiển thị và độ cao khi bị che khuất.
Tận dụng độ cao: Trong bản đồ 3D, điểm đánh dấu phải sử dụng vị trí có giá trị độ cao. Đối với các điểm đánh dấu liên kết với địa hình hoặc toà nhà, hãy sử dụng altitudeMode: "RELATIVE_TO_GROUND", "RELATIVE_TO_MESH" hoặc các chế độ cài đặt tương tự để đảm bảo điểm đánh dấu neo chính xác khi bản đồ bị nghiêng hoặc xoay.

Đa giác và hình nhiều đường

Ví dụ về cách tải đa giác — Ví dụ về trường hợp: 100-150 mili giây để tải 1.000 đa giác (máy tính xách tay hiện đại: macOS M3 Pro, Chrome)

Đơn giản hoá hình học: Trước khi kết xuất, hãy áp dụng thuật toán đơn giản hoá cho dữ liệu đường dẫn. Việc này giúp giảm số lượng đỉnh trong khi vẫn giữ nguyên hình dạng chung, nhờ đó cải thiện đáng kể tốc độ kết xuất, đặc biệt là đối với các ranh giới hoặc tuyến đường phức tạp.
Giảm bớt theo mức thu phóng: Đối với các tập dữ liệu rất lớn, hãy cân nhắc chỉ tải hình học có độ chi tiết cao hơn khi người dùng phóng to khu vực. Ở mức thu phóng thấp, bạn chỉ cần một phiên bản đơn giản hoá của hình nhiều đường hoặc đa giác.
Tính toán trước cho Đa giác nhô ra: Nếu đa giác của bạn nhô ra (extruded: true), thì dữ liệu đường dẫn sẽ xác định một khối 3D (một lưới). Việc xử lý các đa giác phức tạp, có nhiều đỉnh sẽ tiêu tốn tài nguyên tính toán. Đảm bảo dữ liệu nguồn cho đa giác của bạn càng đơn giản càng tốt.
Kiểm tra hiệu suất của hình nhiều đường và đa giác: Khi thêm nhiều hình nhiều đường/đa giác hoặc hình nhiều đường/đa giác phức tạp, đặc biệt là khi được kéo dài cho 3D, hãy đảm bảo rằng chúng không làm giảm tốc độ khung hình. Giới hạn số lượng đỉnh hoặc sử dụng thuật toán đơn giản hoá nếu cần.
Khi cập nhật một hình dạng, hãy sửa đổi toàn bộ mảng đường dẫn trong một thao tác duy nhất thay vì lặp lại và sửa đổi từng phần tử. Một thao tác gán duy nhất (ví dụ: polyline.path = newPathArray;) hiệu quả hơn nhiều so với nhiều lần cập nhật lặp lại.
Tránh sử dụng hình nhiều đường được kéo dài (nếu có thể): Mặc dù hình nhiều đường có thể sử dụng giá trị độ cao để đặt trong không gian 3D, nhưng việc kéo dài hình nhiều đường (ví dụ: gán cho hình nhiều đường một chiều rộng nét vẽ và khoảng độ cao lớn) có thể tốn nhiều tài nguyên đồ hoạ. Bất cứ khi nào có thể, hãy sử dụng hình nhiều đường 2D trên mặt đất (RELATIVE_TO_GROUND) hoặc chiều rộng nét vẽ tối thiểu để có hiệu suất tốt hơn.
Chỉ sử dụng drawsOccludedSegments cho các thành phần định tuyến quan trọng. Đối với hình dạng nền hoặc hình dạng theo bối cảnh, hãy cho phép chúng bị che khuất một cách tự nhiên bởi hình học 3D của bản đồ. Việc hiển thị hình học ẩn không quan trọng sẽ làm tăng độ phức tạp không cần thiết khi kết xuất.

Mô hình 3D

Tính năng kết xuất hình ảnh và tính tương tác của mô hình 3D .glb (chẳng hạn như sự kiện nhấp chuột) diễn ra rất nhanh trong <gmp-map-3d>.

Giảm thiểu kích thước tệp bằng cách nén: Để đảm bảo tải nhanh, đặc biệt là trên mạng di động, hãy giữ cho các tệp mô hình .glb phức tạp có kích thước dưới 5 MB (lý tưởng nhất là nhỏ hơn). Phương pháp chính để đạt được điều này là áp dụng Draco Compression (Nén Draco) trên dữ liệu lưới trong các tệp .glb, nhờ đó có thể giảm đáng kể kích thước tệp (thường là hơn 50%) mà không làm giảm chất lượng hình ảnh.
Đặt gốc mô hình ở giữa: Đảm bảo phần mềm tạo mô hình 3D xuất mô hình có gốc (điểm 0, 0, 0) nằm ở giữa phần đế của mô hình. Điều này giúp đơn giản hoá việc định vị và xoay trên bản đồ, đảm bảo mô hình neo chính xác vào toạ độ Vĩ độ, Kinh độ.
Quản lý CORS: Nếu tệp mô hình của bạn được lưu trữ trên một miền hoặc CDN khác với ứng dụng web, thì bạn phải định cấu hình máy chủ lưu trữ để thêm các tiêu đề Chia sẻ tài nguyên trên nhiều nguồn gốc (CORS) cần thiết (ví dụ: Access-Control-Allow-Origin: *). Nếu không, bản đồ sẽ không thể tải mô hình.