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 cách sử dụ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 trình bày cho người dùng. Bằng cách kiểm soát các tính năng như mật độ của địa điểm yêu thích (POI), việc xoá một số danh mục POI và sửa đổi màu nền hoặc đường viền của các đối tượng, bạn có thể tạo 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 mã trong bảng điều khiển Cloud. 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 đồ; nội dung chỉnh sửa mà bạn thực hiện cho kiểu 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();

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ư đối với bản đồ 2D:

1 Tạo mã bản đồ Tạo Mã bản đồ. Mã bản đồ được truyền đến ứng dụng của bạn để xử lý việc tạo 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 Bạn phải chọn "3D Hybrid" (Kết hợp 3D) và sử dụng "light mode" (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 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 cách sử dụ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 kết hợp vào ứng dụng của bạn sau khi xuất bản.

Để tìm hiểu kỹ 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 bản đồ được khởi tạo. 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 phải 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 trở 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ế

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

  • Không hỗ trợ chế độ tối.
  • Các tính năng có hỗ trợ mã bản đồ như kiểu dựa trên dữ liệu không được hỗ trợ.