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

Bạn có thể tuỳ chỉnh giao diện và cảm nhậ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 và cảm nhậ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 tô hoặc đường viền của các tính nă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 cung cấp trải nghiệm chỉnh sửa không cần mã 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 chỉnh sửa được thực hiện đối với kiểu của bạn trong bảng điều khiển bản đồ 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 để đổi màu của các biểu tượng và văn bản của tính nă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ý 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" (3D kết hợp) 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 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ã của bạn 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.

Để xem chi tiết 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. Điều này cho phép bạn á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ế

Bạn cần lưu ý một số điểm 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 Bản đồ 3D trong Maps JavaScript:

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