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.

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 cân nhắc khi tích hợp với ứng dụng của bạn.

Ví dụ về trường hợp sử dụng cho tính năng tìm kiếm địa điểm và tìm đường. — Ví dụ về tìm kiếm địa điểm và tìm đườ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 thành phần tương tác và hình ảnh, hãy cân nhắc những phương pháp sau.

Tải bản đồ

Thiết lập tải và kết xuất ban đầu 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 khi tải trang ban đầu.
Thư viện: Tải các 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 các thành phần web như <gmp-map-3d> ngay trong trang HTML của mình bằng tính năng tải tập lệnh trực tiếp, 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 đối tượng trên bản đồ cơ sở: Sử dụng mapId tuỳ chỉnh để lọc các điểm đến yêu thích (POI) trên bản đồ cơ sở (chế độ KẾT HỢP) và kiểm soát mật độ của các điểm đến đó, đặc biệt là nếu ứng dụng có bộ phần tử tuỳ chỉnh riêng, chẳng hạn như điểm đánh dấu hoặc đường nhiều đoạn. Điều này giúp tránh tình trạng rối mắt và khả năng 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ở như điểm đến, đường nhiều đoạn, tên đường, tên đường phố (chế độ VỆ TINH).
Sự kiện: Lắng 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 hiệu ứ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à) > Điểm đến 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 thực hiện các thay đổi đối với nội dung của bản đồ. Nếu người dùng bắt đầu tương tác (di chuyển, thu phóng) với bản đồ trước sự kiện gmp-steadystate ban đầu, thì sự kiện 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ủ (chẳng hạn như điểm đánh dấu hoặc đa giác) trong khi người dùng di chuyển hoặc thu phóng bản đồ, tránh hiển thị hoặc cập nhật nội dung lớp phủ (chẳng hạn 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 lệnh gọi vẽ.
- Sử dụng rAF: Đồng bộ hoá các bản cập nhật với tốc độ hiển thị của trình duyệt để có ảnh động mượt mà ở tốc độ 60 khung hình/giây và giảm mức tiêu thụ điện năng.
- Tránh các thao tác 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 biệt logic: Thực hiện tất cả logic chuyên sâu trước 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, chẳng hạn như chế độ 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), chế độ xem thấp hoặc không nghiêng.
- Thêm bounds (sample) 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 bộ tải trước: Mặc dù <gmp-map-3d> tải cực kỳ nhanh, nhưng có thể mất một khoảng thời gian để hiển thị ở độ phân giải đầy đủ cho người dùng có thiết bị cấp thấp (GPU thấp) hoặc băng thông (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 với cảnh 3D tải ở chế độ 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:
- Một bản đồ 2D thay thế (VỆ TINH) có thể được cung cấp 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ị một 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à việc quản lý phần tử trực quan

Bản đồ 3D cung cấp nhiều cách để hiển thị các phần tử trực quan như điểm đánh dấu, đường nhiều đoạn, đường nhiều đoạn 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ó số lượng lớn hơn.

Điểm đánh dấu

Lựa chọn tuỳ chỉnh tối ưu:
- PinElement: Để thay đổi điểm đánh dấu cơ bản (màu sắc, tỷ lệ, đường viền, glyph 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.
- Sử dụng HTMLImageElement hoặc SVGElement Markers một cách tiết kiệm: 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 (chẳng hạn như biểu tượng) vào SVGElement (yêu cầu mã hoá base64). Chúng sẽ được chuyển đổi thành hình ảnh khi tải và gây ra mức hao tổn hiệu suất. HTMLImageElement và SVGElement phải được bao bọc trong phần tử <template> trước khi chỉ định cho khe cắm mặc định của Marker3DElement.
- Hiện tại, bạ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 phải luôn 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 các điểm này để duy trì trải nghiệm bản đồ rõ ràng và ít lộn xộn hơn, đặc biệt là ở mức thu phóng cao.
Chỉ sử dụng các địa điểm 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 những điểm đánh dấu bắt buộc phải nhìn thấy xuyên 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 thử sự tắc nghẽn: Vì bản đồ là 3D nên các điểm đánh dấu có thể bị che khuất (tắc nghẽn) về mặt hình ảnh bởi các toà nhà hoặc địa hình. Thử nghiệm các góc camera và độ cao của điểm đánh dấu khác nhau để đảm bảo các POI quan trọng vẫn hiển thị hoặc triển khai logic để điều chỉnh khả năng hiển thị và độ cao khi bị che khuất.
Tận dụng độ cao: Trong bản đồ 3D, các đ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 được cố định đúng cách khi bản đồ bị nghiêng hoặc xoay.

Đa giác và đường nhiều đoạn

Ví dụ về tải đa giác — Tình huống ví dụ: 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 một thuật toán đơn giản hoá cho dữ liệu đường dẫn của bạn. Điều này giúp giảm số lượng đỉnh trong khi vẫn giữ được hình dạng chung, 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 dữ liệu 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 việ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á cao của đường nhiều đoạn hoặc đa giác.
Tính toán trước cho Đa giác được đùn: Nếu đa giác của bạn được đùn (extruded: true), thì dữ liệu đường dẫn sẽ xác định một thể tích 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 nhiều tài nguyên tính toán. Đảm bảo dữ liệu nguồn cho đa giác của bạn đơn giản nhất có thể.
Kiểm thử hiệu suất của đường nhiều đoạn và đa giác: Khi thêm nhiều đường nhiều đoạn/đa giác hoặc đường nhiều đoạn/đa giác phức tạp, đặc biệt là khi được đùn cho chế độ 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 Đường nhiều đoạn được đùn (nếu có thể): Mặc dù Đường nhiều đoạn có thể sử dụng giá trị độ cao để được đặt trong không gian 3D, nhưng việc đùn Đường nhiều đoạn (ví dụ: cho đường này 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 đường nhiều đoạn 2D trên mặt đất (RELATIVE_TO_GROUND) hoặc chiều rộng nét tối thiểu để có hiệu suất tốt hơn.
Chỉ sử dụng drawsOccludedSegments cho các phần tử định tuyến quan trọng. Đối với các 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 khi kết xuất một cách không cần thiết.

Mô hình 3D

Việc kết xuất và tương tác mô hình 3D .glb (chẳng hạn như sự kiện gmp-click) 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ữ các tệp mô hình .glb phức tạp dưới 5 MB (tốt nhất là ít hơn). Phương pháp chính để đạt được điều này là áp dụng Nén Draco cho dữ liệu lưới trong tệp .glb, điều này 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.
Center Model Origin (Tâm mô hình gốc): Đảm bảo phần mềm mô hình hoá 3D xuất mô hình có gốc (điểm 0, 0, 0) ở tâm 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 được cố định chính xác vào toạ độ Lat, Lng.
Quản lý CORS: Nếu các 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, 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 tải được mô hình.