Tuỳ chỉnh bản đồ 3D

Bạn có thể tuỳ chỉnh giao diện của bản đồ cơ sở 3D bằng tính năng định kiểu bản đồ dựa trên đám mây.

Với tính năng định kiểu bản đồ dựa trên đám mây, bạn có thể kiểm soát giao diện của bản đồ mà bạn hiển thị cho người dùng. Bằng cách kiểm soát các tính năng như mật độ của các địa điểm yêu thích (POI), xoá một số danh mục POI và sửa đổi màu nền hoặc nét vẽ của các đối tượng, bạn có thể tạo ra trải nghiệm bản đồ phù hợp với người dùng.

Tính năng định kiểu bản đồ dựa trên đám mây mang đến trải nghiệm chỉnh sửa không cần lập trình trong Google Cloud Console. Mỗi kiểu tuỳ chỉnh mà bạn tạo đều được liên kết với một mã bản đồ; các nội dung chỉnh sửa đối với kiểu của bạn trong bảng điều khiển Maps sẽ tự động xuất hiện trong ứng dụng của bạn.

Ví dụ sau đây cho thấy một bản đồ sử dụng kiểu tuỳ chỉnh để thay đổi màu của biểu tượng và văn bản của đối tượng giải trí thành màu cam:

async function init() {
    const { Map3DElement } = await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: {
            lat: 37.75183154601466,
            lng: -119.52369070507672,
            altitude: 2200,
        },
        tilt: 67.5,
        heading: 108.94057782079429,
        range: 6605.57279990986,
        mapId: 'bcce776b92de1336e22c569f', // Styles are associated with map IDs.
        mode: 'HYBRID',
    });

    document.body.append(map);
}

void init();
index.js

Tổng quan

Quy trình tuỳ chỉnh bản đồ 3D bằng tính năng định kiểu bản đồ dựa trên đám mây cũng giống như quy trình đối với bản đồ 2D:

1	Tạo mã bản đồ	Tạo Mã bản đồ. Mã bản đồ được chuyển đến ứng dụng của bạn để xử lý kiểu. Bạn sẽ liên kết một kiểu tuỳ chỉnh với mã bản đồ này trong các bước tiếp theo.
2	Tạo kiểu bản đồ dựa trên đám mây	Chọn "Bản đồ đường đi 3D" (hỗ trợ chế độ sáng và chế độ tối) hoặc "Bản đồ kết hợp 3D" (hỗ trợ chế độ sáng) trong bước này.
3	Liên kết kiểu bản đồ với một bản đồ	Liên kết kiểu của bạn với mã bản đồ mà bạn đã tạo ở bước một
4	Thêm mã bản đồ vào ứng dụng	Chỉ định mã bản đồ trong mã bằng tham số map-id.
5	Xuất bản mã bản đồ	Xin lưu ý rằng các thay đổi đối với kiểu tuỳ chỉnh sẽ tự động được đưa vào ứng dụng của bạn sau khi xuất bản.

Để tìm hiểu kỹ hơn về cách tạo kiểu bản đồ, hãy xem bài viết Tạo và sử dụng kiểu bản đồ.

Cập nhật mã bản đồ một cách linh động

Bạn có thể cập nhật thuộc tính mapId một cách linh động sau khi tạo thực thể bản đồ. Nhờ đó, bạn có thể áp dụng một kiểu bản đồ dựa trên đám mây khác mà không cần tạo lại toàn bộ thực thể Map3DElement.

Để cập nhật mã bản đồ, hãy đặt thuộc tính mapId trên thực thể Map3DElement:

const map3DElement = document.querySelector('gmp-map-3d');

// Update the map ID dynamically
map3DElement.mapId = 'YOUR_MAP_ID';

Vì thuộc tính mapId phản ánh lại thuộc tính HTML, nên bạn cũng có thể cập nhật thuộc tính này một cách linh động bằng cách sửa đổi thuộc tính:

const map3DElement = document.querySelector('gmp-map-3d');

// Alternatively, set the map-id attribute
map3DElement.setAttribute('map-id', 'YOUR_MAP_ID');

Các điểm hạn chế

Có một số điểm hạn chế cần lưu ý khi sử dụng tính năng định kiểu bản đồ dựa trên đám mây với Bản đồ 3D trong Maps JavaScript:

• Chế độ tối chỉ được hỗ trợ ở chế độ ROADMAP (chế độ HYBRID và SATELLITE không hỗ trợ chế độ tối).
• Các tính năng dựa trên mã bản đồ (chẳng hạn như định kiểu dựa trên dữ liệu) không được hỗ trợ.